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();
}
}
}