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. diff --git a/src/implosion.js b/src/implosion.js index fdf2ad9..ac09f3b 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; @@ -419,9 +462,12 @@ export default class Implosion { let diff = checkBounds(); + callStartDeceleratingCallback(); if (Math.abs(decVelX) > 1 || Math.abs(decVelY) > 1 || !diff.inBounds) { decelerating = true; requestAnimFrame(stepDecelAnim); + } else { + callEndDeceleratingCallback(); } } @@ -485,6 +531,7 @@ export default class Implosion { requestAnimFrame(stepDecelAnim); } else { decelerating = false; + callEndDeceleratingCallback(); } } }