From 19dd626349fc88744327a103f457ff49572381bd Mon Sep 17 00:00:00 2001 From: romellem Date: Thu, 2 Apr 2020 11:12:57 -0500 Subject: [PATCH 1/3] Implements new lifecycle events - onStart: called when starting to drag the element - onStartDecelerating: called when the deceleration begun - onEndDecelerating: called when the deceleration has ended `update` was also renamed to `onUpdate`, although this was done in a backwards compatible fashion. Instantiating an Implosion instance with `update` is now deprecated. --- src/implosion.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/src/implosion.js b/src/implosion.js index fdf2ad9..c8e10e1 100644 --- a/src/implosion.js +++ b/src/implosion.js @@ -39,7 +39,11 @@ window.addEventListener('touchmove', function() {}, passiveSupported ? { passive export default class Implosion { constructor({ source: sourceEl = document, - update: updateCallback, + update: updateCallbackDeprecated, + onUpdate: updateCallback, + onStart: startCallback, + onStartDecelerating: startDeceleratingCallback, + onEndDecelerating: endDeceleratingCallback, multiplier = 1, friction = 0.92, initialValues, @@ -78,6 +82,14 @@ export default class Implosion { throw new Error('IMPETUS: source not found.'); } + /** + * Using the `update` configuration is deprecated, us the `onUpdate` key instead + * @deprecated + */ + if (!updateCallback && updateCallbackDeprecated) { + updateCallback = updateCallbackDeprecated; + } + if (!updateCallback) { throw new Error('IMPETUS: update function not defined.'); } @@ -219,6 +231,36 @@ export default class Implosion { prevTargetY = targetY; } + /** + * Executes the start function + */ + function callStartCallback() { + if (!startCallback) { + return; + } + startCallback.call(sourceEl, targetX, targetY, prevTargetX, prevTargetY); + } + + /** + * Executes the start decelerating function + */ + function callStartDeceleratingCallback() { + if (!startDeceleratingCallback) { + return; + } + startDeceleratingCallback.call(sourceEl, targetX, targetY, prevTargetX, prevTargetY); + } + + /** + * Executes the end decelerating function + */ + function callEndDeceleratingCallback() { + if (!endDeceleratingCallback) { + return; + } + endDeceleratingCallback.call(sourceEl, targetX, targetY, prevTargetX, prevTargetY); + } + /** * Creates a custom normalized event object from touch and mouse events * @param {Event} ev @@ -249,6 +291,7 @@ export default class Implosion { function onDown(ev) { let event = normalizeEvent(ev); if (!pointerActive && !paused) { + callStartCallback(); pointerActive = true; decelerating = false; pointerId = event.id; @@ -421,6 +464,7 @@ export default class Implosion { if (Math.abs(decVelX) > 1 || Math.abs(decVelY) > 1 || !diff.inBounds) { decelerating = true; + callStartDeceleratingCallback(); requestAnimFrame(stepDecelAnim); } } @@ -485,6 +529,7 @@ export default class Implosion { requestAnimFrame(stepDecelAnim); } else { decelerating = false; + callEndDeceleratingCallback(); } } } From 9478ebe7b57a34b9b3078f11f1a5f8e1b86dbc26 Mon Sep 17 00:00:00 2001 From: romellem Date: Thu, 2 Apr 2020 11:22:16 -0500 Subject: [PATCH 2/3] Updates docs with new API --- README.md | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 73a4941..d9f424f 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ import Implosion from 'implosion'; let myImplosion = new Implosion({ source: myNode, - update(x, y) { + onUpdate(x, y, previousX, previousY) { // whatever you want to do with the values } }); @@ -50,10 +50,28 @@ Implosion will register itself as an AMD module if it's available. Element reference or query string for the target on which to listen for movement. - update (required) + onStart function(x, y) - - This function will be called with the updated x and y values. + This function will be called when starting to drag the element + + + onUpdate (required) + function(x, y) + - + This function will be called with the updated x and y values. This configuration was renamed from `update`, and `update` has been deprecated, to be removed in the next major version. + + + onStartDecelerating + function(x, y) + - + This function will be called when the deceleration begun (and drag has ended) + + + onEndDecelerating + function(x, y) + - + This function will be called when the deceleration has ended multiplier @@ -70,7 +88,7 @@ Implosion will register itself as an AMD module if it's available. initialValues [Number, Number] - [0, 0] + [0, 0] Array of initial x and y values. From 1c4bf8a83f54e31a09dbbb86d21ac60294f5275b Mon Sep 17 00:00:00 2001 From: romellem Date: Thu, 2 Apr 2020 11:23:56 -0500 Subject: [PATCH 3/3] Call end decelerating when there is no deceleration This is done in order to provide a consistent end callback --- src/implosion.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/implosion.js b/src/implosion.js index c8e10e1..ac09f3b 100644 --- a/src/implosion.js +++ b/src/implosion.js @@ -462,10 +462,12 @@ export default class Implosion { let diff = checkBounds(); + callStartDeceleratingCallback(); if (Math.abs(decVelX) > 1 || Math.abs(decVelY) > 1 || !diff.inBounds) { decelerating = true; - callStartDeceleratingCallback(); requestAnimFrame(stepDecelAnim); + } else { + callEndDeceleratingCallback(); } }