move-priority - npm Package Compare versions

Comparing version 1.0.1-next.2 to 1.0.1-next.3

dist/move-priority.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.movePriority=e():t.movePriority=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=0)}([function(t,e,n){"use strict";function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}n.r(e);var r={mutationWhiteList:[],nativeStartMove:function(){},nativeMove:function(){},nativeStopMove:function(){},onStartMove:function(){},onMove:function(){},onCancelMove:function(){},onStopMove:function(){}},a=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),"string"==typeof e&&(e=document.querySelector(e)),this.el=e,this.options=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(n,!0).forEach((function(e){o(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(n).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},r,{},n),this.whiteListed=this._nodeList2Array(this.options.mutationWhiteList),this.nativeStartEvent=null,this.startEvent=null,this.screenSize={},this.lastTouch=null,this.mObserver=null,this.detectedMove=!1,this.detectedScroll=!1,this.canMoveTimeout=null,this.moveEventsCount=0,this.canMove=!1,this.isTouch=Boolean("ontouchstart"in window||window.DocumentTouch&&window.DocumentTouch&&document instanceof window.DocumentTouch),this._startMove=this._startMove.bind(this),this._move=this._move.bind(this),this._stopMove=this._stopMove.bind(this),this._detectScroll=this._detectScroll.bind(this),this._cancelMove=this._cancelMove.bind(this),this._measureScreen=this._measureScreen.bind(this),this._measureScreen(),this._initObserver(),this.connectObservation()}var e,n,a;return e=t,(n=[{key:"_nodeList2Array",value:function(t){return Array.prototype.slice.call(t)}},{key:"_initObserver",value:function(){var t=this;this.mObserver=new MutationObserver((function(e){e.forEach((function(e){if(!t.detectedMove&&t.nativeStartEvent&&!t.whiteListed.some((function(t){return e.target===t}))){var n=e.target.getBoundingClientRect(),i=t.nativeStartEvent,o=i.x,s=i.y,r=s>n.y&&s<n.y+n.height,a=o>n.x&&o<n.x+n.width;r&&a&&(t.detectedMove=!0)}}))}))}},{key:"_attachEvents",value:function(){this.el.addEventListener(this.isTouch?"touchstart":"mousedown",this._startMove,!1),this.el.addEventListener("scroll",this._detectScroll,!0),window.addEventListener(this.isTouch?"touchmove":"mousemove",this._move,{passive:!1}),window.addEventListener(this.isTouch?"touchend":"mouseup",this._stopMove,!1),this.el.addEventListener("mouseleave",this._cancelMove,!1),window.addEventListener("resize",this._measureScreen,!1)}},{key:"_detectScroll",value:function(){this.detectedScroll=!0}},{key:"diconnectObservation",value:function(){this.mObserver.disconnect(),this._removeEvents()}},{key:"connectObservation",value:function(){this._attachEvents(),this.mObserver.observe(this.el,{attributes:!0,childList:!0,subtree:!0})}},{key:"_measureScreen",value:function(){this.screenSize={innerWidth:window.innerWidth,innerHeight:window.innerHeight}}},{key:"_removeEvents",value:function(){this.el.removeEventListener(this.isTouch?"touchstart":"mousedown",this._startMove,!1),this.el.removeEventListener("scroll",this._detectScroll),window.removeEventListener(this.isTouch?"touchmove":"mousemove",this._move),window.removeEventListener(this.isTouch?"touchend":"mouseup",this._stopMove,!1),this.el.removeEventListener("mouseleave",this._cancelMove,!1),window.removeEventListener("resize",this._measureScreen,!1)}},{key:"destroy",value:function(){this.diconnectObservation()}},{key:"_extendEvent",value:function(t,e){var n=t.clientX,i=t.clientY,o=t.target;return t.targetTouches&&(n=e&&e.targetTouches[0].clientX||t.targetTouches&&t.targetTouches[0].clientX,i=e&&e.targetTouches[0].clientY||t.targetTouches&&t.targetTouches[0].clientY),{nativeEvent:t,x:n,y:i,timeStamp:Date.now(),target:o}}},{key:"_calculateValues",value:function(t,e){var n=e.x-t.x,i=e.y-t.y;return{delta:{x:n,y:i,xPercentage:Math.abs(100*n/this.screenSize.innerWidth),yPercentage:Math.abs(100*i/this.screenSize.innerHeight)},nativeEvent:e,speed:Math.abs((n+i)/(e.timeStamp-t.timeStamp)),direction:Math.abs(n)>Math.abs(i)?n<0?"left":"right":i<0?"up":"down"}}},{key:"_cancelMove",value:function(t){var e=this.startEvent||this.nativeStartEvent;this.canMove&&e&&(this._resetValues(),this.nativeStartEvent=null,this.startEvent=null,this.options.onCancelMove({nativeEvent:t}))}},{key:"_startMove",value:function(t){this.nativeStartEvent=this._extendEvent(t),this.lastTouch=t,this.options.nativeStartMove(this.nativeStartEvent)}},{key:"_move",value:function(t){var e=this.startEvent||this.nativeStartEvent;if(e){this.lastTouch=t;var n=this._calculateValues(e,this._extendEvent(t));if(this.options.nativeMove(n),this.canMove)return this.canMoveTimeout&&clearTimeout(this.canMoveTimeout),this.options.onMove(n);this._isAllowedToMove(t)}}},{key:"_stopMove",value:function(t){var e=this.startEvent||this.nativeStartEvent;if(e){var n=this._calculateValues(e,this._extendEvent(t,this.lastTouch));this.nativeStartEvent=null,this.startEvent=null,this.options.nativeStopMove(n),this.canMove&&this.options.onStopMove(n),this._resetValues()}}},{key:"_resetValues",value:function(){this.canMove=!1,this.moveEventsCount=0,this.detectedMove=!1,this.detectedScroll=!1}},{key:"_isAllowedToMove",value:function(t){var e=this;if(this.nativeStartEvent&&!this.canMove&&!this.detectedScroll&&!this.detectedMove){this.moveEventsCount++;var n=Date.now()-this.nativeStartEvent.timeStamp>100,i=this.moveEventsCount>2&&this.moveEventsCount<18;this.touch||(i=this.moveEventsCount>2&&this.moveEventsCount<100),n&&i?(this.canMove=!0,this.startEvent=this._extendEvent(t),this.options.onStartMove(this.startEvent)):(clearTimeout(this.canMoveTimeout),this.canMoveTimeout=setTimeout((function(){return e._resetValues()}),60))}}}])&&s(e.prototype,n),a&&s(e,a),t}();e.default=a}])}));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.movePriority=e():t.movePriority=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=0)}([function(t,e,n){"use strict";function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function o(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(n,!0).forEach((function(e){s(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(n).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}n.r(e);var a={preventDefault:!1,mutationWhiteList:[],scrollWhiteList:[],nativeStartMove:function(){},nativeMove:function(){},nativeStopMove:function(){},onStartMove:function(){},onMove:function(){},onCancelMove:function(){},onStopMove:function(){}},c=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),"string"==typeof e&&(e=document.querySelector(e)),this.el=e,this.options=o({},a,{},n),this.mutationWhiteList=this._nodeList2Array(this.options.mutationWhiteList),this.scrollWhiteList=this._nodeList2Array(this.options.scrollWhiteList),this.nativeStartEvent=null,this.nativeMoveEvent=null,this.startEvent=null,this.screenSize={},this.lastTouch=null,this.mObserver=null,this.detectedMove=!1,this.detectedScroll=!1,this.canMoveTimeout=null,this.moveEventsCount=0,this.canMove=!1,this.isTouch=Boolean("ontouchstart"in window||window.DocumentTouch&&window.DocumentTouch&&document instanceof window.DocumentTouch),this._startMove=this._startMove.bind(this),this._move=this._move.bind(this),this._stopMove=this._stopMove.bind(this),this._detectScroll=this._detectScroll.bind(this),this._cancelMove=this._cancelMove.bind(this),this._measureScreen=this._measureScreen.bind(this),this._measureScreen(),this._initObserver(),this.connectObservation()}var e,n,i;return e=t,(n=[{key:"_nodeList2Array",value:function(t){return Array.prototype.slice.call(t)}},{key:"_initObserver",value:function(){var t=this;this.mObserver=new MutationObserver((function(e){e.forEach((function(e){if(!t.detectedMove&&t.nativeStartEvent&&!t.mutationWhiteList.some((function(t){return e.target===t}))){var n=e.target.getBoundingClientRect(),i=t.nativeMoveEvent||t.nativeStartEvent,o=i.x,s=i.y,r=s>n.y&&s<n.y+n.height,a=o>n.x&&o<n.x+n.width;"Moving"!==e.target.innerText&&r&&a&&(t.detectedMove=!0)}}))}))}},{key:"_attachEvents",value:function(){this.el.addEventListener(this.isTouch?"touchstart":"mousedown",this._startMove,!1),this.el.addEventListener("scroll",this._detectScroll,!0),window.addEventListener(this.isTouch?"touchmove":"mousemove",this._move,{passive:!1}),window.addEventListener(this.isTouch?"touchend":"mouseup",this._stopMove,!1),this.el.addEventListener("mouseleave",this._cancelMove,!1),window.addEventListener("resize",this._measureScreen,!1)}},{key:"_detectScroll",value:function(t){this.scrollWhiteList.some((function(e){return t.target===e}))||(this.detectedScroll=!0)}},{key:"diconnectObservation",value:function(){this.mObserver.disconnect(),this._removeEvents()}},{key:"connectObservation",value:function(){this._attachEvents(),this.mObserver.observe(this.el,{attributes:!0,childList:!0,subtree:!0})}},{key:"_measureScreen",value:function(){this.screenSize={innerWidth:window.innerWidth,innerHeight:window.innerHeight}}},{key:"_removeEvents",value:function(){this.el.removeEventListener(this.isTouch?"touchstart":"mousedown",this._startMove,!1),this.el.removeEventListener("scroll",this._detectScroll),window.removeEventListener(this.isTouch?"touchmove":"mousemove",this._move),window.removeEventListener(this.isTouch?"touchend":"mouseup",this._stopMove,!1),this.el.removeEventListener("mouseleave",this._cancelMove,!1),window.removeEventListener("resize",this._measureScreen,!1)}},{key:"destroy",value:function(){this.diconnectObservation()}},{key:"_extendEvent",value:function(t,e){var n=t.clientX,i=t.clientY,o=t.target;return t.targetTouches&&(n=e&&e.targetTouches[0].clientX||t.targetTouches&&t.targetTouches[0].clientX,i=e&&e.targetTouches[0].clientY||t.targetTouches&&t.targetTouches[0].clientY),{nativeEvent:t,x:n,y:i,timeStamp:Date.now(),target:o}}},{key:"_calculateValues",value:function(t,e){var n=e.x-t.x,i=e.y-t.y,s={x:n,y:i,xPercentage:Math.abs(100*n/this.screenSize.innerWidth),yPercentage:Math.abs(100*i/this.screenSize.innerHeight)},r=Math.abs((n+i)/(e.timeStamp-t.timeStamp)),a=Math.abs(n)>Math.abs(i)?n<0?"left":"right":i<0?"up":"down";return o({start:{x:t.x,y:t.y},delta:s},e,{speed:r,direction:a})}},{key:"_cancelMove",value:function(t){var e=this.startEvent||this.nativeStartEvent;this.canMove&&e&&(this._resetValues(),this.options.onCancelMove({nativeEvent:t}))}},{key:"_startMove",value:function(t){this.nativeStartEvent=this._extendEvent(t),this.lastTouch=t,this.options.nativeStartMove(this.nativeStartEvent)}},{key:"_move",value:function(t){this.options.preventDefault&&t.preventDefault(),this.nativeMoveEvent=this._extendEvent(t);var e=this.startEvent||this.nativeStartEvent;if(e){this.lastTouch=t;var n=this._calculateValues(e,this._extendEvent(t));if(this.options.nativeMove(n),this.canMove)return this.canMoveTimeout&&clearTimeout(this.canMoveTimeout),this.options.onMove(n);this._isAllowedToMove(t)}}},{key:"_stopMove",value:function(t){var e=this.startEvent||this.nativeStartEvent;if(e){var n=this._calculateValues(e,this._extendEvent(t,this.lastTouch));this.options.nativeStopMove(n),this.canMove&&this.options.onStopMove(n),this._resetValues()}}},{key:"_resetValues",value:function(){this.nativeMoveEvent=null,this.nativeStartEvent=null,this.startEvent=null,this.detectedMove=!1,this.detectedScroll=!1,this.canMove=!1,this.moveEventsCount=0}},{key:"_isAllowedToMove",value:function(t){var e=this;if(this.nativeStartEvent&&!this.canMove&&!this.detectedScroll&&!this.detectedMove){this.moveEventsCount++;var n=Date.now()-this.nativeStartEvent.timeStamp>60,i=this.moveEventsCount>2&&this.moveEventsCount<18;this.touch||(i=this.moveEventsCount>2&&this.moveEventsCount<100),n&&i?(this.canMove=!0,this.startEvent=this._extendEvent(t),this.options.onStartMove(this.startEvent)):(clearTimeout(this.canMoveTimeout),this.canMoveTimeout=setTimeout((function(){e.canMove=!1,e.moveEventsCount=0}),60))}}}])&&r(e.prototype,n),i&&r(e,i),t}();e.default=c}])}));

