@daybrush/drag - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

declaration/types.d.ts

 import { IObject } from "@daybrush/utils";
 export interface DragOptions {
     container?: HTMLElement;
+    events?: Array<"mouse" | "touch">;
     dragstart?: (options: {
         datas: IObject<any>;
+        inputEvent: any;
     }) => any;
@@ -13,6 +15,8 @@ drag?: (options: {
         clientY: number;
+        inputEvent: any;
     }) => any;
     dragend?: (options: {
         datas: IObject<any>;
+        inputEvent: any;
     }) => any;
 }

dist/drag.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.1.1
+version: 0.2.0
 */
@@ -19,3 +19,7 @@ function setDrag(el, options) {
       drag = options.drag,
-      dragend = options.dragend;
+      dragend = options.dragend,
+      _b = options.events,
+      events = _b === void 0 ? ["touch", "mouse"] : _b;
+  var isTouch = events.indexOf("touch") > -1;
+  var isMouse = events.indexOf("touch") > -1;
 
@@ -37,3 +41,4 @@ function getPosition(e) {
     (dragstart && dragstart({
-      datas: datas
+      datas: datas,
+      inputEvent: e
     })) === false && (flag = false);
@@ -57,7 +62,8 @@ flag && e.preventDefault();
       deltaY: clientY - startY,
-      datas: datas
+      datas: datas,
+      inputEvent: e
     });
   }
 
-  function onDragEnd() {
+  function onDragEnd(e) {
     if (!flag) {
@@ -69,15 +75,20 @@ return;
     dragend && dragend({
-      datas: datas
+      datas: datas,
+      inputEvent: e
     });
   }
 
-  el.addEventListener("mousedown", onDragStart);
-  el.addEventListener("touchstart", onDragStart);
-  container.addEventListener("mousemove", onDrag);
-  container.addEventListener("touchmove", onDrag);
-  container.addEventListener("mouseup", onDragEnd);
-  container.addEventListener("mouseleave", onDragEnd);
-  container.addEventListener("touchend", onDragEnd);
+  if (isMouse) {
+    el.addEventListener("mousedown", onDragStart);
+    container.addEventListener("mousemove", onDrag);
+    container.addEventListener("mouseup", onDragEnd); // container.addEventListener("mouseleave", onDragEnd);
+  }
+
+  if (isTouch) {
+    el.addEventListener("touchstart", onDragStart);
+    container.addEventListener("touchmove", onDrag);
+    container.addEventListener("touchend", onDragEnd);
+  }
 }
 
 export { setDrag as drag };

dist/drag.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.1.1
+version: 0.2.0
 */
@@ -25,3 +25,7 @@ (function (global, factory) {
           drag = options.drag,
-          dragend = options.dragend;
+          dragend = options.dragend,
+          _b = options.events,
+          events = _b === void 0 ? ["touch", "mouse"] : _b;
+      var isTouch = events.indexOf("touch") > -1;
+      var isMouse = events.indexOf("touch") > -1;
 
@@ -43,3 +47,4 @@ function getPosition(e) {
         (dragstart && dragstart({
-          datas: datas
+          datas: datas,
+          inputEvent: e
         })) === false && (flag = false);
@@ -63,7 +68,8 @@ flag && e.preventDefault();
           deltaY: clientY - startY,
-          datas: datas
+          datas: datas,
+          inputEvent: e
         });
       }
 
-      function onDragEnd() {
+      function onDragEnd(e) {
         if (!flag) {
@@ -75,13 +81,18 @@ return;
         dragend && dragend({
-          datas: datas
+          datas: datas,
+          inputEvent: e
         });
       }
 
-      el.addEventListener("mousedown", onDragStart);
-      el.addEventListener("touchstart", onDragStart);
-      container.addEventListener("mousemove", onDrag);
-      container.addEventListener("touchmove", onDrag);
-      container.addEventListener("mouseup", onDragEnd);
-      container.addEventListener("mouseleave", onDragEnd);
-      container.addEventListener("touchend", onDragEnd);
+      if (isMouse) {
+        el.addEventListener("mousedown", onDragStart);
+        container.addEventListener("mousemove", onDrag);
+        container.addEventListener("mouseup", onDragEnd); // container.addEventListener("mouseleave", onDragEnd);
+      }
+
+      if (isTouch) {
+        el.addEventListener("touchstart", onDragStart);
+        container.addEventListener("touchmove", onDrag);
+        container.addEventListener("touchend", onDragEnd);
+      }
     }
@@ -88,0 +99,0 @@

dist/drag.min.js

@@ -7,4 +7,4 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.1.1
+version: 0.2.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).utils={})}(this,function(e){"use strict";e.drag=function(e,t){var i=!1,o=0,a=0,s={},n=t.container,d=void 0===n?e:n,u=t.dragstart,r=t.drag,c=t.dragend;function f(e){return e.touches&&e.touches.length?e.touches[0]:e}function v(e){i=!0;var t=f(e),n=t.clientX,d=t.clientY;o=n,a=d,!(s={})===(u&&u({datas:s}))&&(i=!1),i&&e.preventDefault()}function l(e){if(i){var t=f(e),n=t.clientX,d=t.clientY;r&&r({clientX:n,clientY:d,deltaX:n-o,deltaY:d-a,datas:s})}}function h(){i&&(i=!1,c&&c({datas:s}))}e.addEventListener("mousedown",v),e.addEventListener("touchstart",v),d.addEventListener("mousemove",l),d.addEventListener("touchmove",l),d.addEventListener("mouseup",h),d.addEventListener("mouseleave",h),d.addEventListener("touchend",h)}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).utils={})}(this,function(e){"use strict";e.drag=function(e,t){var d=!1,o=0,u=0,s={},n=t.container,i=void 0===n?e:n,a=t.dragstart,c=t.drag,r=t.dragend,f=t.events,v=void 0===f?["touch","mouse"]:f,l=-1<v.indexOf("touch");function h(e){return e.touches&&e.touches.length?e.touches[0]:e}function p(e){d=!0;var t=h(e),n=t.clientX,i=t.clientY;o=n,u=i,!(s={})===(a&&a({datas:s,inputEvent:e}))&&(d=!1),d&&e.preventDefault()}function E(e){if(d){var t=h(e),n=t.clientX,i=t.clientY;c&&c({clientX:n,clientY:i,deltaX:n-o,deltaY:i-u,datas:s,inputEvent:e})}}function m(e){d&&(d=!1,r&&r({datas:s,inputEvent:e}))}-1<v.indexOf("touch")&&(e.addEventListener("mousedown",p),i.addEventListener("mousemove",E),i.addEventListener("mouseup",m)),l&&(e.addEventListener("touchstart",p),i.addEventListener("touchmove",E),i.addEventListener("touchend",m))}});

