@dflex/draggable - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/dflexDraggable.min.cjs.js

@@ -1,2 +0,2 @@
-var t=function(){function t(e){var n=e.id,r=e.element;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.id=n,this.elm=r,this.translateY=0,this.translateX=0}var e;return(e=[{key:"seTranslate",value:function(t,e){this.translateY=e,this.translateX=t}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}(),e=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.registry={}}var e;return(e=[{key:"register",value:function(t,e){var n=t.id;this.registry[n]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,n){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t,e){return!e||"object"!==n(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var c,f=(c||(c=new(function(n){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(p,e);var c,f,s,l=(f=p,s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,e=u(f);if(s){var n=u(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function p(){return r(this,p),l.apply(this,arguments)}return(c=[{key:"register",value:function(e){o(u(p.prototype),"register",this).call(this,e,t)}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(p.prototype,c),p}())),c),s=[{prop:"pointerEvents",value:"none"},{prop:"zIndex",value:"1"},{prop:"transition",value:"opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s"}],l=function(){function t(e,n){var r=n.x,o=n.y;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var i=f.getElmById(e);this.draggedElm=i;var a=this.draggedElm,u=a.translateX,c=a.translateY,s=a.elm.style;this.draggedStyle=s,this.offsetX=-r+u,this.offsetY=-o+c,this.goToX=0,this.goToY=0,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?s.forEach(function(t){var n=t.prop,r=t.value;e.draggedStyle[n]=r}):(this.draggedStyle.pointerEvents=null,this.draggedElm.seTranslate(this.goToX,this.goToY))}},{key:"end",value:function(){this.setDragged(!1)}},{key:"dragAt",value:function(t,e){this.goToX=t+this.offsetX,this.goToY=e+this.offsetY,this.draggedStyle.transform="translate(".concat(this.goToX,"px,").concat(this.goToY,"px)")}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();exports.Draggable=l,exports.store=f;
+var t=function t(e){var n=e.element,r=function(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}(e,["element"]);!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=n,Object.assign(this,r)},e=function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.registry={}}var e;return(e=[{key:"register",value:function(t,e){var n=t.id;this.registry[n]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,n){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!==n(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var a,f=(a||(a=new(function(n){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(p,e);var a,f,l,s=(f=p,l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,e=u(f);if(l){var n=u(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return c(this,t)});function p(){return r(this,p),s.apply(this,arguments)}return(a=[{key:"register",value:function(e){o(u(p.prototype),"register",this).call(this,Object.assign(e,{translateY:0,translateX:0}),t)}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(p.prototype,a),p}())),a),l=[{prop:"pointerEvents",value:"none"},{prop:"zIndex",value:"1"},{prop:"transition",value:"opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s"}],s=function(){function t(e,n){var r=n.x,o=n.y;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.draggedElm=e;var i=this.draggedElm,c=i.translateX,u=i.translateY,a=i.element.style;this.draggedStyle=a,this.offsetX=-r+c,this.offsetY=-o+u,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?l.forEach(function(t){var n=t.prop,r=t.value;e.draggedStyle[n]=r}):this.draggedStyle.pointerEvents=null}},{key:"end",value:function(){this.setDragged(!1)}},{key:"dragAt",value:function(t,e){this.draggedElm.translateX=t+this.offsetX,this.draggedElm.translateY=e+this.offsetY,this.draggedStyle.transform="translate(".concat(this.draggedElm.translateX,"px,").concat(this.draggedElm.translateY,"px)")}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();function p(t){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function y(t,e){return(y=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function b(t,e){return!e||"object"!==p(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function h(t){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var g=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}(o,s);var e,n,r=(e=o,n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,r=h(e);if(n){var o=h(this).constructor;t=Reflect.construct(r,arguments,o)}else t=r.apply(this,arguments);return b(this,t)});function o(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o);var n=f.getElmById(t);return r.call(this,n,e)}return o}();exports.Draggable=g,exports.store=f;
 //# sourceMappingURL=dflexDraggable.min.cjs.js.map

dist/dflexDraggable.min.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).dflexDraggable={})}(this,function(t){var e=function(){function t(e){var n=e.id,r=e.element;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.id=n,this.elm=r,this.translateY=0,this.translateX=0}var e;return(e=[{key:"seTranslate",value:function(t,e){this.translateY=e,this.translateX=t}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,n){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=f(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function a(t,e){return!e||"object"!==n(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function f(t){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var u,c=(u||(u=new(function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(l,t);var n,u,c,s=(u=l,c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,e=f(u);if(c){var n=f(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function l(){return r(this,l),s.apply(this,arguments)}return(n=[{key:"register",value:function(t){o(f(l.prototype),"register",this).call(this,t,e)}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(l.prototype,n),l}(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.registry={}}var e;return(e=[{key:"register",value:function(t,e){var n=t.id;this.registry[n]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}()))),u),s=[{prop:"pointerEvents",value:"none"},{prop:"zIndex",value:"1"},{prop:"transition",value:"opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s"}],l=function(){function t(e,n){var r=n.x,o=n.y;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var i=c.getElmById(e);this.draggedElm=i;var a=this.draggedElm,f=a.translateX,u=a.translateY,s=a.elm.style;this.draggedStyle=s,this.offsetX=-r+f,this.offsetY=-o+u,this.goToX=0,this.goToY=0,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?s.forEach(function(t){var n=t.prop,r=t.value;e.draggedStyle[n]=r}):(this.draggedStyle.pointerEvents=null,this.draggedElm.seTranslate(this.goToX,this.goToY))}},{key:"end",value:function(){this.setDragged(!1)}},{key:"dragAt",value:function(t,e){this.goToX=t+this.offsetX,this.goToY=e+this.offsetY,this.draggedStyle.transform="translate(".concat(this.goToX,"px,").concat(this.goToY,"px)")}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}();t.Draggable=l,t.store=c});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).dflexDraggable={})}(this,function(t){var e=function t(e){var n=e.element,r=function(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)n=i[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}(e,["element"]);!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=n,Object.assign(this,r)};function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,n){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,n){var r=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=f(t)););return t}(t,e);if(r){var o=Object.getOwnPropertyDescriptor(r,e);return o.get?o.get.call(n):o.value}})(t,e,n||t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!==n(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function f(t){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var u,a=(u||(u=new(function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(s,t);var n,u,a,l=(u=s,a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,e=f(u);if(a){var n=f(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return c(this,t)});function s(){return r(this,s),l.apply(this,arguments)}return(n=[{key:"register",value:function(t){o(f(s.prototype),"register",this).call(this,Object.assign(t,{translateY:0,translateX:0}),e)}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(s.prototype,n),s}(function(){function t(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.registry={}}var e;return(e=[{key:"register",value:function(t,e){var n=t.id;this.registry[n]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}()))),u),l=[{prop:"pointerEvents",value:"none"},{prop:"zIndex",value:"1"},{prop:"transition",value:"opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s"}];function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function p(t,e){return(p=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function y(t,e){return!e||"object"!==s(e)&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function b(t){return(b=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var h=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&p(t,e)}(o,t);var e,n,r=(e=o,n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}(),function(){var t,r=b(e);if(n){var o=b(this).constructor;t=Reflect.construct(r,arguments,o)}else t=r.apply(this,arguments);return y(this,t)});function o(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o);var n=a.getElmById(t);return r.call(this,n,e)}return o}(function(){function t(e,n){var r=n.x,o=n.y;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.draggedElm=e;var i=this.draggedElm,c=i.translateX,f=i.translateY,u=i.element.style;this.draggedStyle=u,this.offsetX=-r+c,this.offsetY=-o+f,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?l.forEach(function(t){var n=t.prop,r=t.value;e.draggedStyle[n]=r}):this.draggedStyle.pointerEvents=null}},{key:"end",value:function(){this.setDragged(!1)}},{key:"dragAt",value:function(t,e){this.draggedElm.translateX=t+this.offsetX,this.draggedElm.translateY=e+this.offsetY,this.draggedStyle.transform="translate(".concat(this.draggedElm.translateX,"px,").concat(this.draggedElm.translateY,"px)")}}])&&function(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}(t.prototype,e),t}());t.Draggable=h,t.store=a});
 //# sourceMappingURL=dflexDraggable.min.umd.js.map

package.json

 {
   "name": "@dflex/draggable",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/dflexDraggable.min.cjs.js",
@@ -8,3 +8,4 @@ "umd:main": "dist/dflexDraggable.min.umd",
   "scripts": {
-    "build": "builderz --formats cjs umd -m -l"
+    "build": "builderz --formats cjs umd -m -l",
+    "test": "jest"
   },
@@ -23,3 +24,3 @@ "repository": "https://github.com/jalal246/dflex/tree/master/packages/draggable",
     "@dflex/core-instance",
-    "@dflex/draggable",
+    "@dflex/dnd",
     "@folo",
@@ -34,3 +35,3 @@ "builderz",
   },
-  "gitHead": "fb9a1be705ae00834de9524511692b155d43ecf2"
+  "gitHead": "bdc3d06b58185c67703284588c34b91a76eb0955"
 }

readme.md

@@ -10,3 +10,3 @@ # @dflex/draggable
 <p align="center">
-<img src="https://raw.githubusercontent.com/jalal246/dflex/master/packages/draggable/img/draggable.gif">
+    <img src="https://raw.githubusercontent.com/jalal246/dflex/master/packages/draggable/img/draggable.gif" alt="show how dragabble works" />
 </p>
@@ -53,2 +53,9 @@
 
+#### Examples
+
+You can see full React template
+[here](https://github.com/jalal246/dflex-react-draggable-starter).
+
+Contributes feel free to apply PR for another frameworks.
+
 ## Test
@@ -55,0 +62,0 @@

src/Draggable.js

@@ -1,32 +0,5 @@
-/* eslint-disable no-underscore-dangle */
-
 import store from "./DraggableStoreImp";
+import AbstractDraggable from "./AbstractDraggable";
 
-const DRAGGED_ELM = "draggedElm";
-
 /**
- * Style that will be added to dragged element.
- *
- * @static
- * @property draggedStyleProps,
- * @type {Array}
- * @readonly
- * @memberof Draggable
- */
-const draggedStyleProps = [
-  {
-    prop: "pointerEvents",
-    value: "none",
-  },
-  {
-    prop: "zIndex",
-    value: "1",
-  },
-  {
-    prop: "transition",
-    value: `opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s`,
-  },
-];
-
-/**
  * Draggable element.
@@ -36,3 +9,3 @@ *
  */
-class Draggable {
+class Draggable extends AbstractDraggable {
   /**
@@ -48,89 +21,9 @@ * Creates an instance of Draggable.
    */
-  constructor(elementId, { x: initX, y: initY }) {
+  constructor(elementId, clickCoordinates) {
     const element = store.getElmById(elementId);
 
-    /**
-     * Assign instance for dragged.
-     */
-    this[DRAGGED_ELM] = element;
-
-    const {
-      translateX,
-      translateY,
-      elm: { style: draggedStyle },
-    } = this[DRAGGED_ELM];
-
-    this.draggedStyle = draggedStyle;
-
-    /**
-     * When dragging start, element shouldn't jump from its translate. So, we
-     * calculate offset that make translate X,Y start from zero:
-     *  goToX = x + this.offsetX.
-     *  goToY = y + this.offsetY.
-     *
-     * goToX and goToY both should be zero with first click. Starts with simple
-     * equating: initX = X. Taking into considerations translate value.
-     *
-     */
-    this.offsetX = -initX + translateX;
-    this.offsetY = -initY + translateY;
-
-    this.goToX = 0;
-    this.goToY = 0;
-
-    this.setDragged(true);
+    super(element, clickCoordinates);
   }
-
-  /**
-   * Triggers twice. Once when constructor is initiated, the other when drag is
-   * ended. It adds/removes style.
-   *
-   * @param {boolean} isActive - is dragged operation active or it is ended.
-   * @memberof Draggable
-   */
-  setDragged(isActive) {
-    if (isActive) {
-      draggedStyleProps.forEach(({ prop, value }) => {
-        this.draggedStyle[prop] = value;
-      });
-
-      return;
-    }
-
-    /**
-     * Not active: end of dragging.
-     */
-    this.draggedStyle.pointerEvents = null;
-
-    this[DRAGGED_ELM].seTranslate(this.goToX, this.goToY);
-  }
-
-  end() {
-    this.setDragged(false);
-  }
-
-  /**
-   * Executes dragging by applying transform.
-   * Writes to draggedElmCurrentOffset in Transform class.
-   * Set values to isDragged flags.
-   *
-   * @param {number} x - mouse x coordinates
-   * @param {number} y - mouse y coordinates
-   * @memberof Draggable
-   */
-  dragAt(x, y) {
-    /**
-     * Calculates translate coordinates.
-     *
-     * Indicates dragged y-transformation that's will be updated during the
-     * dropping process. Updating Y immediately will effect calculations in
-     * transform, that's why it is updated when dragging is done.
-     */
-    this.goToX = x + this.offsetX;
-    this.goToY = y + this.offsetY;
-
-    this.draggedStyle.transform = `translate(${this.goToX}px,${this.goToY}px)`;
-  }
 }
 
 export default Draggable;

src/DraggableStoreImp.js

@@ -5,4 +5,18 @@ import AbstractCoreInstance from "@dflex/core-instance/src/AbstractCoreInstance";
 class DraggableStoreImp extends AbstractStore {
+  /**
+   * Register element for Draggable store
+   *
+   * @param {Object} elmInstance
+   * @param {string} elmInstance.id
+   * @param {node} elmInstance.element
+   * @memberof DraggableStoreImp
+   */
   register(elmInstance) {
-    super.register(elmInstance, AbstractCoreInstance);
+    super.register(
+      Object.assign(elmInstance, {
+        translateY: 0,
+        translateX: 0,
+      }),
+      AbstractCoreInstance
+    );
   }
@@ -9,0 +23,0 @@ }

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

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

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

69433

increased by9.67%

Number of package files

11

increased by10%

Lines of code

214

increased by26.63%

Number of lines in readme file

66

increased by11.86%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes