vue-multi-drag - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

dist/vue-multi-drag.common.js

 /*!
- * vue-multi-drag v0.2.3 
+ * vue-multi-drag v0.3.0 
  * (c) 2019 mszkb
@@ -30,2 +30,36 @@ * Released under the ISC License.
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
 // Took the algorithm and all the logic from
@@ -64,7 +98,15 @@ // https://www.sitepoint.com/accessible-drag-drop/
       document.addEventListener('dragenter', function (e) {
-        _this.options.callbackBeforeDragenter();
+        _this.options.callbackBeforeDragenter(e, _this);
 
         _this.related = e.target;
-      }, false);
-      document.addEventListener('dragleave', this._dragLeave.bind(this));
+
+        _this.options.callbackAfterDragenter(e, _this);
+      });
+      document.addEventListener('dragleave', function (e) {
+        _this.options.callbackBeforeDragleave(e, _this);
+
+        _this._dragLeave(e);
+
+        _this.options.callbackAfterDragleave(e, _this);
+      });
     }
@@ -93,12 +135,40 @@ }, {
       // this.items.push(draggableItem)
-      draggableItem.addEventListener('mousedown', this._mouseDown.bind(this));
-      draggableItem.addEventListener('mouseup', this._mouseUp.bind(this));
-      draggableItem.addEventListener('dragstart', this._dragStart.bind(this));
+      draggableItem.addEventListener('mousedown', function (e) {
+        _this2.options.callbackBeforeMousdown(e, _this2);
+
+        _this2._mouseDown(e);
+
+        _this2.options.callbackAfterMousdown(e, _this2);
+      });
+      draggableItem.addEventListener('mouseup', function (e) {
+        _this2.options.callbackBeforeMouseup(e, _this2);
+
+        _this2._mouseUp(e);
+
+        _this2.options.callbackAfterMouseup(e, _this2);
+      });
+      draggableItem.addEventListener('dragstart', function (e) {
+        _this2.options.callbackBeforeDragStart(e, _this2);
+
+        _this2._dragStart(e);
+
+        _this2.options.callbackAfterDragStart(e, _this2);
+      });
       draggableItem.addEventListener('dragover', function (e) {
-        //dragover event to allow the drag by preventing its default
+        _this2.options.callbackBeforeDragOver(e, _this2); //dragover event to allow the drag by preventing its default
+
+
         if (_this2.selections.items.length) {
           e.preventDefault();
         }
-      }, false);
-      draggableItem.addEventListener('dragend', this._dragEnd.bind(this));
+
+        _this2.options.callbackAfterDragOver(e, _this2);
+      });
+      draggableItem.addEventListener('dragend', function (e) {
+        _this2.options.callbackBeforeDragend(e, _this2);
+
+        _this2._dragEnd(e);
+
+        _this2.options.callbackAfterDragend(e, _this2);
+      });
     }
@@ -586,5 +656,33 @@ /**
 
-Index.install = function (Vue, options) {
-  var vmdb = new multiDragBehaviour(options); // Add a global asset
+Index.install = function (Vue) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var defaultOptions = {
+    invert: true,
+    // TODO not implemented
+    selectAll: true,
+    // TODO not implemented
+    itemCheckbox: true,
+    // TODO not implemented
+    // Dragging callbacks
+    callbackBeforeDragStart: function callbackBeforeDragStart() {},
+    callbackAfterDragStart: function callbackAfterDragStart() {},
+    callbackBeforeDragOver: function callbackBeforeDragOver() {},
+    callbackAfterDragOver: function callbackAfterDragOver() {},
+    callbackBeforeDragend: function callbackBeforeDragend() {},
+    callbackAfterDragend: function callbackAfterDragend() {},
+    callbackBeforeDragenter: function callbackBeforeDragenter() {},
+    callbackAfterDragenter: function callbackAfterDragenter() {},
+    callbackBeforeDragleave: function callbackBeforeDragleave() {},
+    callbackAfterDragleave: function callbackAfterDragleave() {},
+    // Mouse callbacks
+    callbackBeforeMouseup: function callbackBeforeMouseup() {},
+    callbackAfterMouseup: function callbackAfterMouseup() {},
+    callbackBeforeMousdown: function callbackBeforeMousdown() {},
+    callbackAfterMousdown: function callbackAfterMousdown() {}
+  };
 
+  var finalOptions = _objectSpread({}, defaultOptions, options);
+
+  var vmdb = new multiDragBehaviour(finalOptions); // Add a global asset
+
   Vue.directive('mz-drag', {
@@ -591,0 +689,0 @@ bind: function bind(el) {

dist/vue-multi-drag.esm.js

 /*!
- * vue-multi-drag v0.2.3 
+ * vue-multi-drag v0.3.0 
  * (c) 2019 mszkb
@@ -28,2 +28,36 @@ * Released under the ISC License.
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
 // Took the algorithm and all the logic from
@@ -62,7 +96,15 @@ // https://www.sitepoint.com/accessible-drag-drop/
       document.addEventListener('dragenter', function (e) {
-        _this.options.callbackBeforeDragenter();
+        _this.options.callbackBeforeDragenter(e, _this);
 
         _this.related = e.target;
-      }, false);
-      document.addEventListener('dragleave', this._dragLeave.bind(this));
+
+        _this.options.callbackAfterDragenter(e, _this);
+      });
+      document.addEventListener('dragleave', function (e) {
+        _this.options.callbackBeforeDragleave(e, _this);
+
+        _this._dragLeave(e);
+
+        _this.options.callbackAfterDragleave(e, _this);
+      });
     }
@@ -91,12 +133,40 @@ }, {
       // this.items.push(draggableItem)
-      draggableItem.addEventListener('mousedown', this._mouseDown.bind(this));
-      draggableItem.addEventListener('mouseup', this._mouseUp.bind(this));
-      draggableItem.addEventListener('dragstart', this._dragStart.bind(this));
+      draggableItem.addEventListener('mousedown', function (e) {
+        _this2.options.callbackBeforeMousdown(e, _this2);
+
+        _this2._mouseDown(e);
+
+        _this2.options.callbackAfterMousdown(e, _this2);
+      });
+      draggableItem.addEventListener('mouseup', function (e) {
+        _this2.options.callbackBeforeMouseup(e, _this2);
+
+        _this2._mouseUp(e);
+
+        _this2.options.callbackAfterMouseup(e, _this2);
+      });
+      draggableItem.addEventListener('dragstart', function (e) {
+        _this2.options.callbackBeforeDragStart(e, _this2);
+
+        _this2._dragStart(e);
+
+        _this2.options.callbackAfterDragStart(e, _this2);
+      });
       draggableItem.addEventListener('dragover', function (e) {
-        //dragover event to allow the drag by preventing its default
+        _this2.options.callbackBeforeDragOver(e, _this2); //dragover event to allow the drag by preventing its default
+
+
         if (_this2.selections.items.length) {
           e.preventDefault();
         }
-      }, false);
-      draggableItem.addEventListener('dragend', this._dragEnd.bind(this));
+
+        _this2.options.callbackAfterDragOver(e, _this2);
+      });
+      draggableItem.addEventListener('dragend', function (e) {
+        _this2.options.callbackBeforeDragend(e, _this2);
+
+        _this2._dragEnd(e);
+
+        _this2.options.callbackAfterDragend(e, _this2);
+      });
     }
@@ -584,5 +654,33 @@ /**
 
-Index.install = function (Vue, options) {
-  var vmdb = new multiDragBehaviour(options); // Add a global asset
+Index.install = function (Vue) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var defaultOptions = {
+    invert: true,
+    // TODO not implemented
+    selectAll: true,
+    // TODO not implemented
+    itemCheckbox: true,
+    // TODO not implemented
+    // Dragging callbacks
+    callbackBeforeDragStart: function callbackBeforeDragStart() {},
+    callbackAfterDragStart: function callbackAfterDragStart() {},
+    callbackBeforeDragOver: function callbackBeforeDragOver() {},
+    callbackAfterDragOver: function callbackAfterDragOver() {},
+    callbackBeforeDragend: function callbackBeforeDragend() {},
+    callbackAfterDragend: function callbackAfterDragend() {},
+    callbackBeforeDragenter: function callbackBeforeDragenter() {},
+    callbackAfterDragenter: function callbackAfterDragenter() {},
+    callbackBeforeDragleave: function callbackBeforeDragleave() {},
+    callbackAfterDragleave: function callbackAfterDragleave() {},
+    // Mouse callbacks
+    callbackBeforeMouseup: function callbackBeforeMouseup() {},
+    callbackAfterMouseup: function callbackAfterMouseup() {},
+    callbackBeforeMousdown: function callbackBeforeMousdown() {},
+    callbackAfterMousdown: function callbackAfterMousdown() {}
+  };
 
+  var finalOptions = _objectSpread({}, defaultOptions, options);
+
+  var vmdb = new multiDragBehaviour(finalOptions); // Add a global asset
+
   Vue.directive('mz-drag', {
@@ -589,0 +687,0 @@ bind: function bind(el) {

dist/vue-multi-drag.umd.js

 /*!
- * vue-multi-drag v0.2.3 
+ * vue-multi-drag v0.3.0 
  * (c) 2019 mszkb
@@ -34,2 +34,36 @@ * Released under the ISC License.
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
+
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    }
+
+    return target;
+  }
+
   // Took the algorithm and all the logic from
@@ -68,7 +102,15 @@ // https://www.sitepoint.com/accessible-drag-drop/
         document.addEventListener('dragenter', function (e) {
-          _this.options.callbackBeforeDragenter();
+          _this.options.callbackBeforeDragenter(e, _this);
 
           _this.related = e.target;
-        }, false);
-        document.addEventListener('dragleave', this._dragLeave.bind(this));
+
+          _this.options.callbackAfterDragenter(e, _this);
+        });
+        document.addEventListener('dragleave', function (e) {
+          _this.options.callbackBeforeDragleave(e, _this);
+
+          _this._dragLeave(e);
+
+          _this.options.callbackAfterDragleave(e, _this);
+        });
       }
@@ -97,12 +139,40 @@ }, {
         // this.items.push(draggableItem)
-        draggableItem.addEventListener('mousedown', this._mouseDown.bind(this));
-        draggableItem.addEventListener('mouseup', this._mouseUp.bind(this));
-        draggableItem.addEventListener('dragstart', this._dragStart.bind(this));
+        draggableItem.addEventListener('mousedown', function (e) {
+          _this2.options.callbackBeforeMousdown(e, _this2);
+
+          _this2._mouseDown(e);
+
+          _this2.options.callbackAfterMousdown(e, _this2);
+        });
+        draggableItem.addEventListener('mouseup', function (e) {
+          _this2.options.callbackBeforeMouseup(e, _this2);
+
+          _this2._mouseUp(e);
+
+          _this2.options.callbackAfterMouseup(e, _this2);
+        });
+        draggableItem.addEventListener('dragstart', function (e) {
+          _this2.options.callbackBeforeDragStart(e, _this2);
+
+          _this2._dragStart(e);
+
+          _this2.options.callbackAfterDragStart(e, _this2);
+        });
         draggableItem.addEventListener('dragover', function (e) {
-          //dragover event to allow the drag by preventing its default
+          _this2.options.callbackBeforeDragOver(e, _this2); //dragover event to allow the drag by preventing its default
+
+
           if (_this2.selections.items.length) {
             e.preventDefault();
           }
-        }, false);
-        draggableItem.addEventListener('dragend', this._dragEnd.bind(this));
+
+          _this2.options.callbackAfterDragOver(e, _this2);
+        });
+        draggableItem.addEventListener('dragend', function (e) {
+          _this2.options.callbackBeforeDragend(e, _this2);
+
+          _this2._dragEnd(e);
+
+          _this2.options.callbackAfterDragend(e, _this2);
+        });
       }
@@ -590,5 +660,33 @@ /**
 
-  Index.install = function (Vue, options) {
-    var vmdb = new multiDragBehaviour(options); // Add a global asset
+  Index.install = function (Vue) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var defaultOptions = {
+      invert: true,
+      // TODO not implemented
+      selectAll: true,
+      // TODO not implemented
+      itemCheckbox: true,
+      // TODO not implemented
+      // Dragging callbacks
+      callbackBeforeDragStart: function callbackBeforeDragStart() {},
+      callbackAfterDragStart: function callbackAfterDragStart() {},
+      callbackBeforeDragOver: function callbackBeforeDragOver() {},
+      callbackAfterDragOver: function callbackAfterDragOver() {},
+      callbackBeforeDragend: function callbackBeforeDragend() {},
+      callbackAfterDragend: function callbackAfterDragend() {},
+      callbackBeforeDragenter: function callbackBeforeDragenter() {},
+      callbackAfterDragenter: function callbackAfterDragenter() {},
+      callbackBeforeDragleave: function callbackBeforeDragleave() {},
+      callbackAfterDragleave: function callbackAfterDragleave() {},
+      // Mouse callbacks
+      callbackBeforeMouseup: function callbackBeforeMouseup() {},
+      callbackAfterMouseup: function callbackAfterMouseup() {},
+      callbackBeforeMousdown: function callbackBeforeMousdown() {},
+      callbackAfterMousdown: function callbackAfterMousdown() {}
+    };
 
+    var finalOptions = _objectSpread({}, defaultOptions, options);
+
+    var vmdb = new multiDragBehaviour(finalOptions); // Add a global asset
+
     Vue.directive('mz-drag', {
@@ -595,0 +693,0 @@ bind: function bind(el) {

dist/vue-multi-drag.umd.min.js

 /*!
- * vue-multi-drag v0.2.3 
+ * vue-multi-drag v0.3.0 
  * (c) 2019 mszkb
  * Released under the ISC License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,e.VueMultiDrag=t())}(this,function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function i(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}var s=function(){function t(i){e(this,t),this.options=i,this.allItems=[],this.selections={items:[],owner:null,droptarget:null},this.dropZones=null,this.draggableItems=null,this.related={},this._attachGlobalListeners()}return i(t,[{key:"_attachGlobalListeners",value:function(){var e=this;document.addEventListener("dragenter",function(t){e.options.callbackBeforeDragenter(),e.related=t.target},!1),document.addEventListener("dragleave",this._dragLeave.bind(this))}},{key:"initItem",value:function(e){e.setAttribute("grabindex",this.allItems.length),this.allItems.push(e),this.attachEventListeners(e)}},{key:"attachEventListeners",value:function(e){var t=this;e.addEventListener("mousedown",this._mouseDown.bind(this)),e.addEventListener("mouseup",this._mouseUp.bind(this)),e.addEventListener("dragstart",this._dragStart.bind(this)),e.addEventListener("dragover",function(e){t.selections.items.length&&e.preventDefault()},!1),e.addEventListener("dragend",this._dragEnd.bind(this))}},{key:"_addSelection",value:function(e){if(this.selections.owner){if(this.selections.owner!==e.parentNode)return}else this.selections.owner=e.parentNode;e.setAttribute("aria-grabbed","true"),this.selections.items.push(e),this.selections.items.sort(function(e,t){return e.getAttribute("grabindex")>t.getAttribute("grabindex")?1:t.getAttribute("grabindex")>e.getAttribute("grabindex")?-1:0})}},{key:"_removeSelection",value:function(e){e.setAttribute("aria-grabbed","false");for(var t=this.selections.items.length,i=0;i<t;i++)if(this.selections.items[i]===e){this.selections.items.splice(i,1);break}0===this.selections.items.length&&(this.selections.owner=null)}},{key:"_clearSelections",value:function(){if(this.selections.items.length){for(var e=this.selections.items.length,t=0;t<e;t++)this.selections.items[t].setAttribute("aria-grabbed","false");this.selections.owner=null,this.selections.items=[]}}},{key:"_hasModifier",value:function(e){return e.ctrlKey||e.metaKey||e.shiftKey}},{key:"_initDropZones",value:function(){null===this.dropZones&&(this.dropZones=document.querySelectorAll("[related]"))}},{key:"_initDraggableItems",value:function(){null===this.draggableItems&&(this.draggableItems=document.querySelectorAll("[draggable]"))}},{key:"_addDropeffects",value:function(){this._initDropZones(),this._initDraggableItems();for(var e=this.dropZones.length,t=0;t<e;t++)this.dropZones[t]!==this.selections.owner&&"none"===this.dropZones[t].getAttribute("aria-dropeffect")&&(this.dropZones[t].setAttribute("aria-dropeffect","move"),this.dropZones[t].setAttribute("tabindex","0"));for(var i=this.draggableItems.length,s=0;s<i;s++)this.draggableItems[s].parentNode!==this.selections.owner&&this.draggableItems[s].getAttribute("aria-grabbed")&&(this.draggableItems[s].removeAttribute("aria-grabbed"),this.draggableItems[s].removeAttribute("tabindex"))}},{key:"_clearDropeffects",value:function(){if(this._initDropZones(),this._initDraggableItems(),this.selections.items.length){for(var e=this.dropZones.length,t=0;t<e;t++)"none"!==this.dropZones[t].getAttribute("aria-dropeffect")&&(this.dropZones[t].setAttribute("aria-dropeffect","none"),this.dropZones[t].removeAttribute("tabindex"));for(var i=this.draggableItems.length,s=0;s<i;s++)this.draggableItems[s].getAttribute("aria-grabbed")?"true"===this.draggableItems[s].getAttribute("aria-grabbed")&&this.draggableItems[s].setAttribute("tabindex","0"):(this.draggableItems[s].setAttribute("aria-grabbed","false"),this.draggableItems[s].setAttribute("tabindex","0"))}}},{key:"_getContainer",value:function(e){do{if(1===e.nodeType&&e.getAttribute("aria-dropeffect"))return e}while(e=e.parentNode);return null}},{key:"_mouseDown",value:function(e){this._clearDropeffects(),this._hasModifier(e)&&(this._clearDropeffects(),this._clearSelections())}},{key:"_mouseUp",value:function(e){if(!this._hasModifier(e))return void(e.target.getAttribute("draggable")&&("false"===e.target.getAttribute("aria-grabbed")?this._addSelection(e.target):this._removeSelection(e.target)));e.target.getAttribute("draggable")&&("true"===e.target.getAttribute("aria-grabbed")?(this._removeSelection(e.target),this.selections.items.length||(this.selections.owner=null)):this._addSelection(e.target))}},{key:"_dragStart",value:function(e){this.selections.owner!==e.target.parentNode&&(this._clearSelections(),this._addSelection(e.target)),"false"===e.target.getAttribute("aria-grabbed")&&this._addSelection(e.target),e.dataTransfer.setData("text",""),this._addDropeffects()}},{key:"_keyDown",value:function(e){if(e.target.getAttribute("aria-grabbed")&&(32===e.keyCode&&(this._hasModifier(e)?"true"===e.target.getAttribute("aria-grabbed")?(1===this.selections.items.length&&this._clearDropeffects(),this._removeSelection(e.target),this.selections.items.length&&this._addDropeffects(),this.selections.items.length||(this.selections.owner=null)):(this._addSelection(e.target),this._addDropeffects()):"false"===e.target.getAttribute("aria-grabbed")?(this._clearDropeffects(),this._clearSelections(),this._addSelection(e.target),this._addDropeffects()):this._addDropeffects(),e.preventDefault()),77===e.keyCode&&this._hasModifier(e))){if(this.selections.items.length)if(this._addDropeffects(),this.selections.owner===this.dropZones[this.dropZones.length-1])this.dropZones[0].focus();else for(var t=this.dropZones.length,i=0;i<t;i++)if(this.selections.owner===this.dropZones[i]){this.dropZones[i+1].focus();break}e.preventDefault()}27===e.keyCode&&this.selections.items.length&&(this._clearDropeffects(),this.selections.items[this.selections.items.length-1].focus(),this._clearSelections())}},{key:"_dragLeave",value:function(e){this._initDropZones(),this._initDraggableItems();var t=this._getContainer(this.related);t===this.selections.owner&&(t=null),t!==this.selections.droptarget&&(this.selections.droptarget&&(this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,"")),t&&(t.className+=" dragover"),this.selections.droptarget=t)}},{key:"_startIndex",value:function(e){var t=e.lastChild;return null===t?0:"#text"===t.nodeName?0:t.getAttribute("grabindex")}},{key:"_dragEnd",value:function(e){if(this.selections.droptarget){for(var t=this._startIndex(this.selections.droptarget),i=this.selections.items.length,s=0;s<i;s++)this.selections.items[s].setAttribute("grabindex",++t),this.selections.droptarget.appendChild(this.selections.items[s]);e.preventDefault()}this.selections.items.length&&(this._clearDropeffects(),this.selections.droptarget&&(this._clearSelections(),this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,""),this.selections.droptarget=null))}}]),t}(),r={};return r.install=function(e,t){var i=new s(t);e.directive("mz-drag",{bind:function(e){e.setAttribute("draggable","true"),e.setAttribute("aria-grabbed","false"),e.setAttribute("tabindex","0"),e.setAttribute("grabindex","0"),i.initItem(e)},unbind:function(e){e.removeEventListener()}}),e.directive("mz-dropzone",{bind:function(e){e.setAttribute("related","true"),e.setAttribute("aria-dropeffect","none")}}),e.mixin({created:function(){}}),e.prototype.$myMethod=function(){}},r});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,e.VueMultiDrag=t())}(this,function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,i,r){return i&&t(e.prototype,i),r&&t(e,r),e}function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function s(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},s=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(i).filter(function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable}))),s.forEach(function(t){r(e,t,i[t])})}return e}var n=function(){function t(i){e(this,t),this.options=i,this.allItems=[],this.selections={items:[],owner:null,droptarget:null},this.dropZones=null,this.draggableItems=null,this.related={},this._attachGlobalListeners()}return i(t,[{key:"_attachGlobalListeners",value:function(){var e=this;document.addEventListener("dragenter",function(t){e.options.callbackBeforeDragenter(t,e),e.related=t.target,e.options.callbackAfterDragenter(t,e)}),document.addEventListener("dragleave",function(t){e.options.callbackBeforeDragleave(t,e),e._dragLeave(t),e.options.callbackAfterDragleave(t,e)})}},{key:"initItem",value:function(e){e.setAttribute("grabindex",this.allItems.length),this.allItems.push(e),this.attachEventListeners(e)}},{key:"attachEventListeners",value:function(e){var t=this;e.addEventListener("mousedown",function(e){t.options.callbackBeforeMousdown(e,t),t._mouseDown(e),t.options.callbackAfterMousdown(e,t)}),e.addEventListener("mouseup",function(e){t.options.callbackBeforeMouseup(e,t),t._mouseUp(e),t.options.callbackAfterMouseup(e,t)}),e.addEventListener("dragstart",function(e){t.options.callbackBeforeDragStart(e,t),t._dragStart(e),t.options.callbackAfterDragStart(e,t)}),e.addEventListener("dragover",function(e){t.options.callbackBeforeDragOver(e,t),t.selections.items.length&&e.preventDefault(),t.options.callbackAfterDragOver(e,t)}),e.addEventListener("dragend",function(e){t.options.callbackBeforeDragend(e,t),t._dragEnd(e),t.options.callbackAfterDragend(e,t)})}},{key:"_addSelection",value:function(e){if(this.selections.owner){if(this.selections.owner!==e.parentNode)return}else this.selections.owner=e.parentNode;e.setAttribute("aria-grabbed","true"),this.selections.items.push(e),this.selections.items.sort(function(e,t){return e.getAttribute("grabindex")>t.getAttribute("grabindex")?1:t.getAttribute("grabindex")>e.getAttribute("grabindex")?-1:0})}},{key:"_removeSelection",value:function(e){e.setAttribute("aria-grabbed","false");for(var t=this.selections.items.length,i=0;i<t;i++)if(this.selections.items[i]===e){this.selections.items.splice(i,1);break}0===this.selections.items.length&&(this.selections.owner=null)}},{key:"_clearSelections",value:function(){if(this.selections.items.length){for(var e=this.selections.items.length,t=0;t<e;t++)this.selections.items[t].setAttribute("aria-grabbed","false");this.selections.owner=null,this.selections.items=[]}}},{key:"_hasModifier",value:function(e){return e.ctrlKey||e.metaKey||e.shiftKey}},{key:"_initDropZones",value:function(){null===this.dropZones&&(this.dropZones=document.querySelectorAll("[related]"))}},{key:"_initDraggableItems",value:function(){null===this.draggableItems&&(this.draggableItems=document.querySelectorAll("[draggable]"))}},{key:"_addDropeffects",value:function(){this._initDropZones(),this._initDraggableItems();for(var e=this.dropZones.length,t=0;t<e;t++)this.dropZones[t]!==this.selections.owner&&"none"===this.dropZones[t].getAttribute("aria-dropeffect")&&(this.dropZones[t].setAttribute("aria-dropeffect","move"),this.dropZones[t].setAttribute("tabindex","0"));for(var i=this.draggableItems.length,r=0;r<i;r++)this.draggableItems[r].parentNode!==this.selections.owner&&this.draggableItems[r].getAttribute("aria-grabbed")&&(this.draggableItems[r].removeAttribute("aria-grabbed"),this.draggableItems[r].removeAttribute("tabindex"))}},{key:"_clearDropeffects",value:function(){if(this._initDropZones(),this._initDraggableItems(),this.selections.items.length){for(var e=this.dropZones.length,t=0;t<e;t++)"none"!==this.dropZones[t].getAttribute("aria-dropeffect")&&(this.dropZones[t].setAttribute("aria-dropeffect","none"),this.dropZones[t].removeAttribute("tabindex"));for(var i=this.draggableItems.length,r=0;r<i;r++)this.draggableItems[r].getAttribute("aria-grabbed")?"true"===this.draggableItems[r].getAttribute("aria-grabbed")&&this.draggableItems[r].setAttribute("tabindex","0"):(this.draggableItems[r].setAttribute("aria-grabbed","false"),this.draggableItems[r].setAttribute("tabindex","0"))}}},{key:"_getContainer",value:function(e){do{if(1===e.nodeType&&e.getAttribute("aria-dropeffect"))return e}while(e=e.parentNode);return null}},{key:"_mouseDown",value:function(e){this._clearDropeffects(),this._hasModifier(e)&&(this._clearDropeffects(),this._clearSelections())}},{key:"_mouseUp",value:function(e){if(!this._hasModifier(e))return void(e.target.getAttribute("draggable")&&("false"===e.target.getAttribute("aria-grabbed")?this._addSelection(e.target):this._removeSelection(e.target)));e.target.getAttribute("draggable")&&("true"===e.target.getAttribute("aria-grabbed")?(this._removeSelection(e.target),this.selections.items.length||(this.selections.owner=null)):this._addSelection(e.target))}},{key:"_dragStart",value:function(e){this.selections.owner!==e.target.parentNode&&(this._clearSelections(),this._addSelection(e.target)),"false"===e.target.getAttribute("aria-grabbed")&&this._addSelection(e.target),e.dataTransfer.setData("text",""),this._addDropeffects()}},{key:"_keyDown",value:function(e){if(e.target.getAttribute("aria-grabbed")&&(32===e.keyCode&&(this._hasModifier(e)?"true"===e.target.getAttribute("aria-grabbed")?(1===this.selections.items.length&&this._clearDropeffects(),this._removeSelection(e.target),this.selections.items.length&&this._addDropeffects(),this.selections.items.length||(this.selections.owner=null)):(this._addSelection(e.target),this._addDropeffects()):"false"===e.target.getAttribute("aria-grabbed")?(this._clearDropeffects(),this._clearSelections(),this._addSelection(e.target),this._addDropeffects()):this._addDropeffects(),e.preventDefault()),77===e.keyCode&&this._hasModifier(e))){if(this.selections.items.length)if(this._addDropeffects(),this.selections.owner===this.dropZones[this.dropZones.length-1])this.dropZones[0].focus();else for(var t=this.dropZones.length,i=0;i<t;i++)if(this.selections.owner===this.dropZones[i]){this.dropZones[i+1].focus();break}e.preventDefault()}27===e.keyCode&&this.selections.items.length&&(this._clearDropeffects(),this.selections.items[this.selections.items.length-1].focus(),this._clearSelections())}},{key:"_dragLeave",value:function(e){this._initDropZones(),this._initDraggableItems();var t=this._getContainer(this.related);t===this.selections.owner&&(t=null),t!==this.selections.droptarget&&(this.selections.droptarget&&(this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,"")),t&&(t.className+=" dragover"),this.selections.droptarget=t)}},{key:"_startIndex",value:function(e){var t=e.lastChild;return null===t?0:"#text"===t.nodeName?0:t.getAttribute("grabindex")}},{key:"_dragEnd",value:function(e){if(this.selections.droptarget){for(var t=this._startIndex(this.selections.droptarget),i=this.selections.items.length,r=0;r<i;r++)this.selections.items[r].setAttribute("grabindex",++t),this.selections.droptarget.appendChild(this.selections.items[r]);e.preventDefault()}this.selections.items.length&&(this._clearDropeffects(),this.selections.droptarget&&(this._clearSelections(),this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,""),this.selections.droptarget=null))}}]),t}(),a={};return a.install=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i={invert:!0,selectAll:!0,itemCheckbox:!0,callbackBeforeDragStart:function(){},callbackAfterDragStart:function(){},callbackBeforeDragOver:function(){},callbackAfterDragOver:function(){},callbackBeforeDragend:function(){},callbackAfterDragend:function(){},callbackBeforeDragenter:function(){},callbackAfterDragenter:function(){},callbackBeforeDragleave:function(){},callbackAfterDragleave:function(){},callbackBeforeMouseup:function(){},callbackAfterMouseup:function(){},callbackBeforeMousdown:function(){},callbackAfterMousdown:function(){}},r=s({},i,t),a=new n(r);e.directive("mz-drag",{bind:function(e){e.setAttribute("draggable","true"),e.setAttribute("aria-grabbed","false"),e.setAttribute("tabindex","0"),e.setAttribute("grabindex","0"),a.initItem(e)},unbind:function(e){e.removeEventListener()}}),e.directive("mz-dropzone",{bind:function(e){e.setAttribute("related","true"),e.setAttribute("aria-dropeffect","none")}}),e.mixin({created:function(){}}),e.prototype.$myMethod=function(){}},a});

package.json

@@ -5,3 +5,3 @@ {
   "license": "ISC",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "scripts": {
@@ -8,0 +8,0 @@ "serve": "vue-cli-service serve",

src/index.js

@@ -13,4 +13,26 @@ import VueMultiDragBehaviour from './vue-multi-drag-behaviour'
  */
