@daybrush/drag - npm Package Compare versions

Comparing version 0.13.1 to 0.14.0-rc

declaration/Dragger.d.ts

 import { DragOptions, Client, OnDrag } from "./types";
 declare class Dragger {
-    private el;
     options: DragOptions;
@@ -18,3 +17,4 @@ private flag;
     private customDist;
-    constructor(el: Element, options?: DragOptions);
+    private targets;
+    constructor(targets: Array<Element | Window> | Element | Window, options?: DragOptions);
     isDragging(): boolean;
@@ -21,0 +21,0 @@ isFlag(): boolean;

declaration/types.d.ts

@@ -56,2 +56,3 @@ import { IObject } from "@daybrush/utils";
     pinchThreshold?: number;
+    pinchOutside?: boolean;
     dragstart?: (options: OnDragStart) => any;
@@ -58,0 +59,0 @@ drag?: (options: OnDrag) => any;

dist/drag.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.13.1
+version: 0.14.0-rc
 */
@@ -137,3 +137,3 @@ 'use strict';
    */
-  function Dragger(el, options) {
+  function Dragger(targets, options) {
     var _this = this;
@@ -145,3 +145,2 @@
 
-    this.el = el;
     this.options = {};
@@ -161,2 +160,3 @@ this.flag = false;
     this.customDist = [0, 0];
+    this.targets = [];
     /**
@@ -171,2 +171,17 @@ * @method
 
+      var _a = _this.options,
+          container = _a.container,
+          pinchOutside = _a.pinchOutside,
+          dragstart = _a.dragstart,
+          preventRightClick = _a.preventRightClick;
+      var isTouch = _this.isTouch;
+
+      if (!_this.flag && isTouch && pinchOutside) {
+        utils.addEvent(container, "touchstart", _this.onDragStart);
+      }
+
+      if (_this.flag && isTouch && pinchOutside) {
+        utils.removeEvent(container, "touchstart", _this.onDragStart);
+      }
+
       if (isMultiTouch(e)) {
@@ -195,6 +210,2 @@ if (!_this.flag && e.touches.length !== e.changedTouches.length) {
       var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
-      var _a = _this.options,
-          dragstart = _a.dragstart,
-          preventRightClick = _a.preventRightClick,
-          preventDefault = _a.preventDefault;
 
@@ -210,3 +221,3 @@ if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign({
 
-      _this.flag && preventDefault && e.preventDefault();
+      _this.flag && 1 && e.preventDefault();
     };
@@ -243,2 +254,11 @@
 
+      var _a = _this.options,
+          dragend = _a.dragend,
+          pinchOutside = _a.pinchOutside,
+          container = _a.container;
+
+      if (_this.isTouch && pinchOutside) {
+        utils.removeEvent(container, "touchstart", _this.onDragStart);
+      }
+
       if (_this.pinchFlag) {
@@ -249,3 +269,2 @@ _this.onPinchEnd(e);
       _this.flag = false;
-      var dragend = _this.options.dragend;
       var prevClients = _this.prevClients;
@@ -263,4 +282,5 @@ var startClients = _this.startClients;
 
+    var elements = [].slice.call(targets);
     this.options = __assign({
-      container: el,
+      container: elements.length > 1 ? window : elements[0],
       preventRightClick: true,
@@ -277,5 +297,8 @@ preventDefault: true,
     this.customDist = [0, 0];
+    this.targets = elements;
 
     if (this.isMouse) {
-      utils.addEvent(el, "mousedown", this.onDragStart);
+      elements.forEach(function (el) {
+        utils.addEvent(el, "mousedown", _this.onDragStart);
+      });
       utils.addEvent(container, "mousemove", this.onDrag);
@@ -286,9 +309,11 @@ utils.addEvent(container, "mouseup", this.onDragEnd);
     if (this.isTouch) {
-      var passive = {
+      var passive_1 = {
         passive: false
       };
-      utils.addEvent(el, "touchstart", this.onDragStart, passive);
-      utils.addEvent(container, "touchmove", this.onDrag, passive);
-      utils.addEvent(container, "touchend", this.onDragEnd, passive);
-      utils.addEvent(container, "touchcancel", this.onDragEnd, passive);
+      elements.forEach(function (el) {
+        utils.addEvent(el, "touchstart", _this.onDragStart, passive_1);
+      });
+      utils.addEvent(container, "touchmove", this.onDrag, passive_1);
+      utils.addEvent(container, "touchend", this.onDragEnd, passive_1);
+      utils.addEvent(container, "touchcancel", this.onDragEnd, passive_1);
     }
@@ -475,7 +500,11 @@ }
   __proto.unset = function () {
-    var el = this.el;
+    var _this = this;
+
+    var targets = this.targets;
     var container = this.options.container;
 
     if (this.isMouse) {
-      utils.removeEvent(el, "mousedown", this.onDragStart);
+      targets.forEach(function (target) {
+        utils.removeEvent(target, "mousedown", _this.onDragStart);
+      });
       utils.removeEvent(container, "mousemove", this.onDrag);
@@ -486,3 +515,6 @@ utils.removeEvent(container, "mouseup", this.onDragEnd);
     if (this.isTouch) {
-      utils.removeEvent(el, "touchstart", this.onDragStart);
+      targets.forEach(function (target) {
+        utils.removeEvent(target, "touchstart", _this.onDragStart);
+      });
+      utils.removeEvent(container, "touchstart", this.onDragStart);
       utils.removeEvent(container, "touchmove", this.onDrag);
@@ -489,0 +521,0 @@ utils.removeEvent(container, "touchend", this.onDragEnd);

dist/drag.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.13.1
+version: 0.14.0-rc
 */
@@ -135,3 +135,3 @@ import { removeEvent, addEvent } from '@daybrush/utils';
    */
-  function Dragger(el, options) {
+  function Dragger(targets, options) {
     var _this = this;
@@ -143,3 +143,2 @@
 
-    this.el = el;
     this.options = {};
@@ -159,2 +158,3 @@ this.flag = false;
     this.customDist = [0, 0];
+    this.targets = [];
     /**
@@ -169,2 +169,17 @@ * @method
 
+      var _a = _this.options,
+          container = _a.container,
+          pinchOutside = _a.pinchOutside,
+          dragstart = _a.dragstart,
+          preventRightClick = _a.preventRightClick;
+      var isTouch = _this.isTouch;
+
+      if (!_this.flag && isTouch && pinchOutside) {
+        addEvent(container, "touchstart", _this.onDragStart);
+      }
+
+      if (_this.flag && isTouch && pinchOutside) {
+        removeEvent(container, "touchstart", _this.onDragStart);
+      }
+
       if (isMultiTouch(e)) {
@@ -193,6 +208,2 @@ if (!_this.flag && e.touches.length !== e.changedTouches.length) {
       var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
-      var _a = _this.options,
-          dragstart = _a.dragstart,
-          preventRightClick = _a.preventRightClick,
-          preventDefault = _a.preventDefault;
 
@@ -208,3 +219,3 @@ if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign({
 
-      _this.flag && preventDefault && e.preventDefault();
+      _this.flag && 1 && e.preventDefault();
     };
@@ -241,2 +252,11 @@
 
+      var _a = _this.options,
+          dragend = _a.dragend,
+          pinchOutside = _a.pinchOutside,
+          container = _a.container;
+
+      if (_this.isTouch && pinchOutside) {
+        removeEvent(container, "touchstart", _this.onDragStart);
+      }
+
       if (_this.pinchFlag) {
@@ -247,3 +267,2 @@ _this.onPinchEnd(e);
       _this.flag = false;
-      var dragend = _this.options.dragend;
       var prevClients = _this.prevClients;
@@ -261,4 +280,5 @@ var startClients = _this.startClients;
 
+    var elements = [].slice.call(targets);
     this.options = __assign({
-      container: el,
+      container: elements.length > 1 ? window : elements[0],
       preventRightClick: true,
@@ -275,5 +295,8 @@ preventDefault: true,
     this.customDist = [0, 0];
+    this.targets = elements;
 
     if (this.isMouse) {
-      addEvent(el, "mousedown", this.onDragStart);
+      elements.forEach(function (el) {
+        addEvent(el, "mousedown", _this.onDragStart);
+      });
       addEvent(container, "mousemove", this.onDrag);
@@ -284,9 +307,11 @@ addEvent(container, "mouseup", this.onDragEnd);
     if (this.isTouch) {
-      var passive = {
+      var passive_1 = {
         passive: false
       };
-      addEvent(el, "touchstart", this.onDragStart, passive);
-      addEvent(container, "touchmove", this.onDrag, passive);
-      addEvent(container, "touchend", this.onDragEnd, passive);
-      addEvent(container, "touchcancel", this.onDragEnd, passive);
+      elements.forEach(function (el) {
+        addEvent(el, "touchstart", _this.onDragStart, passive_1);
+      });
+      addEvent(container, "touchmove", this.onDrag, passive_1);
+      addEvent(container, "touchend", this.onDragEnd, passive_1);
+      addEvent(container, "touchcancel", this.onDragEnd, passive_1);
     }
@@ -473,7 +498,11 @@ }
   __proto.unset = function () {
-    var el = this.el;
+    var _this = this;
+
+    var targets = this.targets;
     var container = this.options.container;
 
     if (this.isMouse) {
-      removeEvent(el, "mousedown", this.onDragStart);
+      targets.forEach(function (target) {
+        removeEvent(target, "mousedown", _this.onDragStart);
+      });
       removeEvent(container, "mousemove", this.onDrag);
@@ -484,3 +513,6 @@ removeEvent(container, "mouseup", this.onDragEnd);
     if (this.isTouch) {
-      removeEvent(el, "touchstart", this.onDragStart);
+      targets.forEach(function (target) {
+        removeEvent(target, "touchstart", _this.onDragStart);
+      });
+      removeEvent(container, "touchstart", this.onDragStart);
       removeEvent(container, "touchmove", this.onDrag);
@@ -487,0 +519,0 @@ removeEvent(container, "touchend", this.onDragEnd);

dist/drag.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.13.1
+version: 0.14.0-rc
 */
@@ -135,3 +135,3 @@ (function (global, factory) {
     repository: https://github.com/daybrush/utils
-    @version 0.10.0
+    @version 0.10.3
     */
@@ -185,3 +185,3 @@ /**
        */
-      function Dragger(el, options) {
+      function Dragger(targets, options) {
         var _this = this;
@@ -193,3 +193,2 @@
 
-        this.el = el;
         this.options = {};
@@ -209,2 +208,3 @@ this.flag = false;
         this.customDist = [0, 0];
+        this.targets = [];
         /**
@@ -219,2 +219,17 @@ * @method
 
+          var _a = _this.options,
+              container = _a.container,
+              pinchOutside = _a.pinchOutside,
+              dragstart = _a.dragstart,
+              preventRightClick = _a.preventRightClick;
+          var isTouch = _this.isTouch;
+
+          if (!_this.flag && isTouch && pinchOutside) {
+            addEvent(container, "touchstart", _this.onDragStart);
+          }
+
+          if (_this.flag && isTouch && pinchOutside) {
+            removeEvent(container, "touchstart", _this.onDragStart);
+          }
+
           if (isMultiTouch(e)) {
@@ -243,6 +258,2 @@ if (!_this.flag && e.touches.length !== e.changedTouches.length) {
           var position = getPosition(clients[0], _this.prevClients[0], _this.startClients[0]);
-          var _a = _this.options,
-              dragstart = _a.dragstart,
-              preventRightClick = _a.preventRightClick,
-              preventDefault = _a.preventDefault;
 
@@ -258,3 +269,3 @@ if (preventRightClick && e.which === 3 || (dragstart && dragstart(__assign({
 
-          _this.flag && preventDefault && e.preventDefault();
+          _this.flag && 1 && e.preventDefault();
         };
@@ -291,2 +302,11 @@
 
+          var _a = _this.options,
+              dragend = _a.dragend,
+              pinchOutside = _a.pinchOutside,
+              container = _a.container;
+
+          if (_this.isTouch && pinchOutside) {
+            removeEvent(container, "touchstart", _this.onDragStart);
+          }
+
           if (_this.pinchFlag) {
@@ -297,3 +317,2 @@ _this.onPinchEnd(e);
           _this.flag = false;
-          var dragend = _this.options.dragend;
           var prevClients = _this.prevClients;
@@ -311,4 +330,5 @@ var startClients = _this.startClients;
 
+        var elements = [].slice.call(targets);
         this.options = __assign({
-          container: el,
+          container: elements.length > 1 ? window : elements[0],
           preventRightClick: true,
@@ -325,5 +345,8 @@ preventDefault: true,
         this.customDist = [0, 0];
+        this.targets = elements;
 
         if (this.isMouse) {
-          addEvent(el, "mousedown", this.onDragStart);
+          elements.forEach(function (el) {
+            addEvent(el, "mousedown", _this.onDragStart);
+          });
           addEvent(container, "mousemove", this.onDrag);
@@ -334,9 +357,11 @@ addEvent(container, "mouseup", this.onDragEnd);
         if (this.isTouch) {
-          var passive = {
+          var passive_1 = {
             passive: false
           };
-          addEvent(el, "touchstart", this.onDragStart, passive);
-          addEvent(container, "touchmove", this.onDrag, passive);
-          addEvent(container, "touchend", this.onDragEnd, passive);
-          addEvent(container, "touchcancel", this.onDragEnd, passive);
+          elements.forEach(function (el) {
+            addEvent(el, "touchstart", _this.onDragStart, passive_1);
+          });
+          addEvent(container, "touchmove", this.onDrag, passive_1);
+          addEvent(container, "touchend", this.onDragEnd, passive_1);
+          addEvent(container, "touchcancel", this.onDragEnd, passive_1);
         }
@@ -523,7 +548,11 @@ }
       __proto.unset = function () {
-        var el = this.el;
+        var _this = this;
+
+        var targets = this.targets;
         var container = this.options.container;
 
         if (this.isMouse) {
-          removeEvent(el, "mousedown", this.onDragStart);
+          targets.forEach(function (target) {
+            removeEvent(target, "mousedown", _this.onDragStart);
+          });
           removeEvent(container, "mousemove", this.onDrag);
@@ -534,3 +563,6 @@ removeEvent(container, "mouseup", this.onDragEnd);
         if (this.isTouch) {
-          removeEvent(el, "touchstart", this.onDragStart);
+          targets.forEach(function (target) {
+            removeEvent(target, "touchstart", _this.onDragStart);
+          });
+          removeEvent(container, "touchstart", this.onDragStart);
           removeEvent(container, "touchmove", this.onDrag);
@@ -537,0 +569,0 @@ removeEvent(container, "touchend", this.onDragEnd);

dist/drag.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.13.1
+version: 0.14.0-rc
 */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Dragger=i()}(this,function(){"use strict";var u=function(){return(u=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var e in i=arguments[n])Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e]);return t}).apply(this,arguments)};function f(t,i,n,s){var e=d(t),a=d(i),r=d(s);return p(h(s[0],o(e,r)),h(s[0],o(a,r)),n[0])}function c(t){return t.touches?g(t.touches):[e(t)]}function p(t,i,n){var s=t.clientX,e=t.clientY;return{clientX:s,clientY:e,deltaX:s-i.clientX,deltaY:e-i.clientY,distX:s-n.clientX,distY:e-n.clientY}}function l(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function v(t,n,s){return t.map(function(t,i){return p(t,n[i],s[i])})}function g(t){for(var i=Math.min(t.length,2),n=[],s=0;s<i;++s)n.push(e(t[s]));return n}function e(t){return{clientX:t.clientX,clientY:t.clientY}}function d(t){return 1===t.length?t[0]:{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function h(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function o(t,i){return{clientX:t.clientX-i.clientX,clientY:t.clientY-i.clientY}}function r(t,i,n,s){t.addEventListener(i,n,s)}function n(t,i,n){t.removeEventListener(i,n)}var s=function(){function t(t,i){var h=this;void 0===i&&(i={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.onDragStart=function(t){if(h.flag||!1!==t.cancelable){if(function(t){return t.touches&&2<=t.touches.length}(t)){if(!h.flag&&t.touches.length!==t.changedTouches.length)return;h.pinchFlag||h.onPinchStart(t)}if(!h.flag){var i=h.startClients[0]?h.startClients:c(t);h.customDist=[0,0],h.flag=!0,h.isDrag=!1,h.startClients=i,h.prevClients=i,h.datas={};var n=p(i[h.movement=0],h.prevClients[0],h.startClients[0]),s=h.options,e=s.dragstart,a=s.preventRightClick,r=s.preventDefault;(a&&3===t.which||!1===(e&&e(u({datas:h.datas,inputEvent:t},n))))&&(h.startClients=[],h.prevClients=[],h.flag=!1),h.flag&&r&&t.preventDefault()}}},this.onDrag=function(t,i){if(h.flag){var n=c(t);h.pinchFlag&&h.onPinch(t,n);var s=h.move([0,0],t,n);if(s&&(s.deltaX||s.deltaY)){var e=h.options.drag;e&&e(u({},s,{isScroll:!!i,inputEvent:t}))}}},this.onDragEnd=function(t){if(h.flag){h.pinchFlag&&h.onPinchEnd(t),h.flag=!1;var i=h.options.dragend,n=h.prevClients,s=h.startClients,e=h.pinchFlag?f(n,n,s,h.startPinchClients):p(n[0],n[0],s[0]);h.startClients=[],h.prevClients=[],i&&i(u({datas:h.datas,isDrag:h.isDrag,inputEvent:t},e))}},this.options=u({container:t,preventRightClick:!0,preventDefault:!0,pinchThreshold:0,events:["touch","mouse"]},i);var n=this.options,s=n.container,e=n.events;if(this.isTouch=-1<e.indexOf("touch"),this.isMouse=-1<e.indexOf("mouse"),this.customDist=[0,0],this.isMouse&&(r(t,"mousedown",this.onDragStart),r(s,"mousemove",this.onDrag),r(s,"mouseup",this.onDragEnd)),this.isTouch){var a={passive:!1};r(t,"touchstart",this.onDragStart,a),r(s,"touchmove",this.onDrag,a),r(s,"touchend",this.onDragEnd,a),r(s,"touchcancel",this.onDragEnd,a)}}var i=t.prototype;return i.isDragging=function(){return this.isDrag},i.isFlag=function(){return this.flag},i.isPinching=function(){return this.isPinch},i.scrollBy=function(i,n,t,s){void 0===s&&(s=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),s&&this.onDrag(t,!0))},i.move=function(t,i,n){var s=t[0],e=t[1];void 0===n&&(n=this.prevClients);var a=this.customDist,r=this.prevClients,h=this.startClients,c=this.pinchFlag?f(n,r,h,this.startPinchClients):p(n[0],r[0],h[0]);a[0]+=s,a[1]+=e,c.deltaX+=s,c.deltaY+=e;var o=c.deltaX,l=c.deltaY;return c.distX+=a[0],c.distY+=a[1],this.movement+=Math.sqrt(o*o+l*l),this.prevClients=n,this.isDrag=!0,u({datas:this.datas},c,{isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:i})},i.onPinchStart=function(t){var i,n,s=this.options,e=s.pinchstart,a=s.pinchThreshold;if(!(this.isDrag&&this.movement>a)){var r=g(t.changedTouches);if(this.pinchFlag=!0,(i=this.startClients).push.apply(i,r),(n=this.prevClients).push.apply(n,r),this.startDistance=l(this.prevClients),this.startPinchClients=this.prevClients.slice(),e){var h=this.prevClients,c=d(h),o=p(c,c,c);e(u({datas:this.datas,touches:v(h,h,h)},o,{inputEvent:t}))}}},i.onPinch=function(t,i){if(this.flag&&this.pinchFlag&&!(i.length<2)){this.isPinch=!0;var n=this.options.pinch;if(n){var s=this.prevClients,e=this.startClients,a=p(d(i),d(s),d(e)),r=l(i);n(u({datas:this.datas,touches:v(i,s,e),scale:r/this.startDistance,distance:r},a,{inputEvent:t}))}}},i.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var i=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var s=this.prevClients,e=this.startClients,a=p(d(s),d(s),d(e));n(u({datas:this.datas,isPinch:i,touches:v(s,s,e)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},i.unset=function(){var t=this.el,i=this.options.container;this.isMouse&&(n(t,"mousedown",this.onDragStart),n(i,"mousemove",this.onDrag),n(i,"mouseup",this.onDragEnd)),this.isTouch&&(n(t,"touchstart",this.onDragStart),n(i,"touchmove",this.onDrag),n(i,"touchend",this.onDragEnd),n(i,"touchcancel",this.onDragEnd))},t}();var t={default:s,drag:function(t,i){return new s(t,i)}};for(var i in t)s[i]=t[i];return s});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Dragger=i()}(this,function(){"use strict";var u=function(){return(u=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var e in i=arguments[n])Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e]);return t}).apply(this,arguments)};function f(t,i,n,s){var e=D(t),a=D(i),r=D(s);return g(h(s[0],c(e,r)),h(s[0],c(a,r)),n[0])}function l(t){return t.touches?d(t.touches):[e(t)]}function g(t,i,n){var s=t.clientX,e=t.clientY;return{clientX:s,clientY:e,deltaX:s-i.clientX,deltaY:e-i.clientY,distX:s-n.clientX,distY:e-n.clientY}}function p(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function v(t,n,s){return t.map(function(t,i){return g(t,n[i],s[i])})}function d(t){for(var i=Math.min(t.length,2),n=[],s=0;s<i;++s)n.push(e(t[s]));return n}function e(t){return{clientX:t.clientX,clientY:t.clientY}}function D(t){return 1===t.length?t[0]:{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function h(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function c(t,i){return{clientX:t.clientX-i.clientX,clientY:t.clientY-i.clientY}}function C(t,i,n,s){t.addEventListener(i,n,s)}function m(t,i,n){t.removeEventListener(i,n)}var n=function(){function t(t,i){var o=this;void 0===i&&(i={}),this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.targets=[],this.onDragStart=function(t){if(o.flag||!1!==t.cancelable){var i=o.options,n=i.container,s=i.pinchOutside,e=i.dragstart,a=i.preventRightClick,r=o.isTouch;if(!o.flag&&r&&s&&C(n,"touchstart",o.onDragStart),o.flag&&r&&s&&m(n,"touchstart",o.onDragStart),function(t){return t.touches&&2<=t.touches.length}(t)){if(!o.flag&&t.touches.length!==t.changedTouches.length)return;o.pinchFlag||o.onPinchStart(t)}if(!o.flag){var h=o.startClients[0]?o.startClients:l(t);o.customDist=[0,0],o.flag=!0,o.isDrag=!1,o.startClients=h,o.prevClients=h,o.datas={};var c=g(h[o.movement=0],o.prevClients[0],o.startClients[0]);(a&&3===t.which||!1===(e&&e(u({datas:o.datas,inputEvent:t},c))))&&(o.startClients=[],o.prevClients=[],o.flag=!1),o.flag&&t.preventDefault()}}},this.onDrag=function(t,i){if(o.flag){var n=l(t);o.pinchFlag&&o.onPinch(t,n);var s=o.move([0,0],t,n);if(s&&(s.deltaX||s.deltaY)){var e=o.options.drag;e&&e(u({},s,{isScroll:!!i,inputEvent:t}))}}},this.onDragEnd=function(t){if(o.flag){var i=o.options,n=i.dragend,s=i.pinchOutside,e=i.container;o.isTouch&&s&&m(e,"touchstart",o.onDragStart),o.pinchFlag&&o.onPinchEnd(t),o.flag=!1;var a=o.prevClients,r=o.startClients,h=o.pinchFlag?f(a,a,r,o.startPinchClients):g(a[0],a[0],r[0]);o.startClients=[],o.prevClients=[],n&&n(u({datas:o.datas,isDrag:o.isDrag,inputEvent:t},h))}};var n=[].slice.call(t);this.options=u({container:1<n.length?window:n[0],preventRightClick:!0,preventDefault:!0,pinchThreshold:0,events:["touch","mouse"]},i);var s=this.options,e=s.container,a=s.events;if(this.isTouch=-1<a.indexOf("touch"),this.isMouse=-1<a.indexOf("mouse"),this.customDist=[0,0],this.targets=n,this.isMouse&&(n.forEach(function(t){C(t,"mousedown",o.onDragStart)}),C(e,"mousemove",this.onDrag),C(e,"mouseup",this.onDragEnd)),this.isTouch){var r={passive:!1};n.forEach(function(t){C(t,"touchstart",o.onDragStart,r)}),C(e,"touchmove",this.onDrag,r),C(e,"touchend",this.onDragEnd,r),C(e,"touchcancel",this.onDragEnd,r)}}var i=t.prototype;return i.isDragging=function(){return this.isDrag},i.isFlag=function(){return this.flag},i.isPinching=function(){return this.isPinch},i.scrollBy=function(i,n,t,s){void 0===s&&(s=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),s&&this.onDrag(t,!0))},i.move=function(t,i,n){var s=t[0],e=t[1];void 0===n&&(n=this.prevClients);var a=this.customDist,r=this.prevClients,h=this.startClients,c=this.pinchFlag?f(n,r,h,this.startPinchClients):g(n[0],r[0],h[0]);a[0]+=s,a[1]+=e,c.deltaX+=s,c.deltaY+=e;var o=c.deltaX,l=c.deltaY;return c.distX+=a[0],c.distY+=a[1],this.movement+=Math.sqrt(o*o+l*l),this.prevClients=n,this.isDrag=!0,u({datas:this.datas},c,{isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:i})},i.onPinchStart=function(t){var i,n,s=this.options,e=s.pinchstart,a=s.pinchThreshold;if(!(this.isDrag&&this.movement>a)){var r=d(t.changedTouches);if(this.pinchFlag=!0,(i=this.startClients).push.apply(i,r),(n=this.prevClients).push.apply(n,r),this.startDistance=p(this.prevClients),this.startPinchClients=this.prevClients.slice(),e){var h=this.prevClients,c=D(h),o=g(c,c,c);e(u({datas:this.datas,touches:v(h,h,h)},o,{inputEvent:t}))}}},i.onPinch=function(t,i){if(this.flag&&this.pinchFlag&&!(i.length<2)){this.isPinch=!0;var n=this.options.pinch;if(n){var s=this.prevClients,e=this.startClients,a=g(D(i),D(s),D(e)),r=p(i);n(u({datas:this.datas,touches:v(i,s,e),scale:r/this.startDistance,distance:r},a,{inputEvent:t}))}}},i.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var i=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var s=this.prevClients,e=this.startClients,a=g(D(s),D(s),D(e));n(u({datas:this.datas,isPinch:i,touches:v(s,s,e)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},i.unset=function(){var i=this,t=this.targets,n=this.options.container;this.isMouse&&(t.forEach(function(t){m(t,"mousedown",i.onDragStart)}),m(n,"mousemove",this.onDrag),m(n,"mouseup",this.onDragEnd)),this.isTouch&&(t.forEach(function(t){m(t,"touchstart",i.onDragStart)}),m(n,"touchstart",this.onDragStart),m(n,"touchmove",this.onDrag),m(n,"touchend",this.onDragEnd),m(n,"touchcancel",this.onDragEnd))},t}();var t={default:n,drag:function(t,i){return new n(t,i)}};for(var i in t)n[i]=t[i];return n});
 //# sourceMappingURL=drag.min.js.map

package.json

 {
   "name": "@daybrush/drag",
-  "version": "0.13.1",
+  "version": "0.14.0-rc",
   "description": "You can set up drag events in any browser.",
@@ -46,4 +46,4 @@ "main": "./dist/drag.cjs.js",
   "dependencies": {
-    "@daybrush/utils": "^0.10.0"
+    "@daybrush/utils": "^0.10.3"
   }
 }

src/Dragger.ts

@@ -26,8 +26,10 @@ import { DragOptions, Client, Position, OnDrag } from "./types";
     private customDist = [0, 0];
+    private targets: Array<Element | Window> = [];
     /**
      *
      */
-    constructor(private el: Element, options: DragOptions = {}) {
+    constructor(targets: Array<Element | Window> | Element | Window, options: DragOptions = {}) {
+        const elements = [].slice.call(targets) as Array<Element | Window> ;
         this.options = {
-            container: el,
+            container: elements.length > 1 ? window : elements[0],
             preventRightClick: true,
@@ -45,5 +47,8 @@ preventDefault: true,
         this.customDist = [0, 0];
+        this.targets = elements;
 
         if (this.isMouse) {
-            addEvent(el, "mousedown", this.onDragStart);
+            elements.forEach(el => {
+                addEvent(el, "mousedown", this.onDragStart);
+            });
             addEvent(container!, "mousemove", this.onDrag);
@@ -56,3 +61,5 @@ addEvent(container!, "mouseup", this.onDragEnd);
             };
-            addEvent(el, "touchstart", this.onDragStart, passive);
+            elements.forEach(el => {
+                addEvent(el, "touchstart", this.onDragStart, passive);
+            });
             addEvent(container!, "touchmove", this.onDrag, passive);
@@ -105,2 +112,11 @@ addEvent(container!, "touchend", this.onDragEnd, passive);
         }
+        const { container, pinchOutside, dragstart, preventRightClick } = this.options;
+        const isTouch = this.isTouch;
+
+        if (!this.flag && isTouch && pinchOutside) {
+            addEvent(container!, "touchstart", this.onDragStart);
+        }
+        if (this.flag && isTouch && pinchOutside) {
+            removeEvent(container!, "touchstart", this.onDragStart);
+        }
         if (isMultiTouch(e)) {
@@ -129,8 +145,2 @@ if (!this.flag && (e.touches.length !== e.changedTouches.length)) {
 
-        const {
-            dragstart,
-            preventRightClick,
-            preventDefault,
-        } = this.options;
-
         if (
@@ -147,3 +157,3 @@ (preventRightClick && e.which === 3)
         }
-        this.flag && preventDefault && e.preventDefault();
+        this.flag && 1 && e.preventDefault();
     }
@@ -210,2 +220,6 @@ public onDrag = (e: any, isScroll?: boolean) => {
         }
+        const { dragend, pinchOutside, container } = this.options;
+        if (this.isTouch && pinchOutside) {
+            removeEvent(container!, "touchstart", this.onDragStart);
+        }
         if (this.pinchFlag) {
@@ -216,3 +230,2 @@ this.onPinchEnd(e);
 
-        const dragend = this.options.dragend;
         const prevClients = this.prevClients;
@@ -326,15 +339,20 @@ const startClients = this.startClients;
     public unset() {
-        const el = this.el;
+        const targets = this.targets;
         const container = this.options.container!;
 
         if (this.isMouse) {
-            removeEvent(el, "mousedown", this.onDragStart);
-            removeEvent(container as any, "mousemove", this.onDrag);
-            removeEvent(container as any, "mouseup", this.onDragEnd);
+            targets.forEach(target => {
+                removeEvent(target, "mousedown", this.onDragStart);
+            });
+            removeEvent(container, "mousemove", this.onDrag);
+            removeEvent(container, "mouseup", this.onDragEnd);
         }
         if (this.isTouch) {
-            removeEvent(el, "touchstart", this.onDragStart);
-            removeEvent(container as any, "touchmove", this.onDrag);
-            removeEvent(container as any, "touchend", this.onDragEnd);
-            removeEvent(container as any, "touchcancel", this.onDragEnd);
+            targets.forEach(target => {
+                removeEvent(target, "touchstart", this.onDragStart);
+            });
+            removeEvent(container, "touchstart", this.onDragStart);
+            removeEvent(container, "touchmove", this.onDrag);
+            removeEvent(container, "touchend", this.onDragEnd);
+            removeEvent(container, "touchcancel", this.onDragEnd);
         }
@@ -341,0 +359,0 @@ }

src/types.ts

@@ -110,2 +110,3 @@ import { IObject } from "@daybrush/utils";
     pinchThreshold?: number;
+    pinchOutside?: boolean;
     dragstart?: (options: OnDragStart) => any;
@@ -112,0 +113,0 @@ drag?: (options: OnDrag) => any;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186972

increased by6.6%

Lines of code

2242

increased by4.67%

Dependency changes

• Updated@daybrush/utils@^0.10.3