move-priority.js

 const defaultOptions = {
+  preventDefault: false,
   mutationWhiteList: [],
+  scrollWhiteList: [],
   nativeStartMove: () => {},
@@ -17,4 +19,6 @@ nativeMove: () => {},
     this.options = { ...defaultOptions, ...options };
-    this.whiteListed = this._nodeList2Array(this.options.mutationWhiteList);
+    this.mutationWhiteList = this._nodeList2Array(this.options.mutationWhiteList);
+    this.scrollWhiteList = this._nodeList2Array(this.options.scrollWhiteList);
     this.nativeStartEvent = null;
+    this.nativeMoveEvent = null;
     this.startEvent = null;
@@ -60,8 +64,9 @@ this.screenSize = {};
         // ignore style changes on the sections -> we change them ourselve during animations
-        if (this.whiteListed.some(el => event.target === el)) return;
+        if (this.mutationWhiteList.some(el => event.target === el)) return;
 
         const rect = event.target.getBoundingClientRect();
-        const { x, y } = this.nativeStartEvent;
+        const { x, y } = this.nativeMoveEvent || this.nativeStartEvent;
         const inY = y > rect.y && y < rect.y + rect.height;
         const inX = x > rect.x && x < rect.x + rect.width;
+        if (event.target.innerText === 'Moving') return;
         if (inY && inX) this.detectedMove = true;
@@ -97,3 +102,4 @@ });
 