-Index.install = function(Vue, options) {
-  const vmdb = new VueMultiDragBehaviour(options)
+Index.install = function(Vue, options = {}) {
+  const defaultOptions = {
+    invert: true,           // TODO not implemented
+    selectAll: true,        // TODO not implemented
+    itemCheckbox: true,     // TODO not implemented
+    // Dragging callbacks
+    callbackBeforeDragStart: () => { },
+    callbackAfterDragStart: () => { },
+    callbackBeforeDragOver: () => { },
+    callbackAfterDragOver: () => { },
+    callbackBeforeDragend: () => { },
+    callbackAfterDragend: () => { },
+    callbackBeforeDragenter: () => { },
+    callbackAfterDragenter: () => { },
+    callbackBeforeDragleave: () => { },
+    callbackAfterDragleave: () => { },
+    // Mouse callbacks
+    callbackBeforeMouseup: () => { },
+    callbackAfterMouseup: () => { },
+    callbackBeforeMousdown: () => { },
+    callbackAfterMousdown: () => { },
+  }
+  const finalOptions = {...defaultOptions, ...options}
+  const vmdb = new VueMultiDragBehaviour(finalOptions)
 
@@ -17,0 +39,0 @@ // Add a global asset

src/plugin.js

@@ -9,54 +9,4 @@ /*
 
-const options = {
-  invert: true,
-  selectAll: true,
-  itemCheckbox: true,
-  // Dragging callbacks
-  callbackBeforeDragStart: () => {
-    console.log('I get called on before dragstart')
-  },
-  callbackAfterDragStart: () => {
-    console.log('I get called on after dragstart')
-  },
-  callbackBeforeDragOver: () => {
-    console.log('I get called before dragging over')
-  },
-  callbackAfterDragOver: () => {
-    console.log('I get called after dragging over')
-  },
-  callbackBeforeDragend: () => {
-    console.log('I get called before dragend')
-  },
-  callbackAfterDragend: () => {
-    console.log('I get called after dragend')
-  },
-  callbackBeforeDragenter: () => {
-    console.log('I get called before dragenter')
-  },
-  callbackAfterDragenter: () => {
-    console.log('I get called after dragenter')
-  },
-  callbackBeforeDragleave: () => {
-    console.log('I get called before dragleave')
-  },
-  callbackAfterDragleave: () => {
-    console.log('I get called after dragleave')
-  },
-  // Mouse callbacks
-  callbackBeforeMouseup: () => {
-    console.log('I get called before mouseup')
-  },
-  callbackAfterMouseup: () => {
-    console.log('I get called after mouseup')
-  },
-  callbackBeforeMousdown: () => {
-    console.log('I get called before mousedown')
-  },
-  callbackAfterMousdown: () => {
-    console.log('I get called after mousedown')
-  }
-}
+Vue.use(plugin)
 
-Vue.use(plugin, options)
-
 /*
@@ -63,0 +13,0 @@ * NOTE:

src/vue-multi-drag-behaviour.js

@@ -5,3 +5,3 @@ // Took the algorithm and all the logic from
 export default class multiDragBehaviour {
-  constructor(options) {
+  constructor (options) {
     this.options = options
@@ -27,16 +27,17 @@ this.allItems = []
 
-  _attachGlobalListeners() {
-    document.addEventListener(
-      'dragenter',
-      e => {
-        this.options.callbackBeforeDragenter()
-        this.related = e.target
-      },
-      false
-    )
+  _attachGlobalListeners () {
+    document.addEventListener('dragenter', (e) => {
+      this.options.callbackBeforeDragenter(e, this)
+      this.related = e.target
+      this.options.callbackAfterDragenter(e, this)
+    })
 
-    document.addEventListener('dragleave', this._dragLeave.bind(this) )
+    document.addEventListener('dragleave', (e) => {
+      this.options.callbackBeforeDragleave(e, this)
+      this._dragLeave(e)
+      this.options.callbackAfterDragleave(e, this)
+    })
   }
 
-  initItem(draggableItem) {
+  initItem (draggableItem) {
     draggableItem.setAttribute('grabindex', this.allItems.length) // this attribute keeps track of the position
@@ -54,19 +55,34 @@ // so it is not affected by the order of selection
    */
-  attachEventListeners(draggableItem) {
+  attachEventListeners (draggableItem) {
     // this.items.push(draggableItem)
 
-    draggableItem.addEventListener('mousedown', this._mouseDown.bind(this))
-    draggableItem.addEventListener('mouseup', this._mouseUp.bind(this))
-    draggableItem.addEventListener('dragstart', this._dragStart.bind(this))
-    draggableItem.addEventListener('dragover',
-      e => {
-        //dragover event to allow the drag by preventing its default
-        if (this.selections.items.length) {
-          e.preventDefault()
-        }
-      },
-      false
-    )
+    draggableItem.addEventListener('mousedown', (e) => {
+      this.options.callbackBeforeMousdown(e, this)
+      this._mouseDown(e)
+      this.options.callbackAfterMousdown(e, this)
+    })
+    draggableItem.addEventListener('mouseup', (e) => {
+      this.options.callbackBeforeMouseup(e, this)
+      this._mouseUp(e)
+      this.options.callbackAfterMouseup(e, this)
+    })
+    draggableItem.addEventListener('dragstart', (e) => {
+      this.options.callbackBeforeDragStart(e, this)
+      this._dragStart(e)
+      this.options.callbackAfterDragStart(e, this)
+    })
+    draggableItem.addEventListener('dragover', (e) => {
+      this.options.callbackBeforeDragOver(e, this)
+      //dragover event to allow the drag by preventing its default
+      if (this.selections.items.length) {
+        e.preventDefault()
+      }
+      this.options.callbackAfterDragOver(e, this)
+    })
 
-    draggableItem.addEventListener('dragend',this._dragEnd.bind(this))
+    draggableItem.addEventListener('dragend', (e) => {
+      this.options.callbackBeforeDragend(e, this)
+      this._dragEnd(e)
+      this.options.callbackAfterDragend(e, this)
+    })
   }
@@ -81,3 +97,3 @@
    */
-  _addSelection(item) {
+  _addSelection (item) {
     //if the owner reference is still null, set it to this item's parent
@@ -96,3 +112,3 @@ //so that further selection is only allowed within the same container
     this.selections.items.push(item) //add it to the items array
-    this.selections.items.sort(function(a, b) {
+    this.selections.items.sort(function (a, b) {
       return a.getAttribute('grabindex') > b.getAttribute('grabindex')
@@ -113,3 +129,3 @@ ? 1
    */
-  _removeSelection(item) {
+  _removeSelection (item) {
     item.setAttribute('aria-grabbed', 'false')
@@ -136,3 +152,3 @@
    */
-  _clearSelections() {
+  _clearSelections () {
     if (this.selections.items.length) {
@@ -157,7 +173,7 @@ //reset the grabbed state on every selected item
    */
-  _hasModifier(e) {
+  _hasModifier (e) {
     return e.ctrlKey || e.metaKey || e.shiftKey
   }
 
-  _initDropZones() {
+  _initDropZones () {
     if (this.dropZones === null) {
@@ -168,3 +184,3 @@ this.dropZones = document.querySelectorAll('[related]')
 
-  _initDraggableItems() {
+  _initDraggableItems () {
     if (this.draggableItems === null) {
@@ -176,3 +192,3 @@ this.draggableItems = document.querySelectorAll('[draggable]')
   //function for applying dropeffect to the target containers
-  _addDropeffects() {
+  _addDropeffects () {
     this._initDropZones()
@@ -206,3 +222,3 @@ this._initDraggableItems()
 
-  _clearDropeffects() {
+  _clearDropeffects () {
     this._initDropZones()
@@ -246,3 +262,3 @@ this._initDraggableItems()
    */
-  _getContainer(element) {
+  _getContainer (element) {
     do {
@@ -266,3 +282,3 @@ if (element.nodeType === 1 && element.getAttribute('aria-dropeffect')) {
    */
-  _mouseDown(e) {
+  _mouseDown (e) {
     this._clearDropeffects() //clear dropeffect from the target containers
@@ -283,3 +299,3 @@
    */
-  _mouseUp(e) {
+  _mouseUp (e) {
     if (!this._hasModifier(e)) {
@@ -324,3 +340,3 @@ if (e.target.getAttribute('draggable')) {
 
-  _dragStart(e) {
+  _dragStart (e) {
     // If the clicked node is from another column, then block the drag
@@ -349,3 +365,3 @@ if (this.selections.owner !== e.target.parentNode) {
 
-  _keyDown(e) {
+  _keyDown (e) {
     //if the element is a grabbable item
@@ -452,3 +468,3 @@ if (e.target.getAttribute('aria-grabbed')) {
 
-  _dragLeave(e) {
+  _dragLeave (e) {
     this._initDropZones()
@@ -486,3 +502,3 @@ this._initDraggableItems()
 
-  _startIndex(e) {
+  _startIndex (e) {
     let lastChild = e.lastChild
@@ -501,3 +517,3 @@
 
-  _dragEnd(e) {
+  _dragEnd (e) {
     //if we have a valid drop target reference
@@ -504,0 +520,0 @@ //(which implies that we have some selected items)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

114242

increased by10.12%

Lines of code

2276

increased by10.06%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

14

decreased by-6.67%

No dependency changes