@dflex/draggable - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/dflexDraggable.min.cjs.js

@@ -1,2 +0,2 @@
-var t=function t(e){var r=e.element,n=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}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=r,Object.assign(this,n)},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 r=t.id;this.registry[r]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(t.prototype,e),t}();function r(t){return(r="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 n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,r){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,r){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=c(t)););return t}(t,e);if(n){var o=Object.getOwnPropertyDescriptor(n,e);return o.get?o.get.call(r):o.value}})(t,e,r||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"!==r(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 c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var u=new(function(r){!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 u,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=c(f);if(l){var r=c(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return a(this,t)});function p(){return n(this,p),s.apply(this,arguments)}return(u=[{key:"register",value:function(e){o(c(p.prototype),"register",this).call(this,Object.assign(e,{translateY:0,translateX:0}),t)}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(p.prototype,u),p}()),f=function(){function t(e,r){var n=r.x,o=r.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,a=i.translateX,c=i.translateY,u=i.element.style;this.draggedStyle=u,this.outerOffsetX=-n+a,this.outerOffsetY=-o+c,this.tempTranslate={x:0,y:0},this.draggedStyleProps=[{prop:"zIndex",value:"99"}],this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?this.draggedStyleProps.forEach(function(t){var r=t.prop,n=t.value;e.draggedStyle[r]=n}):this.draggedStyleProps.forEach(function(t){var r=t.prop;e.draggedStyle[r]=null})}},{key:"translate",value:function(t,e){this.tempTranslate.x=t+this.outerOffsetX,this.tempTranslate.y=e+this.outerOffsetY,this.draggedStyle.transform="translate(".concat(this.tempTranslate.x,"px,").concat(this.tempTranslate.y,"px)")}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(t.prototype,e),t}();function l(t){return(l="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 s(t,e){return(s=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function p(t,e){return!e||"object"!==l(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 y(t){return(y=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&&s(t,e)}(i,f);var e,r,n,o=(r=i,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,e=y(r);if(n){var o=y(this).constructor;t=Reflect.construct(e,arguments,o)}else t=e.apply(this,arguments);return p(this,t)});function i(t,e,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i);var n=u.getElmById(t);return o.call(this,n,e,r)}return(e=[{key:"dragAt",value:function(t,e){this.translate(t,e),this.draggedElm.translateX=this.tempTranslate.x,this.draggedElm.translateY=this.tempTranslate.y}},{key:"endDragging",value:function(){this.setDragged(!1)}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(i.prototype,e),i}();exports.Draggable=h,exports.store=u;
+var t=function t(e){var r=e.element,n=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},a=Object.keys(t);for(n=0;n<a.length;n++)r=a[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);for(n=0;n<a.length;n++)r=a[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}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=r,Object.assign(this,n)},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 r=t.id;this.registry[r]="function"==typeof e?new e(t):t}},{key:"getElmById",value:function(t){return this.registry[t]}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(t.prototype,e),t}();function r(t){return(r="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 n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e,r){return(o="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,r){var n=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=u(t)););return t}(t,e);if(n){var o=Object.getOwnPropertyDescriptor(n,e);return o.get?o.get.call(r):o.value}})(t,e,r||t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(t,e){return!e||"object"!==r(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=new(function(r){!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&&a(t,e)}(y,e);var c,f,l,s=(f=y,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 r=u(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return i(this,t)});function y(){return n(this,y),s.apply(this,arguments)}return(c=[{key:"register",value:function(e){o(u(y.prototype),"register",this).call(this,Object.assign(e,{translateY:0,translateX:0}),t)}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(y.prototype,c),y}()),f=[{prop:"zIndex",dragValue:"99",afterDragValue:null}],l=function(){function t(e,r){var n=r.x,o=r.y;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.draggedElm=e;var a=this.draggedElm,i=a.translateX,u=a.translateY,c=a.element.style;this.draggedStyleRef=c,this.outerOffsetX=-n+i,this.outerOffsetY=-o+u,this.tempTranslate={x:0,y:0},this.draggedStyle=f,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?this.draggedStyle.forEach(function(t){var r=t.prop,n=t.dragValue;e.draggedStyleRef[r]=n}):this.draggedStyle.forEach(function(t){var r=t.prop,n=t.afterDragValue;e.draggedStyleRef[r]=n})}},{key:"translate",value:function(t,e){this.tempTranslate.x=t+this.outerOffsetX,this.tempTranslate.y=e+this.outerOffsetY,this.draggedStyleRef.transform="translate(".concat(this.tempTranslate.x,"px,").concat(this.tempTranslate.y,"px)")}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(t.prototype,e),t}();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 y(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function p(t,e){return(p=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function h(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 g(t){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var b=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)}(a,l);var e,r,n,o=(r=a,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,e=g(r);if(n){var o=g(this).constructor;t=Reflect.construct(e,arguments,o)}else t=e.apply(this,arguments);return h(this,t)});function a(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};y(this,a);var n=c.getElmById(t);return o.call(this,n,e,r)}return(e=[{key:"dragAt",value:function(t,e){this.translate(t,e),this.draggedElm.translateX=this.tempTranslate.x,this.draggedElm.translateY=this.tempTranslate.y}},{key:"endDragging",value:function(){this.setDragged(!1)}}])&&function(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}(a.prototype,e),a}();exports.Draggable=b,exports.store=c;
 //# 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 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=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=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,c,f,l=(c=s,f=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(c);if(f){var n=u(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function s(){return r(this,s),l.apply(this,arguments)}return(n=[{key:"register",value:function(t){o(u(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}()));function f(t){return(f="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 l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!==f(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 p(t){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}var y=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&&l(t,e)}(i,t);var e,n,r,o=(n=i,r=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=p(n);if(r){var o=p(this).constructor;t=Reflect.construct(e,arguments,o)}else t=e.apply(this,arguments);return s(this,t)});function i(t,e,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i);var r=c.getElmById(t);return o.call(this,r,e,n)}return(e=[{key:"dragAt",value:function(t,e){this.translate(t,e),this.draggedElm.translateX=this.tempTranslate.x,this.draggedElm.translateY=this.tempTranslate.y}},{key:"endDragging",value:function(){this.setDragged(!1)}}])&&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)}}(i.prototype,e),i}(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,a=i.translateX,u=i.translateY,c=i.element.style;this.draggedStyle=c,this.outerOffsetX=-r+a,this.outerOffsetY=-o+u,this.tempTranslate={x:0,y:0},this.draggedStyleProps=[{prop:"zIndex",value:"99"}],this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?this.draggedStyleProps.forEach(function(t){var n=t.prop,r=t.value;e.draggedStyle[n]=r}):this.draggedStyleProps.forEach(function(t){var n=t.prop;e.draggedStyle[n]=null})}},{key:"translate",value:function(t,e){this.tempTranslate.x=t+this.outerOffsetX,this.tempTranslate.y=e+this.outerOffsetY,this.draggedStyle.transform="translate(".concat(this.tempTranslate.x,"px,").concat(this.tempTranslate.y,"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=y,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 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=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,c,l=(u=s,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 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}())),c=[{prop:"zIndex",dragValue:"99",afterDragValue:null}];function l(t){return(l="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 s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function y(t,e){return(y=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function p(t,e){return!e||"object"!==l(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 g(t){return(g=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&&y(t,e)}(i,t);var e,n,r,o=(n=i,r=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=g(n);if(r){var o=g(this).constructor;t=Reflect.construct(e,arguments,o)}else t=e.apply(this,arguments);return p(this,t)});function i(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};s(this,i);var r=u.getElmById(t);return o.call(this,r,e,n)}return(e=[{key:"dragAt",value:function(t,e){this.translate(t,e),this.draggedElm.translateX=this.tempTranslate.x,this.draggedElm.translateY=this.tempTranslate.y}},{key:"endDragging",value:function(){this.setDragged(!1)}}])&&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)}}(i.prototype,e),i}(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,a=i.translateX,f=i.translateY,u=i.element.style;this.draggedStyleRef=u,this.outerOffsetX=-r+a,this.outerOffsetY=-o+f,this.tempTranslate={x:0,y:0},this.draggedStyle=c,this.setDragged(!0)}var e;return(e=[{key:"setDragged",value:function(t){var e=this;t?this.draggedStyle.forEach(function(t){var n=t.prop,r=t.dragValue;e.draggedStyleRef[n]=r}):this.draggedStyle.forEach(function(t){var n=t.prop,r=t.afterDragValue;e.draggedStyleRef[n]=r})}},{key:"translate",value:function(t,e){this.tempTranslate.x=t+this.outerOffsetX,this.tempTranslate.y=e+this.outerOffsetY,this.draggedStyleRef.transform="translate(".concat(this.tempTranslate.x,"px,").concat(this.tempTranslate.y,"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=u});
 //# sourceMappingURL=dflexDraggable.min.umd.js.map

package.json

 {
   "name": "@dflex/draggable",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "main": "dist/dflexDraggable.min.cjs.js",
@@ -41,3 +41,3 @@ "umd:main": "dist/dflexDraggable.min.umd",
   },
-  "gitHead": "10574eb2aa2169be0d40a122ca5d43ae5bad54a6"
+  "gitHead": "be30682e6007ea793dee2c80bcc2e587edab181e"
 }

readme.md

@@ -5,17 +5,23 @@ # @dflex/draggable
 
-```bash
-npm install @dflex/draggable
-```
+DFlex draggable is the simplest solution to create JavaScript draggable
+elements. No need for a special tutorial and thinking about implementation
+complexity or even migration to different technologies for different frameworks.
+It can be used with any app you have whether it is React, Vue, Angular or Svelte.
 
 <p align="center">
     <img
-     src="https://raw.githubusercontent.com/jalal246/dflex/master/packages/draggable/img/draggable.gif" 
+     src="https://raw.githubusercontent.com/jalal246/dflex/master/packages/draggable/img/draggable.gif"
      alt="show how draggable works" />
 </p>
 
-DFlex draggable is the simplest solution to create JavaScript draggable
-elements. No need for a special tutorial and thinking about implementation
-complexity or even migration to different technologies for different frameworks.
-It can be used with any app you have whether it is React, Vue, Angular or Svelte.s
+## Documentation
 
+Visit DFlex site for more <https://jalal246.github.io/dflex/> and to see live examples with the full code.
+
+## Installation
+
+```bash
+npm install @dflex/draggable
+```
+
 ## API
@@ -35,5 +41,5 @@
 
-### Draggable instance
+### Draggable Instance
 
-Create draggable instance `onmousedown`:
+Create draggable instance with `onmousedown`handler
 
@@ -44,4 +50,6 @@ ```ts
 
-Move element `onmousemove`
+### Movement
 
+Move the element with `onmousemove` handler
+
 ```ts
@@ -51,4 +59,6 @@ draggable.dragAt(event.clientX, event.clientY);
 
-End Dragging `onmouseup`
+### End Dragging
 
+You can end dragging with`onmouseup` handler
+
 ```ts
@@ -58,4 +68,66 @@ draggable.endDragging();
 
-#### Examples
+### Add Custom Style
 
+While you can add style, classes related to drag since you trigger `dragAt` and `endDragging`.
+You can also control the few style properties that Draggable use when dragging.
+
+When create draggable Instance you can use `draggedStyle: Array<draggedStyleObj>`
+
+```ts
+draggedStyleObj: {
+  prop: string;
+  dragValue: string;
+  afterDragValue?: string;
+}
+```
+
+Default value for `draggedStyle`:
+
+```js
+const draggedStyle = [
+  {
+    prop: "zIndex",
+    dragValue: "99",
+    afterDragValue: null,
+  },
+];
+```
+
+You can change it after creating dragged instance. The following example
+will change background color `red` during the drag and `purple` after finish dragging.
+
+```js
+draggable.draggedStyle = [
+  {
+    prop: "zIndex",
+    dragValue: "99",
+    afterDragValue: null,
+  },
+  {
+    prop: "pointerEvents",
+    dragValue: "pointer",
+    afterDragValue: null,
+  },
+  {
+    prop: "background",
+    dragValue: "red",
+    afterDragValue: "purple",
+  },
+];
+```
+
+## Key points
+
+- You can add strictly draggable, moving only horizontal or vertical by yourself
+  because you control dragging coordinations.
+
+- You can control the clickable area, simply because it's a mouse event. Could
+  be on the entire element or a small button of the element. It's up to you.
+
+- You know when the dragging is going to start and end without adding additional API functions.
+
+- It can be nested dragging. Related to a list of elements or just one element It doesn't matter. It is always the same.
+
+### Implementations
+
 - [Full React example](https://github.com/jalal246/dflex/tree/master/packages/draggable/playgrounds/dflex-react-draggable)
@@ -62,0 +134,0 @@

src/AbstractDraggable.js

 import { DRAGGED_ELM } from "../constants.json";
 
+/** @type  { prop: string, dragValue: string, afterDragValue:? string }[]  */
+const draggedStyleProps = [
+  {
+    prop: "zIndex",
+    dragValue: "99",
+    afterDragValue: null,
+  },
+];
+
 /**
@@ -8,2 +17,3 @@ * AbstractDraggable element.
  */
+
 class AbstractDraggable {
@@ -33,3 +43,3 @@ /**
 
-    this.draggedStyle = draggedStyle;
+    this.draggedStyleRef = draggedStyle;
 
@@ -54,8 +64,3 @@ /**
 
-    this.draggedStyleProps = [
-      {
-        prop: "zIndex",
-        value: "99",
-      },
-    ];
+    this.draggedStyle = draggedStyleProps;
 
@@ -74,14 +79,12 @@ this.setDragged(true);
     if (isActive) {
-      this.draggedStyleProps.forEach(({ prop, value }) => {
-        this.draggedStyle[prop] = value;
+      this.draggedStyle.forEach(({ prop, dragValue }) => {
+        this.draggedStyleRef[prop] = dragValue;
       });
-
       return;
     }
-
     /**
      * Not active: end of dragging.
      */
-    this.draggedStyleProps.forEach(({ prop }) => {
-      this.draggedStyle[prop] = null;
+    this.draggedStyle.forEach(({ prop, afterDragValue }) => {
+      this.draggedStyleRef[prop] = afterDragValue;
     });
@@ -110,3 +113,3 @@ }
 
-    this.draggedStyle.transform = `translate(${this.tempTranslate.x}px,${this.tempTranslate.y}px)`;
+    this.draggedStyleRef.transform = `translate(${this.tempTranslate.x}px,${this.tempTranslate.y}px)`;
   }
@@ -113,0 +116,0 @@ }

src/Draggable.js

@@ -21,3 +21,3 @@ import store from "./DraggableStoreImp";
    */
-  constructor(elementId, clickCoordinates, opts) {
+  constructor(elementId, clickCoordinates, opts = {}) {
     const element = store.getElmById(elementId);
@@ -24,0 +24,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

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

73739

increased by3.86%

Lines of code

212

increased by1.92%

Number of lines in readme file

149

increased by93.51%

No dependency changes