Merge pull request #14 from romellem/feature/adds-more-lifecycle-events

Feature - adds more lifecycle events

Author: romellem

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.
 			<td>Element reference or query string for the target on which to listen for movement.</td>
 		</tr>
 		<tr>
-			<th scope="row" align="left"><code>update</code> (required)</th>
+			<th scope="row" align="left"><code>onStart</code></th>
 			<td><code>function(x, y)</code></td>
 			<td>-</td>
-			<td>This function will be called with the updated <var>x</var> and <var>y</var> values.</td>
+			<td>This function will be called when starting to drag the element</td>
+		</tr>
+		<tr>
+			<th scope="row" align="left"><code>onUpdate</code> (required)</th>
+			<td><code>function(x, y)</code></td>
+			<td>-</td>
+			<td>This function will be called with the updated <var>x</var> and <var>y</var> values. This configuration was renamed from `update`, and `update` has been deprecated, to be removed in the next major version.</td>
+		</tr>
+		<tr>
+			<th scope="row" align="left"><code>onStartDecelerating</code></th>
+			<td><code>function(x, y)</code></td>
+			<td>-</td>
+			<td>This function will be called when the deceleration begun (and drag has ended)</td>
+		</tr>
+		<tr>
+			<th scope="row" align="left"><code>onEndDecelerating</code></th>
+			<td><code>function(x, y)</code></td>
+			<td>-</td>
+			<td>This function will be called when the deceleration has ended</td>
 		</tr>
 		<tr>
 			<th scope="row" align="left"><code>multiplier</code></th>
@@ -70,7 +88,7 @@ Implosion will register itself as an AMD module if it's available.
 		<tr>
 			<th scope="row" align="left"><code>initialValues</code></th>
 			<td><code>[Number, Number]</code></td>
-			<td><code>[0, 0]</code></td>
+			<td><code>[0, 0]</code></td>
 			<td>Array of initial <var>x</var> and <var>y</var> values.</td>
 		</tr>
 		<tr>

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