-  _detectScroll() {
+  _detectScroll(event) {
+    if (this.scrollWhiteList.some(el => event.target === el)) return;
     this.detectedScroll = true;
@@ -158,3 +164,4 @@ }
     const direction = Math.abs(x) > Math.abs(y) ? x < 0 ? 'left' : 'right' : y < 0 ? 'up' : 'down';
-    return { delta, nativeEvent: nextEvent, speed, direction };
+    const start = { x: firstEvent.x, y: firstEvent.y };
+    return { start, delta, ...nextEvent, speed, direction };
   }
@@ -166,4 +173,2 @@
     this._resetValues();
-    this.nativeStartEvent = null;
-    this.startEvent = null;
     this.options.onCancelMove({ nativeEvent: event });
@@ -179,2 +184,4 @@ }
   _move(event) {
+    if (this.options.preventDefault) event.preventDefault();
+    this.nativeMoveEvent = this._extendEvent(event);
     const firstEvent = this.startEvent || this.nativeStartEvent;
@@ -198,4 +205,2 @@ if (!firstEvent) return;
     );
-    this.nativeStartEvent = null;
-    this.startEvent = null;
     this.options.nativeStopMove(eventComparison);
@@ -207,6 +212,9 @@ if (this.canMove) this.options.onStopMove(eventComparison);
   _resetValues() {
+    this.nativeMoveEvent = null;
+    this.nativeStartEvent = null;
+    this.startEvent = null;
+    this.detectedMove = false;
+    this.detectedScroll = false;
     this.canMove = false;
     this.moveEventsCount = 0;
-    this.detectedMove = false;
-    this.detectedScroll = false;
   }
@@ -217,3 +225,3 @@
     this.moveEventsCount++;
-    const inTime = (Date.now() - this.nativeStartEvent.timeStamp) > 100;
+    const inTime = (Date.now() - this.nativeStartEvent.timeStamp) > 60;
     let calledInRange = this.moveEventsCount > 2 && this.moveEventsCount < 18;
@@ -227,5 +235,8 @@ if (!this.touch) calledInRange = this.moveEventsCount > 2 && this.moveEventsCount < 100;
       clearTimeout(this.canMoveTimeout);
-      this.canMoveTimeout = setTimeout(() => this._resetValues(), 60);
+      this.canMoveTimeout = setTimeout(() => {
+        this.canMove = false;
+        this.moveEventsCount = 0;
+      }, 60);
     }
   }
 }

package.json

 {
   "name": "move-priority",
-  "version": "1.0.1-next.2",
+  "version": "1.0.1-next.3",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/move-priority.js",

No alert changes

Improved metrics

Total package byte prevSize

26581

increased by3.5%

Lines of code

408

increased by2.77%

No dependency changes