dist/drag.pkgd.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.1.1
+version: 0.2.0
 */
@@ -25,3 +25,7 @@ (function (global, factory) {
           drag = options.drag,
-          dragend = options.dragend;
+          dragend = options.dragend,
+          _b = options.events,
+          events = _b === void 0 ? ["touch", "mouse"] : _b;
+      var isTouch = events.indexOf("touch") > -1;
+      var isMouse = events.indexOf("touch") > -1;
 
@@ -43,3 +47,4 @@ function getPosition(e) {
         (dragstart && dragstart({
-          datas: datas
+          datas: datas,
+          inputEvent: e
         })) === false && (flag = false);
@@ -63,7 +68,8 @@ flag && e.preventDefault();
           deltaY: clientY - startY,
-          datas: datas
+          datas: datas,
+          inputEvent: e
         });
       }
 
-      function onDragEnd() {
+      function onDragEnd(e) {
         if (!flag) {
@@ -75,13 +81,18 @@ return;
         dragend && dragend({
-          datas: datas
+          datas: datas,
+          inputEvent: e
         });
       }
 
-      el.addEventListener("mousedown", onDragStart);
-      el.addEventListener("touchstart", onDragStart);
-      container.addEventListener("mousemove", onDrag);
-      container.addEventListener("touchmove", onDrag);
-      container.addEventListener("mouseup", onDragEnd);
-      container.addEventListener("mouseleave", onDragEnd);
-      container.addEventListener("touchend", onDragEnd);
+      if (isMouse) {
+        el.addEventListener("mousedown", onDragStart);
+        container.addEventListener("mousemove", onDrag);
+        container.addEventListener("mouseup", onDragEnd); // container.addEventListener("mouseleave", onDragEnd);
+      }
+
+      if (isTouch) {
+        el.addEventListener("touchstart", onDragStart);
+        container.addEventListener("touchmove", onDrag);
+        container.addEventListener("touchend", onDragEnd);
+      }
     }
@@ -88,0 +99,0 @@

dist/drag.pkgd.min.js

@@ -7,4 +7,4 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.1.1
+version: 0.2.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).utils={})}(this,function(e){"use strict";e.drag=function(e,t){var i=!1,o=0,a=0,s={},n=t.container,d=void 0===n?e:n,u=t.dragstart,r=t.drag,c=t.dragend;function f(e){return e.touches&&e.touches.length?e.touches[0]:e}function v(e){i=!0;var t=f(e),n=t.clientX,d=t.clientY;o=n,a=d,!(s={})===(u&&u({datas:s}))&&(i=!1),i&&e.preventDefault()}function l(e){if(i){var t=f(e),n=t.clientX,d=t.clientY;r&&r({clientX:n,clientY:d,deltaX:n-o,deltaY:d-a,datas:s})}}function h(){i&&(i=!1,c&&c({datas:s}))}e.addEventListener("mousedown",v),e.addEventListener("touchstart",v),d.addEventListener("mousemove",l),d.addEventListener("touchmove",l),d.addEventListener("mouseup",h),d.addEventListener("mouseleave",h),d.addEventListener("touchend",h)}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).utils={})}(this,function(e){"use strict";e.drag=function(e,t){var d=!1,o=0,u=0,s={},n=t.container,i=void 0===n?e:n,a=t.dragstart,c=t.drag,r=t.dragend,f=t.events,v=void 0===f?["touch","mouse"]:f,l=-1<v.indexOf("touch");function h(e){return e.touches&&e.touches.length?e.touches[0]:e}function p(e){d=!0;var t=h(e),n=t.clientX,i=t.clientY;o=n,u=i,!(s={})===(a&&a({datas:s,inputEvent:e}))&&(d=!1),d&&e.preventDefault()}function E(e){if(d){var t=h(e),n=t.clientX,i=t.clientY;c&&c({clientX:n,clientY:i,deltaX:n-o,deltaY:i-u,datas:s,inputEvent:e})}}function m(e){d&&(d=!1,r&&r({datas:s,inputEvent:e}))}-1<v.indexOf("touch")&&(e.addEventListener("mousedown",p),i.addEventListener("mousemove",E),i.addEventListener("mouseup",m)),l&&(e.addEventListener("touchstart",p),i.addEventListener("touchmove",E),i.addEventListener("touchend",m))}});

package.json

 {
   "name": "@daybrush/drag",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "add drag event",
@@ -5,0 +5,0 @@ "main": "./dist/drag.js",

src/drag.ts

@@ -9,3 +9,5 @@ import { DragOptions } from "./types";
 
-    const { container = el, dragstart, drag, dragend } = options;
+    const { container = el, dragstart, drag, dragend, events = ["touch", "mouse"] } = options;
+    const isTouch = events.indexOf("touch") > -1;
+    const isMouse = events.indexOf("touch") > -1;
 
@@ -23,3 +25,3 @@ function getPosition(e) {
         datas = {};
-        ((dragstart && dragstart({ datas })) === false) && (flag = false);
+        ((dragstart && dragstart({ datas, inputEvent: e })) === false) && (flag = false);
 
@@ -35,5 +37,5 @@ flag && e.preventDefault();
 
-        drag && drag({clientX, clientY, deltaX: clientX - startX, deltaY: clientY - startY, datas });
+        drag && drag({clientX, clientY, deltaX: clientX - startX, deltaY: clientY - startY, datas, inputEvent: e });
     }
-    function onDragEnd() {
+    function onDragEnd(e) {
         if (!flag) {
@@ -44,12 +46,16 @@ return;
 
-        dragend && dragend({ datas });
+        dragend && dragend({ datas, inputEvent: e });
     }
 
-    el.addEventListener("mousedown", onDragStart);
-    el.addEventListener("touchstart", onDragStart);
-    container.addEventListener("mousemove", onDrag);
-    container.addEventListener("touchmove", onDrag);
-    container.addEventListener("mouseup", onDragEnd);
-    container.addEventListener("mouseleave", onDragEnd);
-    container.addEventListener("touchend", onDragEnd);
+    if (isMouse) {
+        el.addEventListener("mousedown", onDragStart);
+        container.addEventListener("mousemove", onDrag);
+        container.addEventListener("mouseup", onDragEnd);
+        // container.addEventListener("mouseleave", onDragEnd);
+    }
+    if (isTouch) {
+        el.addEventListener("touchstart", onDragStart);
+        container.addEventListener("touchmove", onDrag);
+        container.addEventListener("touchend", onDragEnd);
+    }
 }

src/types.ts

@@ -5,5 +5,7 @@ import { IObject } from "@daybrush/utils";
     container?: HTMLElement;
-    dragstart?: (options: {datas: IObject<any>}) => any;
-    drag?: (options: {datas: IObject<any>, deltaX: number, deltaY: number, clientX: number, clientY: number}) => any;
-    dragend?: (options: {datas: IObject<any>}) => any;
+    events?: Array<"mouse" | "touch">;
+    dragstart?: (options: {datas: IObject<any>, inputEvent: any}) => any;
+    drag?: (options: {
+        datas: IObject<any>, deltaX: number, deltaY: number, clientX: number, clientY: number, inputEvent}) => any;
+    dragend?: (options: {datas: IObject<any>, inputEvent: any}) => 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

15725

increased by11.6%

Lines of code

480

increased by9.59%

No dependency changes