@studiometa/js-toolkit 2.0.0-beta.5 → 2.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Base/index.d.ts +27 -1
- package/Base/index.js +98 -42
- package/Base/managers/EventsManager.d.ts +3 -1
- package/Base/managers/EventsManager.js +6 -2
- package/Base/managers/OptionsManager.d.ts +2 -0
- package/Base/managers/RefsManager.d.ts +2 -0
- package/Base/managers/RefsManager.js +5 -0
- package/Base/managers/ServicesManager.d.ts +29 -4
- package/Base/managers/ServicesManager.js +6 -2
- package/README.md +13 -70
- package/decorators/index.d.ts +8 -9
- package/decorators/index.js +8 -9
- package/decorators/withBreakpointObserver.js +2 -2
- package/decorators/withDrag.js +8 -2
- package/decorators/withIntersectionObserver.js +4 -3
- package/decorators/withMountWhenInView.js +7 -4
- package/decorators/withScrolledInView.d.ts +4 -1
- package/decorators/withScrolledInView.js +56 -39
- package/decorators/withVue2.js +2 -2
- package/helpers/index.d.ts +4 -5
- package/helpers/index.js +4 -5
- package/index.d.ts +4 -21
- package/index.js +4 -5
- package/index.modern.js +1 -1
- package/index.umd.js +1 -1
- package/package.json +1 -1
- package/services/Service.d.ts +22 -17
- package/services/Service.js +12 -7
- package/services/drag.d.ts +4 -18
- package/services/drag.js +81 -104
- package/services/index.d.ts +13 -10
- package/services/index.js +7 -8
- package/services/key.d.ts +4 -13
- package/services/key.js +55 -56
- package/services/load.d.ts +3 -13
- package/services/load.js +32 -26
- package/services/pointer.d.ts +4 -13
- package/services/pointer.js +61 -64
- package/services/raf.d.ts +3 -13
- package/services/raf.js +22 -25
- package/services/resize.d.ts +3 -13
- package/services/resize.js +48 -30
- package/services/scroll.d.ts +3 -13
- package/services/scroll.js +65 -61
- package/utils/collide/index.d.ts +6 -7
- package/utils/collide/index.js +6 -7
- package/utils/css/index.d.ts +4 -5
- package/utils/css/index.js +6 -5
- package/utils/css/transition.js +2 -2
- package/utils/history.js +2 -2
- package/utils/index.d.ts +11 -35
- package/utils/index.js +11 -17
- package/utils/math/ease.d.ts +78 -0
- package/utils/math/ease.js +41 -0
- package/utils/math/index.d.ts +8 -8
- package/utils/math/index.js +8 -8
- package/utils/object/getAllProperties.js +1 -1
- package/utils/object/index.d.ts +3 -4
- package/utils/object/index.js +3 -4
- package/utils/string/index.d.ts +10 -11
- package/utils/string/index.js +10 -11
package/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).Base={})}(this,function(e){function t(){return t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t.apply(this,arguments)}var i=0;function r(e){return"__private_"+i+++"_"+e}function s(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}function n(e,t){return"function"==typeof e[t]}function o(e,t){void 0===t&&(t=document);var i='[data-component="'+e+'"]',r=[];try{r=Array.from(t.querySelectorAll(i))}catch(e){}return 0===r.length&&(r=Array.from(t.querySelectorAll(e))),r}class a{get registeredNames(){return Object.keys(this).filter(e=>!e.startsWith("__"))}constructor(e,t,i,r){Object.defineProperties(this,{__base:{enumerable:!1,writable:!1,value:e},__element:{enumerable:!1,writable:!1,value:t},__components:{enumerable:!1,writable:!1,value:i},__eventsManager:{enumerable:!1,writable:!1,value:r}})}registerAll(){Object.entries(this.__components).forEach(e=>{var[t,i]=e;return this.__register(t,i)})}__register(e,t){Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>{var i=o(e,this.__element);return 0===i.length?[]:i.map(i=>this.__getChild(i,t,e)).filter(e=>"terminated"!==e)}})}__getChild(e,t,i){if(e.__base__)return e.__base__;if("$isBase"in t){var r=new t(e);return Object.defineProperty(r,"$parent",{get:()=>this.__base}),r}return t(this.__base).then(t=>{var r;return this.__getChild(e,null!=(r=t.default)?r:t,i)})}mountAll(){this.__triggerHookForAll("$mount")}updateAll(){this.__triggerHookForAll("$update")}destroyAll(){this.__triggerHookForAll("$destroy")}__triggerHookForAll(e){this.registeredNames.forEach(t=>{this[t].forEach(i=>{i instanceof Promise?i.then(i=>this.__triggerHook(e,i,t)):this.__triggerHook(e,i,t)})})}__triggerHook(e,t,i){"$update"!==e||t.$isMounted||(e="$mount"),"$update"!==e&&"$destroy"!==e||this.__eventsManager.unbindChild(i,t),"$update"!==e&&"$mount"!==e||this.__eventsManager.bindChild(i,t),t[e]()}}class h{constructor(e,t,i,r){Object.defineProperties(this,{__element:{enumerable:!1,writable:!1,value:t},__refs:{enumerable:!1,writable:!1,value:i},__base:{enumerable:!1,writable:!1,value:e},__eventsManager:{enumerable:!1,writable:!1,value:r}})}registerAll(){this.__refs.forEach(e=>this.__register(e))}unregisterAll(){this.__refs.forEach(e=>this.__unregister(e))}__register(e){var t=e.endsWith("[]"),i=h.normalizeRefName(e),r=Array.from(this.__element.querySelectorAll('[data-ref="'+e+'"]')).filter(e=>this.__filterRefsBelongingToInstance(e));!t&&r.length>1&&console.warn("["+this.__base.$options.name+"]",'The "'+e+'" ref has been found multiple times.',"Did you forgot to add the `[]` suffix to its name?"),this.__eventsManager.bindRef(e,r),Object.defineProperty(this,i,{value:t||r.length>1?r:r[0],enumerable:!0,configurable:!0})}__unregister(e){var t=h.normalizeRefName(e),i=Array.isArray(this[t])?this[t]:[this[t]];this.__eventsManager.unbindRef(e,i)}static normalizeRefName(e){return e.endsWith("[]")?e.replace(/\[\]$/,""):e}__filterRefsBelongingToInstance(e){for(var t=e.parentElement;t&&void 0===t.dataset.component;)t=t.parentElement;return null===t||t===this.__element}}class d{constructor(){this.callbacks=new Map,this.isInit=!1}get props(){throw new Error("The `props` getter must be implemented.")}init(){throw new Error("The `init` method must be implemented.")}kill(){throw new Error("The `kill` method must be implemented.")}add(e,t){if(this.has(e))throw new Error("A callback with the key `"+e+"` has already been registered.");return 0!==this.callbacks.size||this.isInit||(this.init(),this.isInit=!0),this.callbacks.set(e,t),this}has(e){return this.callbacks.has(e)}get(e){return this.callbacks.get(e)}remove(e){return this.callbacks.delete(e),0===this.callbacks.size&&this.isInit&&(this.kill(),this.isInit=!1),this}trigger(){var e=[].slice.call(arguments);return this.callbacks.forEach(function(t){t(...e)}),this}}function l(e){return"undefined"!=typeof TouchEvent&&e instanceof TouchEvent}class u extends d{constructor(){super(...arguments),this.isDown=!1,this.y=window.innerHeight/2,this.yLast=window.innerHeight/2,this.x=window.innerWidth/2,this.xLast=window.innerWidth/2,this.hasRaf=!1}init(){document.documentElement.addEventListener("mouseenter",this,{once:!0,capture:!0});var e={passive:!0,capture:!0};return document.addEventListener("mousemove",this,e),document.addEventListener("touchmove",this,e),document.addEventListener("mousedown",this,e),document.addEventListener("touchstart",this,e),document.addEventListener("mouseup",this,e),document.addEventListener("touchend",this,e),this}handleEvent(e){switch(e.type){case"mouseenter":case"mousemove":case"touchmove":this.handler(e);break;case"mousedown":case"touchstart":this.downHandler();break;case"mouseup":case"touchend":this.upHandler()}}kill(){return document.removeEventListener("mousemove",this),document.removeEventListener("touchmove",this),document.removeEventListener("mousedown",this),document.removeEventListener("touchstart",this),document.removeEventListener("mouseup",this),document.removeEventListener("touchend",this),this}handler(e){this.updateValues(e),this.trigger(this.props)}downHandler(){this.isDown=!0,this.trigger(this.props)}upHandler(){this.isDown=!1,this.trigger(this.props)}updateValues(e){var t,i;this.event=e,this.yLast=this.y,this.xLast=this.x;var r=l(e)?null==(t=e.touches[0])?void 0:t.clientY:e.clientY;r!==this.y&&(this.y=r);var s=l(e)?null==(i=e.touches[0])?void 0:i.clientX:e.clientX;s!==this.x&&(this.x=s)}get props(){return{event:this.event,isDown:this.isDown,x:this.x,y:this.y,changed:{x:this.x!==this.xLast,y:this.y!==this.yLast},last:{x:this.xLast,y:this.yLast},delta:{x:this.x-this.xLast,y:this.y-this.yLast},progress:{x:this.x/window.innerWidth,y:this.y/window.innerHeight},max:{x:window.innerWidth,y:window.innerHeight}}}}var c=null;function p(){return c||(c=new u),{add:c.add.bind(c),remove:c.remove.bind(c),has:c.has.bind(c),props:()=>c.props}}class _ extends d{constructor(){super(),this.isTicking=!1,this.id=0,this.raf="undefined"!=typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout,this.cancelRaf="undefined"!=typeof window&&window.cancelAnimationFrame?window.cancelAnimationFrame.bind(window):clearTimeout,this.loop=this.loop.bind(this)}init(){return this.isTicking=!0,this.loop(),this}loop(){this.trigger(this.props),this.isTicking&&(this.id=this.raf(this.loop))}kill(){return this.cancelRaf(this.id),this.isTicking=!1,this}get props(){return{time:window.performance.now()}}}var m=null;function v(){return m||(m=new _),{add:m.add.bind(m),remove:m.remove.bind(m),has:m.has.bind(m),props:function(){return m.props}}}function f(e,t){var i;return void 0===t&&(t=300),function(){clearTimeout(i),i=setTimeout(()=>{e(...[].slice.call(arguments))},t)}}class g extends d{init(){return this.handler=f(()=>{this.trigger(this.props)}).bind(this),window.addEventListener("resize",this.handler),this}kill(){return window.removeEventListener("resize",this.handler),this}get props(){var e={width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/window.innerHeight,orientation:"square"};return e.ratio>1&&(e.orientation="landscape"),e.ratio<1&&(e.orientation="portrait"),this.breakpointElement&&(e.breakpoint=this.breakpoint,e.breakpoints=this.breakpoints),e}get breakpointElement(){return document.querySelector("[data-breakpoint]")||null}get breakpoint(){return window.getComputedStyle(this.breakpointElement,"::before").getPropertyValue("content").replace(/"/g,"")}get breakpoints(){return window.getComputedStyle(this.breakpointElement,"::after").getPropertyValue("content").replace(/"/g,"").split(",")}}var b=null;function y(){return b||(b=new g),{add:b.add.bind(b),remove:b.remove.bind(b),has:b.has.bind(b),props:()=>b.props}}class w extends d{constructor(){super(...arguments),this.y=window.pageYOffset,this.yLast=window.pageYOffset,this.x=window.pageXOffset,this.xLast=window.pageXOffset}init(){return document.addEventListener("scroll",this,{passive:!0,capture:!0}),this}get debouncedHandler(){var e=f(()=>{this.trigger(this.props)},0);return Object.defineProperty(this,"debouncedHandler",{value:e}),e}handleEvent(){this.trigger(this.props),this.debouncedHandler()}kill(){return document.removeEventListener("scroll",this),this}get props(){return this.yLast=this.y,this.xLast=this.x,window.pageYOffset!==this.y&&(this.y=window.pageYOffset),window.pageXOffset!==this.x&&(this.x=window.pageXOffset),{x:this.x,y:this.y,changed:{x:this.x!==this.xLast,y:this.y!==this.yLast},last:{x:this.xLast,y:this.yLast},delta:{x:this.x-this.xLast,y:this.y-this.yLast},progress:{x:0===this.max.x?1:this.x/this.max.x,y:0===this.max.y?1:this.y/this.max.y},direction:{x:this.x>this.xLast?"RIGHT":this.x<this.xLast?"LEFT":"NONE",y:this.y>this.yLast?"DOWN":this.y<this.yLast?"UP":"NONE"},max:this.max}}get max(){return{x:(document.scrollingElement||document.body).scrollWidth-window.innerWidth,y:(document.scrollingElement||document.body).scrollHeight-window.innerHeight}}}var $=null;function E(){return $||($=new w),{add:$.add.bind($),remove:$.remove.bind($),has:$.has.bind($),props:()=>$.props}}var x={ENTER:13,SPACE:32,TAB:9,ESC:27,LEFT:37,UP:38,RIGHT:39,DOWN:40};class O extends d{constructor(){super(...arguments),this.event={},this.triggered=0,this.previousEvent={}}init(){return this.handler=e=>{this.event=e,this.trigger(this.props)},document.addEventListener("keydown",this.handler,{passive:!1}),document.addEventListener("keyup",this.handler,{passive:!1}),this}kill(){return document.removeEventListener("keydown",this.handler),document.removeEventListener("keyup",this.handler),this}get props(){var e=Object.entries(x).reduce((e,t)=>{var[i,r]=t;return e[i]=r===this.event.keyCode,e},{});return this.previousEvent.type||(this.triggered=0),"keydown"===this.event.type&&"keydown"===this.previousEvent.type?this.triggered+=1:this.triggered=1,this.previousEvent=this.event,t({event:this.event,triggered:this.triggered,direction:"keydown"===this.event.type?"down":"up",isUp:"keyup"===this.event.type,isDown:"keydown"===this.event.type},e)}}var k=null;function A(){return k||(k=new O),{add:k.add.bind(k),remove:k.remove.bind(k),has:k.has.bind(k),props:()=>k.props}}class L extends d{init(){return this.handler=()=>{this.trigger(this.props)},window.addEventListener("load",this.handler),this}kill(){return window.removeEventListener("load",this.handler),this}get props(){return{}}}var M=null;function j(){return M||(M=new L),{add:M.add.bind(M),remove:M.remove.bind(M),has:M.has.bind(M),props:function(){return M.props}}}var N={scrolled:E,resized:y,ticked:v,moved:p,keyed:A,loaded:j},H=Object.keys(N);class T{get __services(){return t({},this.__customServices,N)}constructor(e){this.__customServices={},Object.defineProperties(this,{__base:{enumerable:!1,writable:!1,value:e}})}has(e){if(!n(this.__base,e)&&!this.__base.__hasEvent(e)||!this.__services[e])return!1;var{has:t}=this.__services[e]();return t(this.__base.$id)}enable(e){if(this.has(e))return this.disable.bind(this,e);if(!n(this.__base,e)&&!this.__base.__hasEvent(e)||!this.__services[e])return function(){};var{add:t}=this.__services[e](),i=this;return t(this.__base.$id,function(){i.__base.__callMethod(e,...[].slice.call(arguments))}),this.disable.bind(this,e)}enableAll(){return Object.keys(this.__services).map(e=>this.enable(e))}disableAll(){Object.keys(this.__services).forEach(e=>{this.disable(e)})}disable(e){if(this.__services[e]){var{remove:t}=this.__services[e]();t(this.__base.$id)}}toggle(e,t){void 0!==t?(t&&!this.has(e)&&this.enable(e),!t&&this.has(e)&&this.disable(e)):this.has(e)?this.disable(e):this.enable(e)}register(e,t){this.__customServices[e]=t}unregister(e){if(H.includes(e))throw new Error("[ServicesManager] The `"+e+"` core service can not be unregistered.");delete this.__customServices[e]}}function P(e,t,i){void 0===t&&(t=[]),void 0===i&&(i=null);var r=Object.getPrototypeOf(e);if(r===Object.prototype)return t;var s=Object.getOwnPropertyNames(r);return"function"==typeof i&&(s=s.filter(e=>i(e,r))),s=s.map(e=>[e,r]).reduce((e,t)=>[...e,t],t),P(r,s,i)}class B{constructor(e,t){this.__methodsCache=new Map,this.__rootElementHandler={handleEvent:e=>{var t=B.normalizeName(e.type);this.__base["on"+t](e)}},this.__refsHandler={handleEvent:e=>{var t=e.currentTarget,i=h.normalizeRefName(t.dataset.ref),r="on"+B.normalizeName(i)+B.normalizeName(e.type),s=0;Array.isArray(this.__base.$refs[i])&&(s=this.__base.$refs[i].indexOf(t)),this.__base[r](e,s)}},this.__childrenHandler={handleEvent:e=>{var t,i=e.currentTarget.__base__,r=0,s=this.__base.$children;s.registeredNames.find(e=>!!s[e].includes(i)&&(t=e,r=s[e].indexOf(i),!0));var n="on"+B.normalizeName(t)+B.normalizeName(e.type),o=Array.isArray(e.detail)?e.detail:[];this.__base[n](...o,r,e)}},Object.defineProperties(this,{__rootElement:{enumerable:!1,writable:!1,value:e},__base:{enumerable:!1,writable:!1,value:t},__methodsCache:{enumerable:!1,writable:!1,value:this.__methodsCache},__rootElementHandler:{enumerable:!1,writable:!1,value:this.__rootElementHandler},__refsHandler:{enumerable:!1,writable:!1,value:this.__refsHandler},__childrenHandler:{enumerable:!1,writable:!1,value:this.__childrenHandler}})}__manageRef(e,t,i){void 0===i&&(i="add");var r=i+"EventListener";this.__getEventMethodsByName(e).forEach(i=>{var s=this.__getEventNameByMethod(i,e);t.forEach(e=>e[r](s,this.__refsHandler))})}bindRef(e,t){this.__manageRef(e,t)}unbindRef(e,t){this.__manageRef(e,t,"remove")}__manageChild(e,t,i){void 0===i&&(i="add");var r="add"===i?"$on":"$off";this.__getEventMethodsByName(e).forEach(i=>{var s=this.__getEventNameByMethod(i,e);t[r](s,this.__childrenHandler)})}bindChild(e,t){this.__manageChild(e,t)}unbindChild(e,t){this.__manageChild(e,t,"remove")}__manageRootElement(e){void 0===e&&(e="add");var t=e+"EventListener";this.__getEventMethodsByName().forEach(e=>{var i=this.__getEventNameByMethod(e);this.__rootElement[t](i,this.__rootElementHandler)})}bindRootElement(){this.__manageRootElement()}unbindRootElement(){this.__manageRootElement("remove")}__getEventNameByMethod(e,t){void 0===t&&(t="");var i=B.normalizeName(t),r=new RegExp("^on"+i+"([A-Z].*)$"),[,s]=e.match(r);return B.normalizeEventName(s)}__getEventMethodsByName(e){void 0===e&&(e="");var t=B.normalizeName(e),i=new RegExp("^on"+t+"[A-Z].*$"),r=i.toString(),s=this.__methodsCache.get(r);return s||(s=Array.from(P(this.__base,[],e=>i.test(e)).reduce((e,t)=>{var[i]=t;return e.add(i)},new Set)),this.__methodsCache.set(r,s)),s}static normalizeName(e){return e.replace(/[A-Z]([A-Z].*)/g,e=>e.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g," ").replace(/(^\w|\s+\w)/g,e=>e.trim().toUpperCase()).trim()}static normalizeEventName(e){return e.replace(/[A-Z]/g,e=>"-"+e.toLowerCase()).replace(/^-/,"")}}var C=function(e){return function(e){return!!e&&"object"==typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===S}(e)}(e)},S="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function I(e,t){return!1!==t.clone&&t.isMergeableObject(e)?V(Array.isArray(e)?[]:{},e,t):e}function R(e,t,i){return e.concat(t).map(function(e){return I(e,i)})}function W(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(t){return e.propertyIsEnumerable(t)}):[]}(e))}function z(e,t){try{return t in e}catch(e){return!1}}function V(e,t,i){(i=i||{}).arrayMerge=i.arrayMerge||R,i.isMergeableObject=i.isMergeableObject||C,i.cloneUnlessOtherwiseSpecified=I;var r=Array.isArray(t);return r===Array.isArray(e)?r?i.arrayMerge(e,t,i):function(e,t,i){var r={};return i.isMergeableObject(e)&&W(e).forEach(function(t){r[t]=I(e[t],i)}),W(t).forEach(function(s){(function(e,t){return z(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,s)||(r[s]=z(e,s)&&i.isMergeableObject(t[s])?function(e,t){if(!t.customMerge)return V;var i=t.customMerge(e);return"function"==typeof i?i:V}(s,i)(e[s],t[s],i):I(t[s],i))}),r}(e,t,i):I(t,i)}V.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce(function(e,i){return V(e,i,t)},{})};var D=V;class F{constructor(e,t,i){var r,s;return this.__values={},this.__defaultValues={String:"",Number:0,Boolean:!1,Array:()=>[],Object:()=>({})},this.name="Base",this.debug=!1,this.log=!1,Object.defineProperties(this,{__element:{enumerable:!1,writable:!1,value:e},__values:{enumerable:!1,writable:!1,value:this.__values},__defaultValues:{enumerable:!1,writable:!1,value:this.__defaultValues}}),this.name=i.name,t.debug={type:Boolean,default:null!=(r=i.debug)&&r},t.log={type:Boolean,default:null!=(s=i.log)&&s},Object.entries(t).forEach(e=>{var[t,i]=e;this.__register(t,i)}),this}__register(e,t){var i=!F.types.includes(t),r=i?t.type:t;if(!F.types.includes(r))throw new Error('The "'+e+'" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.');var s=i?t.default:this.__defaultValues[r.name];if((r===Array||r===Object)&&"function"!=typeof s)throw new Error('The default value for options of type "'+r.name+'" must be returned by a function.');Object.defineProperty(this,e,{get:()=>this.get(e,r,s),set:t=>{this.set(e,r,t,s)},enumerable:!0})}get(e,t,i){var r=F.__getPropertyName(e),s=this.__hasProperty(r);if(t===Boolean){if(i){var n=F.__getPropertyName(e,"No");return!this.__hasProperty(n)}return s||i}var o=this.__element.dataset[r];if(t===Number)return s?Number(o):i;if(t===Array||t===Object){var a=D(i(),s?JSON.parse(o):this.__defaultValues[t.name]());return this.__values[e]||(this.__values[e]=a),this.__values[e]}return s?o:i}set(e,t,i,r){var s=F.__getPropertyName(e);if(i.constructor.name!==t.name){var n=Array.isArray(i)||function(e){return"object"==typeof e&&!!e&&"[object Object]"===e.toString()}(i)?JSON.stringify(i):i;throw new TypeError('The "'+n+'" value for the "'+e+'" option must be of type "'+t.name+'"')}switch(t){case Boolean:if(r){var o=F.__getPropertyName(e,"No");i?delete this.__element.dataset[o]:this.__element.dataset[o]=""}else i?this.__element.dataset[s]="":delete this.__element.dataset[s];break;case Array:case Object:this.__values[e]=i;break;default:this.__element.dataset[s]=i}}__hasProperty(e){return void 0!==this.__element.dataset[e]}static __getPropertyName(e,t){void 0===t&&(t="");var i=e+t;if(F.__propertyNameCache.has(i))return F.__propertyNameCache.get(i);var r="option"+t+e.replace(/^\w/,e=>e.toUpperCase());return F.__propertyNameCache.set(i,r),r}}F.types=[String,Number,Boolean,Array,Object],F.__propertyNameCache=new Map;var Y=0;function q(){}class X{get $root(){if(!this.$parent)return this;for(var e=this.$parent,t=this.$parent;e;)e.$parent||(t=e),e=e.$parent;return t}get __config(){for(var e=Object.getPrototypeOf(this),{config:i}=e.constructor;e.constructor.config&&e.constructor.$isBase;)i=t({},e.constructor.config,i),e.constructor.config.options&&(i.options=t({},e.constructor.config.options,i.options)),e=Object.getPrototypeOf(e);return i}get $services(){var e=this.__services;return this.$emit("get:services",e),e}get $refs(){var e=this.__refs;return this.$emit("get:refs",e),e}get $options(){var e=this.__options;return this.$emit("get:options",e),e}get $children(){var e=this.__children;return this.$emit("get:children",e),e}get $log(){return this.__options.log?window.console.log.bind(window,"["+this.__config.name+"]"):q}get __debug(){return this.__options.debug&&void 0!==window.__DEV__&&window.__DEV__?window.console.log.bind(window,"[debug] ["+this.$id+"]"):q}__callMethod(e){var t=[].slice.call(arguments,1);this.__debug("callMethod",e,...t),"destroyed"===e&&!this.$isMounted||"mounted"===e&&this.$isMounted?this.__debug("not",e,"because the method has already been triggered once."):(this.$emit(e,...t),"function"==typeof this[e]&&(this[e].call(this,...t),this.__debug(e,this,...t)))}__hasEvent(e){var t=this.__eventHandlers.get(e);return t&&t.size>0}constructor(e){if(this.$parent=null,this.$isMounted=!1,this.__eventHandlers=new Map,!e)throw new Error("The root element must be defined.");var{__config:t}=this;if(!t)throw new Error("The `config` static property must be defined.");if(!t.name)throw new Error("The `config.name` property is required.");return this.$id=t.name+"-"+Y,Y+=1,this.$el=e,"__base__"in this.$el||Object.defineProperty(this.$el,"__base__",{get:()=>this,configurable:!0}),this.__options=new F(e,t.options||{},t),this.__services=new T(this),this.__events=new B(e,this),this.__children=new a(this,e,t.components||{},this.__events),this.__refs=new h(this,e,t.refs||[],this.__events),this.__debug("constructor",this),this}$mount(){return this.__debug("$mount"),this.$children.registerAll(),this.$refs.registerAll(),this.__events.bindRootElement(),this.$services.enableAll(),this.$children.mountAll(),this.__callMethod("mounted"),this.$isMounted=!0,this}$update(){return this.__debug("$update"),this.$refs.unregisterAll(),this.$services.disableAll(),this.$children.registerAll(),this.$refs.registerAll(),this.$services.enableAll(),this.$children.updateAll(),this.__callMethod("updated"),this}$destroy(){return this.__debug("$destroy"),this.__events.unbindRootElement(),this.$refs.unregisterAll(),this.$services.disableAll(),this.$children.destroyAll(),this.__callMethod("destroyed"),this.$isMounted=!1,this}$terminate(){this.__debug("$terminate"),this.$destroy(),this.__callMethod("terminated"),Object.defineProperty(this.$el,"__base__",{value:"terminated",configurable:!1,writable:!1})}$on(e,t,i){this.__debug("$on",e,t,i);var r=this.__eventHandlers.get(e);return r||(r=new Set,this.__eventHandlers.set(e,r)),r.add(t),this.$el.addEventListener(e,t,i),()=>{this.$off(e,t,i)}}$off(e,t,i){this.__debug("$off",e,t),this.__eventHandlers.get(e).delete(t),this.$el.removeEventListener(e,t,i)}$emit(e){var t=[].slice.call(arguments,1);this.__debug("$emit",e,t),this.$el.dispatchEvent(new CustomEvent(e,{detail:t}))}static $factory(e){if(!e)throw new Error("The $factory method requires a component’s name or selector to be specified.");return o(e).map(e=>new this(e).$mount())}}function G(e){var{breakpoint:t}=y().props();e.forEach(e=>{var[i,r]=e;i.includes(t)&&!r.$isMounted?setTimeout(()=>r.$mount(),0):!i.includes(t)&&r.$isMounted&&r.$destroy()})}X.$isBase=!0;var U=new WeakMap;function Z(e,t){void 0===t&&(t=y().props().breakpoint);var{activeBreakpoints:i,inactiveBreakpoints:r}=e.$options,s=i&&i.split(" ").includes(t),n=r&&r.split(" ").includes(t);return i&&s||r&&!n?"$mount":"$destroy"}function J(e){var{activeBreakpoints:t,inactiveBreakpoints:i}=e.$options;return Boolean(t||i)}function K(e,t){!function(e){var{activeBreakpoints:t,inactiveBreakpoints:i,name:r}=e.$options;if(t&&i)throw new Error("["+r+"] Incorrect configuration: the `activeBreakpoints` and `inactiveBreakpoints` are not compatible.")}(t);var{add:i,has:r}=y();r(e)||i(e,function(e){var{breakpoint:i}=e,r=Z(t,i);"$destroy"===r&&t.$isMounted?t[r]():"$mount"!==r||t.$isMounted||setTimeout(()=>t[r](),0)})}function Q(e,t,i){if(void 0===i&&(i=.85),i>=1||i<=0)throw new Error("The `factor` parameter must be a number greater than 0 and smaller than 1, `"+i+"` given.");for(var r=t,s=e;Math.abs(r)>.1;)s+=r,r*=i;return s}var ee="drag",te="inertia",ie=0;class re extends d{constructor(e,i){return void 0===i&&(i={}),super(),this.isGrabbing=!1,this.hasInertia=!1,this.x=0,this.y=0,this.delta={x:0,y:0},this.origin={x:0,y:0},this.distance={x:0,y:0},this.final={x:0,y:0},this.options={dampFactor:.85},this.id="drag-"+(ie+=1),this.target=e,this.options=t({},this.options,i),this.pointerHandler=this.pointerHandler.bind(this),this.rafHandler=this.rafHandler.bind(this),this}init(){var e={passive:!0};return this.target.addEventListener("mousedown",this,e),this.target.addEventListener("touchstart",this,e),p().add(this.id,this.pointerHandler),this}kill(){return this.target.removeEventListener("mousemove",this),this.target.removeEventListener("touchmove",this),p().remove(this.id),this}handleEvent(e){var t=e instanceof MouseEvent?e.clientX:e.touches[0].clientX,i=e instanceof MouseEvent?e.clientY:e.touches[0].clientY;this.start(t,i)}start(e,t){this.x=e,this.y=t,this.origin.x=e,this.origin.y=t,this.delta.x=0,this.delta.y=0,this.distance.x=0,this.distance.y=0,this.final.x=e,this.final.y=t,this.mode="start",this.isGrabbing=!0,this.trigger(this.props)}drop(){this.isGrabbing=!1,this.mode="drop",this.hasInertia=!0,this.final.x=Q(this.x,this.delta.x,this.options.dampFactor),this.final.y=Q(this.y,this.delta.y,this.options.dampFactor),this.trigger(this.props),setTimeout(()=>{var e=v();e.remove(this.id),e.add(this.id,this.rafHandler)},0)}stop(){v().remove(this.id),this.hasInertia=!1,this.mode="stop",this.trigger(this.props)}rafHandler(){this.isGrabbing||(this.x+=this.delta.x,this.y+=this.delta.y,this.distance.x=this.x-this.origin.x,this.distance.y=this.y-this.origin.y,this.delta.x*=this.options.dampFactor,this.delta.y*=this.options.dampFactor,this.mode!==te&&(this.mode=te),this.trigger(this.props),Math.abs(this.delta.x)<.1&&Math.abs(this.delta.y)<.1&&this.stop())}pointerHandler(e){this.isGrabbing&&(this.x=e.x,this.y=e.y,this.delta.x=e.delta.x,this.delta.y=e.delta.y,this.final.x=e.x,this.final.y=e.y,this.distance.x=this.x-this.origin.x,this.distance.y=this.y-this.origin.y,this.mode!==ee&&(this.mode=ee),this.trigger(this.props),e.isDown||this.drop())}get props(){return{target:this.target,mode:this.mode,isGrabbing:this.isGrabbing,hasInertia:this.hasInertia,x:this.x,y:this.y,delta:this.delta,origin:this.origin,distance:this.distance,final:this.final}}}var se=new WeakMap;function ne(e,t){var i=se.get(e);return i||(i=new re(e,t),se.set(e,i)),{add:i.add.bind(i),remove:i.remove.bind(i),has:i.has.bind(i),props:()=>i.props}}var oe=["target"];function ae(e,i){var n,o,a,h,d,l,u;return void 0===i&&(i={threshold:[0,1]}),o=r("isVisible"),a=r("observer"),h=n=class extends e{constructor(e){return super(e),Object.defineProperty(this,o,{writable:!0,value:!1}),Object.defineProperty(this,a,{writable:!0,value:void 0}),s(this,a)[a]=new IntersectionObserver(e=>{var t=e.reduce((e,t)=>e||t.isIntersecting,!1);s(this,o)[o]!==t&&(s(this,o)[o]=t,this[t?"$mount":"$destroy"]())},t({},i,this.$options.intersectionObserver)),s(this,a)[a].observe(this.$el),this.$on("terminated",()=>{s(this,a)[a].disconnect()}),this}$mount(){return s(this,o)[o]&&super.$mount(),this}},n.config=t({},e.config||{},{name:(null!=(d=null==e||null==(l=e.config)?void 0:l.name)?d:"")+"WithMountWhenInView",options:t({},(null==e||null==(u=e.config)?void 0:u.options)||{},{intersectionObserver:Object})}),h}function he(e,t,i){return t<i?e<t?t:e>i?i:e:e<i?i:e>t?t:e}function de(e){return he(e,0,1)}function le(e,t){return"string"==typeof e?o(e,t):Array.isArray(e)?e:[e]}e.Base=X,e.createApp=function(e,t){var i,r="complete"===document.readyState;r?i=new e(t).$mount():document.addEventListener("readystatechange",()=>{"complete"===document.readyState&&(i=new e(t).$mount(),r=!0)});var s=new Promise(e=>{document.addEventListener("readystatechange",()=>{"complete"===document.readyState&&setTimeout(()=>e(i),0)})});return function(){return r?Promise.resolve(i):s}},e.importOnInteraction=function(e,t,i,r){var s="string"==typeof i?[i]:i;return new Promise(i=>{var n=le(t,null==r?void 0:r.$el),o={capture:!0,passive:!0,once:!0},a=()=>{(t=>{e().then(e=>{t("default"in e?e.default:e)})})(i)};n.forEach(e=>{s.forEach(t=>{e.addEventListener(t,a,o)})})})},e.importWhenIdle=function(e,t){var i=t=>{e().then(e=>{t("default"in e?e.default:e)})};return new Promise(e=>{var r,s=null!=(r=null==t?void 0:t.timeout)?r:1;"requestIdleCallback"in window?window.requestIdleCallback(()=>{setTimeout(()=>{i(e)},0)},{timeout:null==t?void 0:t.timeout}):setTimeout(()=>{i(e)},s)})},e.importWhenVisible=function(e,t,i,r){return void 0===r&&(r={}),new Promise(s=>{var n=new IntersectionObserver(t=>{t.some(e=>e.isIntersecting)&&setTimeout(()=>{((t,i)=>{e().then(e=>{t("default"in e?e.default:e),n.disconnect()})})(s)},0)},r);le(t,null==i?void 0:i.$el).forEach(e=>n.observe(e))})},e.useDrag=ne,e.useKey=A,e.useLoad=j,e.usePointer=p,e.useRaf=v,e.useResize=y,e.useScroll=E,e.withBreakpointManager=function(e,t){if(!Array.isArray(t))throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");if(t.length<2)throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");var{add:i,props:r}=y();if(!r().breakpoint)throw new Error("The `BreakpointManager` class requires breakpoints to be defined.");return class extends e{constructor(e){return super(e),U.has(this)||U.set(this,function(e,t){return t.map(t=>{var[i,r]=t,s=new r(e.$el);return Object.defineProperty(s,"$parent",{get:()=>e.$parent}),[i,s]})}(this,t)),i("BreakpointManager-"+this.$id,()=>{G(U.get(this))}),this.instances=U.get(this),this}$mount(){return super.$mount(),G(U.get(this)),this}$destroy(){return Array.isArray(U.get(this))&&U.get(this).forEach(e=>{var[,t]=e;t.$destroy()}),super.$destroy()}}},e.withBreakpointObserver=function(e){var i,r,s,n,o;return r=i=class extends e{constructor(e){super(e);var{remove:t,props:i}=y(),{name:r}=this.$options;if(!i().breakpoint)throw new Error("["+r+"] The `BreakpointObserver` class requires breakpoints to be defined.");var s="BreakpointObserver-"+this.$id;return new MutationObserver(e=>{var[i]=e;if("attributes"===i.type&&("data-options"===i.attributeName||i.attributeName.startsWith("data-option-"))){if(!J(this))return this.$mount(),void t(s);K(s,this)}}).observe(this.$el,{attributes:!0}),J(this)?(K(s,this),this):this}$mount(){return J(this)?"$mount"===Z(this)?super.$mount():this:super.$mount()}},i.config=t({},e.config||{},{name:(null!=(s=null==e||null==(n=e.config)?void 0:n.name)?s:"")+"WithBreakpointObserver",options:t({},(null==e||null==(o=e.config)?void 0:o.options)||{},{activeBreakpoints:String,inactiveBreakpoints:String})}),r},e.withDrag=function(e,t){var i=void 0===t?{}:t,{target:r=(e=>e.$el)}=i,s=function(e,t){if(null==e)return{};var i,r,s={},n=Object.keys(e);for(r=0;r<n.length;r++)t.indexOf(i=n[r])>=0||(s[i]=e[i]);return s}(i,oe);return class extends e{constructor(e){super(e),this.$on("mounted",()=>{this.$services.register("dragged",ne.bind(void 0,r.call(this,this),s)),this.$services.enable("dragged")}),this.$on("destroyed",()=>{this.$services.disable("dragged"),this.$services.unregister("dragged")})}}},e.withExtraConfig=function(e,t,i){var r,s;void 0===i&&(i={});var n=D(e.config,t,i);return n.name===e.config.name&&(n.name=e.config.name+"WithExtraConfig"),s=r=class extends e{},r.config=n,s},e.withIntersectionObserver=function(e,i){var r,s,n,o,a;return void 0===i&&(i={threshold:[...new Array(101)].map((e,t)=>t/100)}),s=r=class extends e{constructor(e){if(super(e),!this.intersected||"function"!=typeof this.intersected)throw new Error("[withIntersectionObserver] The `intersected` method must be defined.");return this.$observer=new IntersectionObserver(e=>{this.__callMethod("intersected",e)},t({},i,this.$options.intersectionObserver||{})),this.$on("mounted",()=>{this.$observer.observe(this.$el)}),this.$on("destroyed",()=>{this.$observer.unobserve(this.$el)}),this}},r.config=t({},e.config||{},{name:(null!=(n=null==e||null==(o=e.config)?void 0:o.name)?n:"")+"WithIntersectionObserver",options:t({},(null==e||null==(a=e.config)?void 0:a.options)||{},{intersectionObserver:Object})}),s},e.withMountWhenInView=ae,e.withScrolledInView=function(e){return class extends(ae(e)){constructor(e){super(e),this.__props={start:{x:0,y:0},end:{x:0,y:0},current:{x:0,y:0},progress:{x:0,y:0}},this.$on("mounted",()=>this.__setProps()),this.$on("resized",()=>this.__setProps()),this.$on("scrolled",e=>{var{detail:[t]}=e;this.$services.toggle("ticked",t.changed.y||t.changed.x)}),this.$on("ticked",()=>{this.__props.current.x=he(window.pageXOffset,this.__props.start.x,this.__props.end.x),this.__props.progress.x=de((this.__props.current.x-this.__props.start.x)/(this.__props.end.x-this.__props.start.x)),this.__props.current.y=he(window.pageYOffset,this.__props.start.y,this.__props.end.y),this.__props.progress.y=de((this.__props.current.y-this.__props.start.y)/(this.__props.end.y-this.__props.start.y)),this.__callMethod("scrolledInView",this.__props)})}__setProps(){var e=this.$el.getBoundingClientRect(),t=e.top+window.pageYOffset+e.height,i=t-window.innerHeight-e.height,r=he(window.pageYOffset,i,t),s=de((r-i)/(t-i)),n=e.left+window.pageXOffset+e.width,o=n-window.innerWidth-e.width,a=he(window.pageXOffset,o,n),h=de((a-o)/(n-o));this.__props={start:{x:o,y:i},end:{x:n,y:t},current:{x:a,y:r},progress:{x:h,y:s}}}}},e.withVue2=(e,i)=>{var r,s,n,o,a,h;return s=r=class extends e{constructor(e){super(e);var{vueConfig:t}=this.constructor;if(!t)throw new Error("[withVue] You must define a `vueConfig` object.");if("function"!=typeof t.render)throw new Error("[withVue] You must define a `render` function in vueConfig.");this.$vue=new i(t),this.$on("mounted",()=>{if(!(this.$refs.vue instanceof HTMLElement))throw new Error("[withVue] The `vue` refs must be a single HTMLElement.");this.$vue.$mount(this.$refs.vue)}),this.$on("destroyed",()=>{this.$vue.$destroy()})}},r.config=t({},e.config||{},{name:(null!=(n=null==e||null==(o=e.config)?void 0:o.name)?n:"")+"WithVue",refs:[...null!=(a=null==e||null==(h=e.config)?void 0:h.refs)?a:[],"vue"]}),s}});
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).Base={})}(this,function(e){function t(){return t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(e[s]=r[s])}return e},t.apply(this,arguments)}var r,s,i,n,o,a,h,p,d=0;function l(e){return"__private_"+d+++"_"+e}function u(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}function c(e,t){return"function"==typeof e[t]}function _(e,t){void 0===t&&(t=document);var r='[data-component="'+e+'"]',s=[];try{s=Array.from(t.querySelectorAll(r))}catch(e){}return 0===s.length&&(s=Array.from(t.querySelectorAll(e))),s}class m{get registeredNames(){return Object.keys(this).filter(e=>!e.startsWith("__"))}constructor(e,t,r,s){Object.defineProperties(this,{__base:{enumerable:!1,writable:!1,value:e},__element:{enumerable:!1,writable:!1,value:t},__components:{enumerable:!1,writable:!1,value:r},__eventsManager:{enumerable:!1,writable:!1,value:s}})}registerAll(){Object.entries(this.__components).forEach(e=>{var[t,r]=e;return this.__register(t,r)})}__register(e,t){Object.defineProperty(this,e,{enumerable:!0,configurable:!0,get:()=>{var r=_(e,this.__element);return 0===r.length?[]:r.map(r=>this.__getChild(r,t,e)).filter(e=>"terminated"!==e)}})}__getChild(e,t,r){if(e.__base__)return e.__base__;if("$isBase"in t){var s=new t(e);return Object.defineProperty(s,"$parent",{get:()=>this.__base}),s}return t(this.__base).then(t=>{var s;return this.__getChild(e,null!=(s=t.default)?s:t,r)})}mountAll(){this.__triggerHookForAll("$mount")}updateAll(){this.__triggerHookForAll("$update")}destroyAll(){this.__triggerHookForAll("$destroy")}__triggerHookForAll(e){this.registeredNames.forEach(t=>{this[t].forEach(r=>{r instanceof Promise?r.then(r=>this.__triggerHook(e,r,t)):this.__triggerHook(e,r,t)})})}__triggerHook(e,t,r){"$update"!==e||t.$isMounted||(e="$mount"),"$update"!==e&&"$destroy"!==e||this.__eventsManager.unbindChild(r,t),"$update"!==e&&"$mount"!==e||this.__eventsManager.bindChild(r,t),t[e]()}}class v{constructor(e,t,r,s){Object.defineProperties(this,{__element:{enumerable:!1,writable:!1,value:t},__refs:{enumerable:!1,writable:!1,value:r},__base:{enumerable:!1,writable:!1,value:e},__eventsManager:{enumerable:!1,writable:!1,value:s}})}registerAll(){this.__refs.forEach(e=>this.__register(e))}unregisterAll(){this.__refs.forEach(e=>this.__unregister(e))}__register(e){var t=e.endsWith("[]"),r=v.normalizeRefName(e),s=Array.from(this.__element.querySelectorAll('[data-ref="'+e+'"]')).filter(e=>this.__filterRefsBelongingToInstance(e));!t&&s.length>1&&console.warn("["+this.__base.$options.name+"]",'The "'+e+'" ref has been found multiple times.',"Did you forgot to add the `[]` suffix to its name?"),!t&&s.length<=1&&void 0===s[0]?console.warn("["+this.__base.$options.name+"]",'The "'+e+'" ref is missing.','Is there an `[data-ref="'+e+"\"]` element in the component's scope?"):(this.__eventsManager.bindRef(e,s),Object.defineProperty(this,r,{value:t||s.length>1?s:s[0],enumerable:!0,configurable:!0}))}__unregister(e){var t=v.normalizeRefName(e),r=Array.isArray(this[t])?this[t]:[this[t]];this.__eventsManager.unbindRef(e,r)}static normalizeRefName(e){return e.endsWith("[]")?e.replace(/\[\]$/,""):e}__filterRefsBelongingToInstance(e){for(var t=e.parentElement;t&&void 0===t.dataset.component;)t=t.parentElement;return null===t||t===this.__element}}class f{constructor(){this.callbacks=new Map,this.isInit=!1}updateProps(){throw this.props=[].slice.call(arguments),new Error("The `updateProps` method must be implemented.")}init(){throw new Error("The `init` method must be implemented.")}kill(){throw new Error("The `kill` method must be implemented.")}add(e,t){if(this.has(e))throw new Error("A callback with the key `"+e+"` has already been registered.");0!==this.callbacks.size||this.isInit||(this.init(),this.isInit=!0),this.callbacks.set(e,t)}has(e){return this.callbacks.has(e)}get(e){return this.callbacks.get(e)}remove(e){this.callbacks.delete(e),0===this.callbacks.size&&this.isInit&&(this.kill(),this.isInit=!1)}trigger(){var e=[].slice.call(arguments);return this.callbacks.forEach(function(t){t(...e)}),this}}function g(e){return"undefined"!=typeof TouchEvent&&e instanceof TouchEvent}class b extends f{constructor(){super(...arguments),this.props={event:null,isDown:!1,x:window.innerWidth/2,y:window.innerHeight/2,changed:{x:!1,y:!1},last:{x:window.innerWidth/2,y:window.innerHeight/2},delta:{x:0,y:0},progress:{x:.5,y:.5},max:{x:window.innerWidth,y:window.innerHeight}},this.hasRaf=!1}init(){document.documentElement.addEventListener("mouseenter",this,{once:!0,capture:!0});var e={passive:!0,capture:!0};return document.addEventListener("mousemove",this,e),document.addEventListener("touchmove",this,e),document.addEventListener("mousedown",this,e),document.addEventListener("touchstart",this,e),document.addEventListener("mouseup",this,e),document.addEventListener("touchend",this,e),this}handleEvent(e){switch(e.type){case"mouseenter":case"mousemove":case"touchmove":this.handler(e);break;case"mousedown":case"touchstart":this.downHandler();break;case"mouseup":case"touchend":this.upHandler()}}kill(){return document.removeEventListener("mousemove",this),document.removeEventListener("touchmove",this),document.removeEventListener("mousedown",this),document.removeEventListener("touchstart",this),document.removeEventListener("mouseup",this),document.removeEventListener("touchend",this),this}handler(e){this.updateProps(e),this.trigger(this.props)}downHandler(){this.props.isDown=!0,this.trigger(this.props)}upHandler(){this.props.isDown=!1,this.trigger(this.props)}updateProps(e){var t,r;this.props.event=e;var s=this.props.y,i=this.props.x,n=g(e)?null==(t=e.touches[0])?void 0:t.clientY:e.clientY;n!==this.props.y&&(this.props.y=n);var o=g(e)?null==(r=e.touches[0])?void 0:r.clientX:e.clientX;return o!==this.props.x&&(this.props.x=o),this.props.changed.x=this.props.x!==i,this.props.changed.y=this.props.y!==s,this.props.last.x=i,this.props.last.y=s,this.props.delta.x=this.props.x-i,this.props.delta.y=this.props.y-s,this.props.max.x=window.innerWidth,this.props.max.y=window.innerHeight,this.props.progress.x=this.props.x/this.props.max.x,this.props.progress.y=this.props.y/this.props.max.y,this.props}}function y(){return s||(r||(r=new b),s={add:r.add.bind(r),remove:r.remove.bind(r),has:r.has.bind(r),props:r.updateProps.bind(r)}),s}class w extends f{constructor(){super(...arguments),this.isTicking=!1,this.id=0,this.raf="undefined"!=typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout,this.cancelRaf="undefined"!=typeof window&&window.cancelAnimationFrame?window.cancelAnimationFrame.bind(window):clearTimeout,this.props={time:performance.now()}}init(){this.isTicking=!0,this.loop()}loop(){this.updateProps(),this.trigger(this.props),this.isTicking&&(this.id=this.raf(()=>this.loop()))}kill(){this.cancelRaf(this.id),this.isTicking=!1}updateProps(){return this.props.time=window.performance.now(),this.props}}function E(){return n||(i||(i=new w),n={add:i.add.bind(i),remove:i.remove.bind(i),has:i.has.bind(i),props:i.updateProps.bind(i)}),n}function $(e,t){var r;return void 0===t&&(t=300),function(){clearTimeout(r),r=setTimeout(()=>{e(...[].slice.call(arguments))},t)}}class x extends f{constructor(){super(...arguments),this.props={width:window.innerWidth,height:window.innerHeight,ratio:window.innerWidth/window.innerHeight,orientation:"square"}}init(){return this.handler=$(()=>{this.updateProps(),this.trigger(this.props)}).bind(this),window.addEventListener("resize",this.handler),this}kill(){window.removeEventListener("resize",this.handler)}updateProps(){return this.props.width=window.innerWidth,this.props.height=window.innerHeight,this.props.ratio=window.innerWidth/window.innerHeight,this.props.orientation="square",this.props.ratio>1&&(this.props.orientation="landscape"),this.props.ratio<1&&(this.props.orientation="portrait"),this.breakpointElement?(this.props.breakpoint=this.breakpoint,this.props.breakpoints=this.breakpoints):(this.props.breakpoint=void 0,this.props.breakpoints=void 0),this.props}get breakpointElement(){return document.querySelector("[data-breakpoint]")}get breakpoint(){return window.getComputedStyle(this.breakpointElement,"::before").getPropertyValue("content").replace(/"/g,"")}get breakpoints(){return window.getComputedStyle(this.breakpointElement,"::after").getPropertyValue("content").replace(/"/g,"").split(",")}}function k(){if(!a){o||(o=new x);var e=o.add.bind(o),t=o.remove.bind(o),r=o.has.bind(o),s=o.updateProps.bind(o);a={add:e,remove:t,has:r,props:s}}return a}class O extends f{constructor(){super(...arguments),this.props={x:window.pageXOffset,y:window.pageYOffset,changed:{x:!1,y:!1},last:{x:window.pageXOffset,y:window.pageYOffset},delta:{x:0,y:0},max:{x:(document.scrollingElement||document.body).scrollWidth-window.innerWidth,y:(document.scrollingElement||document.body).scrollHeight-window.innerHeight},progress:{x:0,y:0},direction:{x:"NONE",y:"NONE"}}}init(){return this.updateProps(),document.addEventListener("scroll",this,{passive:!0,capture:!0}),this}get debouncedHandler(){var e=$(()=>{this.updateProps(),this.trigger(this.props)},100);return Object.defineProperty(this,"debouncedHandler",{value:e}),e}handleEvent(){this.updateProps(),this.trigger(this.props),this.debouncedHandler()}kill(){return document.removeEventListener("scroll",this),this}updateProps(){var e=this.props.y,t=this.props.x;return window.pageYOffset!==this.props.y&&(this.props.y=window.pageYOffset),window.pageXOffset!==this.props.x&&(this.props.x=window.pageXOffset),this.props.changed.x=this.props.x!==t,this.props.changed.y=this.props.y!==e,this.props.last.x=t,this.props.last.y=e,this.props.delta.x=this.props.x-t,this.props.delta.y=this.props.y-e,this.props.max.x=(document.scrollingElement||document.body).scrollWidth-window.innerWidth,this.props.max.y=(document.scrollingElement||document.body).scrollHeight-window.innerHeight,this.props.progress.x=0===this.props.max.x?1:this.props.x/this.props.max.x,this.props.progress.y=0===this.props.max.y?1:this.props.y/this.props.max.y,this.props.direction.x=this.props.x>t?"RIGHT":this.props.x<t?"LEFT":"NONE",this.props.direction.y=this.props.y>e?"DOWN":this.props.y<e?"UP":"NONE",this.props}}function P(){return p||(h||(h=new O),p={add:h.add.bind(h),remove:h.remove.bind(h),has:h.has.bind(h),props:h.updateProps.bind(h)}),p}var A,M,N,T,j={ENTER:13,SPACE:32,TAB:9,ESC:27,LEFT:37,UP:38,RIGHT:39,DOWN:40};class H extends f{constructor(){super(...arguments),this.props={event:null,triggered:0,isUp:!1,isDown:!1,ENTER:!1,SPACE:!1,TAB:!1,ESC:!1,LEFT:!1,UP:!1,RIGHT:!1,DOWN:!1,direction:"none"}}init(){document.addEventListener("keydown",this),document.addEventListener("keyup",this)}handleEvent(e){this.updateProps(e),this.trigger(this.props)}kill(){document.removeEventListener("keydown",this),document.removeEventListener("keyup",this)}updateProps(e){var t;return this.props.event=e,Object.entries(j).forEach(t=>{var[r,s]=t;this.props[r]=s===e.keyCode}),this.previousEvent||(this.props.triggered=0),"keydown"===this.props.event.type&&"keydown"===(null==(t=this.previousEvent)?void 0:t.type)?this.props.triggered+=1:this.props.triggered=1,this.previousEvent=this.props.event,this.props.direction="keydown"===this.props.event.type?"down":"up",this.props.isUp="keyup"===this.props.event.type,this.props.isDown="keydown"===this.props.event.type,this.props}}function B(){return M||(A||(A=new H),M={add:A.add.bind(A),remove:A.remove.bind(A),has:A.has.bind(A),props:A.updateProps.bind(A)}),M}class L extends f{constructor(){super(...arguments),this.props={time:window.performance.now()}}init(){window.addEventListener("load",this)}handleEvent(){this.updateProps(),this.trigger(this.props)}kill(){window.removeEventListener("load",this)}updateProps(){return this.props.time=window.performance.now(),this.props}}function I(){return T||(N||(N=new L),T={add:N.add.bind(N),remove:N.remove.bind(N),has:N.has.bind(N),props:N.updateProps.bind(N)}),T}var C={scrolled:P,resized:k,ticked:E,moved:y,keyed:B,loaded:I},S=Object.keys(C);class R{get __services(){return t({},this.__customServices,C)}constructor(e){this.__customServices={},Object.defineProperties(this,{__base:{enumerable:!1,writable:!1,value:e}})}has(e){if(!c(this.__base,e)&&!this.__base.__hasEvent(e)||!this.__services[e])return!1;var{has:t}=this.__services[e]();return t(this.__base.$id)}enable(e){if(this.has(e))return this.disable.bind(this,e);if(!c(this.__base,e)&&!this.__base.__hasEvent(e)||!this.__services[e])return function(){};var{add:t}=this.__services[e](),r=this;return t(this.__base.$id,function(){r.__base.__callMethod(e,...[].slice.call(arguments))}),this.disable.bind(this,e)}enableAll(){return Object.keys(this.__services).map(e=>this.enable(e))}disableAll(){Object.keys(this.__services).forEach(e=>{this.disable(e)})}disable(e){if(this.__services[e]){var{remove:t}=this.__services[e]();t(this.__base.$id)}}toggle(e,t){void 0!==t?(t&&!this.has(e)&&this.enable(e),!t&&this.has(e)&&this.disable(e)):this.has(e)?this.disable(e):this.enable(e)}register(e,t){this.__customServices[e]=t,this.__base.__addEmits(e)}unregister(e){if(S.includes(e))throw new Error("[ServicesManager] The `"+e+"` core service can not be unregistered.");this.__base.__removeEmits(e),delete this.__customServices[e]}}function W(e,t,r){void 0===t&&(t=[]),void 0===r&&(r=null);var s=Object.getPrototypeOf(e);if(s===Object.prototype||null===s)return t;var i=Object.getOwnPropertyNames(s);return"function"==typeof r&&(i=i.filter(e=>r(e,s))),i=i.map(e=>[e,s]).reduce((e,t)=>[...e,t],t),W(s,i,r)}class z{constructor(e,t){this.__methodsCache=new Map,this.__rootElementHandler={handleEvent:e=>{var t=z.normalizeName(e.type);this.__base["on"+t](e)}},this.__refsHandler={handleEvent:e=>{var t=e.currentTarget,r=v.normalizeRefName(t.dataset.ref),s="on"+z.normalizeName(r)+z.normalizeName(e.type),i=0;Array.isArray(this.__base.$refs[r])&&(i=this.__base.$refs[r].indexOf(t)),this.__base[s](e,i)}},this.__childrenHandler={handleEvent:e=>{var t,r=e.currentTarget,s=0,i=this.__base.$children;i.registeredNames.find(e=>!!i[e].includes(r)&&(t=e,s=i[e].indexOf(r),!0));var n="on"+z.normalizeName(t)+z.normalizeName(e.type),o=Array.isArray(e.detail)?e.detail:[];this.__base[n](...o,s,e)}},Object.defineProperties(this,{__rootElement:{enumerable:!1,writable:!1,value:e},__base:{enumerable:!1,writable:!1,value:t},__methodsCache:{enumerable:!1,writable:!1,value:this.__methodsCache},__rootElementHandler:{enumerable:!1,writable:!1,value:this.__rootElementHandler},__refsHandler:{enumerable:!1,writable:!1,value:this.__refsHandler},__childrenHandler:{enumerable:!1,writable:!1,value:this.__childrenHandler}})}__manageRef(e,t,r){void 0===r&&(r="add");var s=r+"EventListener";this.__getEventMethodsByName(e).forEach(r=>{var i=this.__getEventNameByMethod(r,e);t.forEach(e=>e[s](i,this.__refsHandler))})}bindRef(e,t){this.__manageRef(e,t)}unbindRef(e,t){this.__manageRef(e,t,"remove")}__manageChild(e,t,r){void 0===r&&(r="add");var s="add"===r?"$on":"$off";this.__getEventMethodsByName(e).forEach(r=>{var i=this.__getEventNameByMethod(r,e);t[s](i,this.__childrenHandler)})}bindChild(e,t){this.__manageChild(e,t)}unbindChild(e,t){this.__manageChild(e,t,"remove")}__manageRootElement(e){void 0===e&&(e="add");var t=e+"EventListener",r=this.__getEventMethodsByName(),{emits:s=[]}=this.__base.__config;r.forEach(e=>{var r=this.__getEventNameByMethod(e);(s.includes(r)?this.__base:this.__rootElement)[t](r,this.__rootElementHandler)})}bindRootElement(){this.__manageRootElement()}unbindRootElement(){this.__manageRootElement("remove")}__getEventNameByMethod(e,t){void 0===t&&(t="");var r=z.normalizeName(t),s=new RegExp("^on"+r+"([A-Z].*)$"),[,i]=e.match(s);return z.normalizeEventName(i)}__getEventMethodsByName(e){void 0===e&&(e="");var t=z.normalizeName(e),r=new RegExp("^on"+t+"[A-Z].*$"),s=r.toString(),i=this.__methodsCache.get(s);return i||(i=Array.from(W(this.__base,[],e=>r.test(e)).reduce((e,t)=>{var[r]=t;return e.add(r)},new Set)),this.__methodsCache.set(s,i)),i}static normalizeName(e){return e.replace(/[A-Z]([A-Z].*)/g,e=>e.toLowerCase()).replace(/[^a-zA-Z\d\s:]/g," ").replace(/(^\w|\s+\w)/g,e=>e.trim().toUpperCase()).trim()}static normalizeEventName(e){return e.replace(/[A-Z]/g,e=>"-"+e.toLowerCase()).replace(/^-/,"")}}var V=function(e){return function(e){return!!e&&"object"==typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===D}(e)}(e)},D="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function F(e,t){return!1!==t.clone&&t.isMergeableObject(e)?G(Array.isArray(e)?[]:{},e,t):e}function q(e,t,r){return e.concat(t).map(function(e){return F(e,r)})}function Y(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(t){return e.propertyIsEnumerable(t)}):[]}(e))}function X(e,t){try{return t in e}catch(e){return!1}}function G(e,t,r){(r=r||{}).arrayMerge=r.arrayMerge||q,r.isMergeableObject=r.isMergeableObject||V,r.cloneUnlessOtherwiseSpecified=F;var s=Array.isArray(t);return s===Array.isArray(e)?s?r.arrayMerge(e,t,r):function(e,t,r){var s={};return r.isMergeableObject(e)&&Y(e).forEach(function(t){s[t]=F(e[t],r)}),Y(t).forEach(function(i){(function(e,t){return X(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,i)||(s[i]=X(e,i)&&r.isMergeableObject(t[i])?function(e,t){if(!t.customMerge)return G;var r=t.customMerge(e);return"function"==typeof r?r:G}(i,r)(e[i],t[i],r):F(t[i],r))}),s}(e,t,r):F(t,r)}G.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce(function(e,r){return G(e,r,t)},{})};var U=G;class Z{constructor(e,t,r){var s,i;return this.__values={},this.__defaultValues={String:"",Number:0,Boolean:!1,Array:()=>[],Object:()=>({})},this.name="Base",this.debug=!1,this.log=!1,Object.defineProperties(this,{__element:{enumerable:!1,writable:!1,value:e},__values:{enumerable:!1,writable:!1,value:this.__values},__defaultValues:{enumerable:!1,writable:!1,value:this.__defaultValues}}),this.name=r.name,t.debug={type:Boolean,default:null!=(s=r.debug)&&s},t.log={type:Boolean,default:null!=(i=r.log)&&i},Object.entries(t).forEach(e=>{var[t,r]=e;this.__register(t,r)}),this}__register(e,t){var r=!Z.types.includes(t),s=r?t.type:t;if(!Z.types.includes(s))throw new Error('The "'+e+'" option has an invalid type. The allowed types are: String, Number, Boolean, Array and Object.');var i=r?t.default:this.__defaultValues[s.name];if((s===Array||s===Object)&&"function"!=typeof i)throw new Error('The default value for options of type "'+s.name+'" must be returned by a function.');Object.defineProperty(this,e,{get:()=>this.get(e,s,i),set:t=>{this.set(e,s,t,i)},enumerable:!0})}get(e,t,r){var s=Z.__getPropertyName(e),i=this.__hasProperty(s);if(t===Boolean){if(r){var n=Z.__getPropertyName(e,"No");return!this.__hasProperty(n)}return i||r}var o=this.__element.dataset[s];if(t===Number)return i?Number(o):r;if(t===Array||t===Object){var a=U(r(),i?JSON.parse(o):this.__defaultValues[t.name]());return this.__values[e]||(this.__values[e]=a),this.__values[e]}return i?o:r}set(e,t,r,s){var i=Z.__getPropertyName(e);if(r.constructor.name!==t.name){var n=Array.isArray(r)||function(e){return"object"==typeof e&&!!e&&"[object Object]"===e.toString()}(r)?JSON.stringify(r):r;throw new TypeError('The "'+n+'" value for the "'+e+'" option must be of type "'+t.name+'"')}switch(t){case Boolean:if(s){var o=Z.__getPropertyName(e,"No");r?delete this.__element.dataset[o]:this.__element.dataset[o]=""}else r?this.__element.dataset[i]="":delete this.__element.dataset[i];break;case Array:case Object:this.__values[e]=r;break;default:this.__element.dataset[i]=r}}__hasProperty(e){return void 0!==this.__element.dataset[e]}static __getPropertyName(e,t){void 0===t&&(t="");var r=e+t;if(Z.__propertyNameCache.has(r))return Z.__propertyNameCache.get(r);var s="option"+t+e.replace(/^\w/,e=>e.toUpperCase());return Z.__propertyNameCache.set(r,s),s}}Z.types=[String,Number,Boolean,Array,Object],Z.__propertyNameCache=new Map;var J=0,K="undefined"!=typeof __DEV__&&__DEV__;function Q(){}class ee extends EventTarget{get $root(){if(!this.$parent)return this;for(var e=this.$parent,t=this.$parent;e;)e.$parent||(t=e),e=e.$parent;return t}get __config(){for(var e=Object.getPrototypeOf(this),{config:r}=e.constructor;e.constructor.config&&e.constructor.$isBase;)r=t({},e.constructor.config,r),e.constructor.config.options&&(r.options=t({},e.constructor.config.options,r.options)),e.constructor.config.emits&&r.emits&&(r.emits=[...e.constructor.config.emits,...r.emits]),e=Object.getPrototypeOf(e);return r}get $services(){return this.__services}get $refs(){return this.__refs}get $options(){return this.__options}get $children(){return this.__children}get $log(){return this.__options.log?window.console.log.bind(window,"["+this.__config.name+"]"):Q}get __debug(){return K&&this.__options.debug?window.console.log.bind(window,"[debug] ["+this.$id+"]"):Q}__callMethod(e){var t=[].slice.call(arguments,1);K&&this.__debug("callMethod",e,...t),this.$emit(e,...t),"function"==typeof this[e]&&(this[e].call(this,...t),K&&this.__debug(e,this,...t))}__hasEvent(e){var t=this.__eventHandlers.get(e);return t&&t.size>0}constructor(e){if(super(),this.$parent=null,this.$isMounted=!1,this.__eventHandlers=new Map,!e)throw new Error("The root element must be defined.");var{__config:t}=this;if("Base"===t.name)throw new Error("The `config.name` property is required.");return this.$id=t.name+"-"+J,J+=1,this.$el=e,"__base__"in this.$el||Object.defineProperty(this.$el,"__base__",{get:()=>this,configurable:!0}),this.__options=new Z(e,t.options||{},t),this.__services=new R(this),this.__events=new z(e,this),this.__children=new m(this,e,t.components||{},this.__events),this.__refs=new v(this,e,t.refs||[],this.__events),K&&this.__debug("constructor",this),this}$mount(){return this.$isMounted||(this.$isMounted=!0,K&&this.__debug("$mount"),this.$children.registerAll(),this.$refs.registerAll(),this.__events.bindRootElement(),this.$services.enableAll(),this.$children.mountAll(),this.__callMethod("mounted")),this}$update(){return K&&this.__debug("$update"),this.$refs.unregisterAll(),this.$services.disableAll(),this.$children.registerAll(),this.$refs.registerAll(),this.$services.enableAll(),this.$children.updateAll(),this.__callMethod("updated"),this}$destroy(){return this.$isMounted?(this.$isMounted=!1,K&&this.__debug("$destroy"),this.__events.unbindRootElement(),this.$refs.unregisterAll(),this.$services.disableAll(),this.$children.destroyAll(),this.__callMethod("destroyed"),this):this}$terminate(){K&&this.__debug("$terminate"),this.$destroy(),this.__callMethod("terminated"),Object.defineProperty(this.$el,"__base__",{value:"terminated",configurable:!1,writable:!1})}__testEventIsDefined(e){Array.isArray(this.__config.emits)&&this.__config.emits.includes(e)||console.warn("["+this.__config.name+"]",'The "'+e+'" event is missing from the configuration.')}__addEmits(e){var t=this.constructor;Array.isArray(t.config.emits)?t.config.emits.push(e):t.config.emits=[e]}__removeEmits(e){var t=this.constructor,r=t.config.emits.findIndex(t=>t===e);t.config.emits.splice(r,1)}$on(e,t,r){K&&this.__debug("$on",e,t,r),K&&this.__testEventIsDefined(e);var s=this.__eventHandlers.get(e);return s||(s=new Set,this.__eventHandlers.set(e,s)),s.add(t),this.addEventListener(e,t,r),()=>{this.$off(e,t,r)}}$off(e,t,r){K&&this.__debug("$off",e,t),K&&this.__testEventIsDefined(e),this.__eventHandlers.get(e).delete(t),this.removeEventListener(e,t,r)}$emit(e){var t=[].slice.call(arguments,1);K&&this.__debug("$emit",e,t),K&&this.__testEventIsDefined(e),this.dispatchEvent(new CustomEvent(e,{detail:t}))}static $factory(e){if(!e)throw new Error("The $factory method requires a component’s name or selector to be specified.");return _(e).map(e=>new this(e).$mount())}}function te(e){var{breakpoint:t}=k().props();e.forEach(e=>{var[r,s]=e;r.includes(t)&&!s.$isMounted?setTimeout(()=>s.$mount(),0):!r.includes(t)&&s.$isMounted&&s.$destroy()})}ee.$isBase=!0,ee.config={name:"Base",emits:["mounted","updated","destroyed","terminated","ticked","scrolled","resized","moved","loaded","keyed"]};var re=new WeakMap;function se(e,t){void 0===t&&(t=k().props().breakpoint);var{activeBreakpoints:r,inactiveBreakpoints:s}=e.$options,i=r&&r.split(" ").includes(t),n=s&&s.split(" ").includes(t);return r&&i||s&&!n?"$mount":"$destroy"}function ie(e){var{activeBreakpoints:t,inactiveBreakpoints:r}=e.$options;return Boolean(t||r)}function ne(e,t){!function(e){var{activeBreakpoints:t,inactiveBreakpoints:r,name:s}=e.$options;if(t&&r)throw new Error("["+s+"] Incorrect configuration: the `activeBreakpoints` and `inactiveBreakpoints` are not compatible.")}(t);var{add:r,has:s}=k();s(e)||r(e,function(e){var{breakpoint:r}=e,s=se(t,r);"$destroy"===s&&t.$isMounted?t[s]():"$mount"!==s||t.$isMounted||setTimeout(()=>t[s](),0)})}function oe(e,t,r){if(void 0===r&&(r=.85),r>=1||r<=0)throw new Error("The `factor` parameter must be a number greater than 0 and smaller than 1, `"+r+"` given.");for(var s=t,i=e;Math.abs(s)>.1;)i+=s,s*=r;return i}var ae="drag",he="inertia",pe=0;class de extends f{constructor(e,r){return void 0===r&&(r={}),super(),this.props={target:null,mode:void 0,isGrabbing:!1,hasInertia:!1,x:0,y:0,delta:{x:0,y:0},origin:{x:0,y:0},distance:{x:0,y:0},final:{x:0,y:0}},this.options={dampFactor:.85},this.id="drag-"+(pe+=1),this.props.target=e,this.options=t({},this.options,r),this.pointerHandler=this.pointerHandler.bind(this),this.rafHandler=this.rafHandler.bind(this),this}init(){var e={passive:!0};return this.props.target.addEventListener("mousedown",this,e),this.props.target.addEventListener("touchstart",this,e),y().add(this.id,this.pointerHandler),this}kill(){return this.props.target.removeEventListener("mousemove",this),this.props.target.removeEventListener("touchmove",this),y().remove(this.id),this}handleEvent(e){var t=e instanceof MouseEvent?e.clientX:e.touches[0].clientX,r=e instanceof MouseEvent?e.clientY:e.touches[0].clientY;this.start(t,r)}start(e,t){this.props.x=e,this.props.y=t,this.props.origin.x=e,this.props.origin.y=t,this.props.delta.x=0,this.props.delta.y=0,this.props.distance.x=0,this.props.distance.y=0,this.props.final.x=e,this.props.final.y=t,this.props.mode="start",this.props.isGrabbing=!0,this.trigger(this.props)}drop(){this.props.isGrabbing=!1,this.props.mode="drop",this.props.hasInertia=!0,this.props.final.x=oe(this.props.x,this.props.delta.x,this.options.dampFactor),this.props.final.y=oe(this.props.y,this.props.delta.y,this.options.dampFactor),this.trigger(this.props),setTimeout(()=>{var e=E();e.remove(this.id),e.add(this.id,this.rafHandler)},0)}stop(){E().remove(this.id),this.props.hasInertia=!1,this.props.mode="stop",this.trigger(this.props)}rafHandler(){this.props.isGrabbing||(this.props.x+=this.props.delta.x,this.props.y+=this.props.delta.y,this.props.distance.x=this.props.x-this.props.origin.x,this.props.distance.y=this.props.y-this.props.origin.y,this.props.delta.x*=this.options.dampFactor,this.props.delta.y*=this.options.dampFactor,this.props.mode!==he&&(this.props.mode=he),this.trigger(this.props),Math.abs(this.props.delta.x)<.1&&Math.abs(this.props.delta.y)<.1&&this.stop())}pointerHandler(e){this.props.isGrabbing&&(this.props.x=e.x,this.props.y=e.y,this.props.delta.x=e.delta.x,this.props.delta.y=e.delta.y,this.props.final.x=e.x,this.props.final.y=e.y,this.props.distance.x=this.props.x-this.props.origin.x,this.props.distance.y=this.props.y-this.props.origin.y,this.props.mode!==ae&&(this.props.mode=ae),this.trigger(this.props),e.isDown||this.drop())}updateProps(){return this.props}}var le=new WeakMap;function ue(e,t){var r=le.get(e);if(!r){var s=new de(e,t);r={add:s.add.bind(s),remove:s.remove.bind(s),has:s.has.bind(s),props:s.updateProps.bind(s)},le.set(e,r)}return r}var ce=["target"];function _e(e,r){var s,i,n,o,a,h,p;return void 0===r&&(r={threshold:[0,1]}),i=l("isVisible"),n=l("observer"),o=s=class extends e{constructor(e){return super(e),Object.defineProperty(this,i,{writable:!0,value:!1}),Object.defineProperty(this,n,{writable:!0,value:void 0}),u(this,n)[n]=new IntersectionObserver(e=>{var t=e.reduce((e,t)=>e||t.isIntersecting,!1);u(this,i)[i]!==t&&(u(this,i)[i]=t,t?this.$mount():setTimeout(()=>this.$destroy()))},t({},r,this.$options.intersectionObserver)),u(this,n)[n].observe(this.$el),this.$on("terminated",()=>{u(this,n)[n].disconnect()}),this}$mount(){return u(this,i)[i]&&super.$mount(),this}},s.config=t({},e.config||{},{name:(null!=(a=null==e||null==(h=e.config)?void 0:h.name)?a:"")+"WithMountWhenInView",options:t({},(null==e||null==(p=e.config)?void 0:p.options)||{},{intersectionObserver:Object})}),o}function me(e,t,r){return t<r?e<t?t:e>r?r:e:e<r?r:e>t?t:e}function ve(e){return me(e,0,1)}function fe(e,t,r,s){return void 0===r&&(r=.5),void 0===s&&(s=.01),Math.abs(e-t)<s?e:t+(e-t)*r}function ge(e,t){return"string"==typeof e?_(e,t):Array.isArray(e)?e:[e]}e.Base=ee,e.createApp=function(e,t){var r,s="complete"===document.readyState;s?r=new e(t).$mount():document.addEventListener("readystatechange",()=>{"complete"===document.readyState&&(r=new e(t).$mount(),s=!0)});var i=new Promise(e=>{document.addEventListener("readystatechange",()=>{"complete"===document.readyState&&setTimeout(()=>e(r),0)})});return function(){return s?Promise.resolve(r):i}},e.importOnInteraction=function(e,t,r,s){var i="string"==typeof r?[r]:r;return new Promise(r=>{var n=ge(t,null==s?void 0:s.$el),o={capture:!0,passive:!0,once:!0},a=()=>{(t=>{e().then(e=>{t("default"in e?e.default:e)})})(r)};n.forEach(e=>{i.forEach(t=>{e.addEventListener(t,a,o)})})})},e.importWhenIdle=function(e,t){var r=t=>{e().then(e=>{t("default"in e?e.default:e)})};return new Promise(e=>{var s,i=null!=(s=null==t?void 0:t.timeout)?s:1;"requestIdleCallback"in window?window.requestIdleCallback(()=>{setTimeout(()=>{r(e)},0)},{timeout:null==t?void 0:t.timeout}):setTimeout(()=>{r(e)},i)})},e.importWhenVisible=function(e,t,r,s){return void 0===s&&(s={}),new Promise(i=>{var n=new IntersectionObserver(t=>{t.some(e=>e.isIntersecting)&&setTimeout(()=>{((t,r)=>{e().then(e=>{t("default"in e?e.default:e),n.disconnect()})})(i)},0)},s);ge(t,null==r?void 0:r.$el).forEach(e=>n.observe(e))})},e.useDrag=ue,e.useKey=B,e.useLoad=I,e.usePointer=y,e.useRaf=E,e.useResize=k,e.useScroll=P,e.withBreakpointManager=function(e,t){if(!Array.isArray(t))throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");if(t.length<2)throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");var{add:r,props:s}=k();if(!s().breakpoint)throw new Error("The `BreakpointManager` class requires breakpoints to be defined.");return class extends e{constructor(e){return super(e),re.has(this)||re.set(this,function(e,t){return t.map(t=>{var[r,s]=t,i=new s(e.$el);return Object.defineProperty(i,"$parent",{get:()=>e.$parent}),[r,i]})}(this,t)),r("BreakpointManager-"+this.$id,()=>{te(re.get(this))}),this.instances=re.get(this),this}$mount(){return super.$mount(),te(re.get(this)),this}$destroy(){return Array.isArray(re.get(this))&&re.get(this).forEach(e=>{var[,t]=e;t.$destroy()}),super.$destroy()}}},e.withBreakpointObserver=function(e){var r,s,i,n,o;return s=r=class extends e{constructor(e){super(e);var{remove:t,props:r}=k(),{name:s}=this.$options;if(!r().breakpoint)throw new Error("["+s+"] The `BreakpointObserver` class requires breakpoints to be defined.");var i="BreakpointObserver-"+this.$id;return new MutationObserver(e=>{var[r]=e;if("attributes"===r.type&&("data-options"===r.attributeName||r.attributeName.startsWith("data-option-"))){if(!ie(this))return this.$mount(),void t(i);ne(i,this)}}).observe(this.$el,{attributes:!0}),ie(this)?(ne(i,this),this):this}$mount(){return ie(this)?"$mount"===se(this)?super.$mount():this:super.$mount()}},r.config=t({},e.config||{},{name:(null!=(i=null==e||null==(n=e.config)?void 0:n.name)?i:"")+"WithBreakpointObserver",options:t({},(null==e||null==(o=e.config)?void 0:o.options)||{},{activeBreakpoints:String,inactiveBreakpoints:String})}),s},e.withDrag=function(e,t){var r,s,i=void 0===t?{}:t,{target:n=(e=>e.$el)}=i,o=function(e,t){if(null==e)return{};var r,s,i={},n=Object.keys(e);for(s=0;s<n.length;s++)t.indexOf(r=n[s])>=0||(i[r]=e[r]);return i}(i,ce);return s=r=class extends e{constructor(e){super(e),this.$on("mounted",()=>{this.$services.register("dragged",ue.bind(void 0,n.call(this,this),o)),this.$services.enable("dragged")}),this.$on("destroyed",()=>{this.$services.disable("dragged"),this.$services.unregister("dragged")})}},r.config={name:e.config.name+"WithDrag",emits:["dragged"]},s},e.withExtraConfig=function(e,t,r){var s,i;void 0===r&&(r={});var n=U(e.config,t,r);return n.name===e.config.name&&(n.name=e.config.name+"WithExtraConfig"),i=s=class extends e{},s.config=n,i},e.withIntersectionObserver=function(e,r){var s,i,n,o,a;return void 0===r&&(r={threshold:[...new Array(101)].map((e,t)=>t/100)}),i=s=class extends e{constructor(e){if(super(e),!this.intersected||"function"!=typeof this.intersected)throw new Error("[withIntersectionObserver] The `intersected` method must be defined.");return this.$observer=new IntersectionObserver(e=>{this.__callMethod("intersected",e)},t({},r,this.$options.intersectionObserver||{})),this.$on("mounted",()=>{this.$observer.observe(this.$el)}),this.$on("destroyed",()=>{this.$observer.unobserve(this.$el)}),this}},s.config=t({},e.config||{},{name:(null!=(n=null==e||null==(o=e.config)?void 0:o.name)?n:"")+"WithIntersectionObserver",options:t({},(null==e||null==(a=e.config)?void 0:a.options)||{},{intersectionObserver:Object}),emits:["intersected"]}),i},e.withMountWhenInView=_e,e.withScrolledInView=function(e,t){var r,s;return s=r=class extends(_e(e,t)){constructor(){super(...arguments),this.__props={start:{x:0,y:0},end:{x:0,y:0},current:{x:0,y:0},progress:{x:0,y:0},dampedProgress:{x:0,y:0}},this.dampFactor=.1,this.dampPrecision=.001}mounted(){this.__setProps()}resized(){this.__setProps()}scrolled(e){(!this.$services.has("ticked")&&e.changed.y||e.changed.x)&&this.$services.enable("ticked")}ticked(){this.__props.current.x=me(window.pageXOffset,this.__props.start.x,this.__props.end.x),this.__props.progress.x=ve((this.__props.current.x-this.__props.start.x)/(this.__props.end.x-this.__props.start.x)),this.__props.dampedProgress.x=fe(this.__props.progress.x,this.__props.dampedProgress.x,this.dampFactor,this.dampPrecision),this.__props.current.y=me(window.pageYOffset,this.__props.start.y,this.__props.end.y),this.__props.progress.y=ve((this.__props.current.y-this.__props.start.y)/(this.__props.end.y-this.__props.start.y)),this.__props.dampedProgress.y=fe(this.__props.progress.y,this.__props.dampedProgress.y,this.dampFactor,this.dampPrecision),this.__props.dampedProgress.x===this.__props.progress.x&&this.__props.dampedProgress.y===this.__props.progress.y&&this.$services.disable("ticked"),this.__callMethod("scrolledInView",this.__props)}__setProps(){var e=this.$el.getBoundingClientRect(),t=e.top+window.pageYOffset+e.height,r=t-window.innerHeight-e.height,s=me(window.pageYOffset,r,t),i=ve((s-r)/(t-r)),n=e.left+window.pageXOffset+e.width,o=n-window.innerWidth-e.width,a=me(window.pageXOffset,o,n),h=ve((a-o)/(n-o));this.__props.start.x=o,this.__props.start.y=r,this.__props.end.x=n,this.__props.end.y=t,this.__props.current.x=a,this.__props.current.y=s,this.__props.progress.x=h,this.__props.progress.y=i,this.__props.dampedProgress.x=fe(h,this.__props.dampedProgress.x),this.__props.dampedProgress.y=fe(i,this.__props.dampedProgress.y)}},r.config={name:e.config.name+"WithMountWhenInView",emits:["scrolledInView"]},s},e.withVue2=(e,r)=>{var s,i,n,o,a,h;return i=s=class extends e{constructor(e){super(e);var{vueConfig:t}=this.constructor;if(!t)throw new Error("[withVue] You must define a `vueConfig` object.");if("function"!=typeof t.render)throw new Error("[withVue] You must define a `render` function in vueConfig.");this.$vue=new r(t),this.$on("mounted",()=>{if(!(this.$refs.vue instanceof HTMLElement))throw new Error("[withVue] The `vue` refs must be a single HTMLElement.");this.$vue.$mount(this.$refs.vue)}),this.$on("destroyed",()=>{this.$vue.$destroy()})}},s.config=t({},e.config||{},{name:(null!=(n=null==e||null==(o=e.config)?void 0:o.name)?n:"")+"WithVue",refs:[...null!=(a=null==e||null==(h=e.config)?void 0:h.refs)?a:[],"vue"]}),i}});
|
package/package.json
CHANGED
package/services/Service.d.ts
CHANGED
|
@@ -5,33 +5,39 @@ export default class Service {
|
|
|
5
5
|
callbacks: Map<any, any>;
|
|
6
6
|
isInit: boolean;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* This getter MUST be implementer by the service extending this class.
|
|
10
|
-
* @return {Object}
|
|
8
|
+
* @type {unknown}
|
|
11
9
|
*/
|
|
12
|
-
|
|
10
|
+
props: unknown;
|
|
11
|
+
/**
|
|
12
|
+
* Method to update the services properties.
|
|
13
|
+
* This method MUST be implemented by the service extending this class.
|
|
14
|
+
*
|
|
15
|
+
* @param {...any} args
|
|
16
|
+
* @return {this['props']}
|
|
17
|
+
*/
|
|
18
|
+
updateProps(...args: any[]): unknown;
|
|
13
19
|
/**
|
|
14
20
|
* Method to initialize the service behaviors.
|
|
15
21
|
* This method MUST be implemented by the service extending this class.
|
|
16
22
|
*
|
|
17
|
-
* @return {
|
|
23
|
+
* @return {void}
|
|
18
24
|
*/
|
|
19
|
-
init():
|
|
25
|
+
init(): void;
|
|
20
26
|
/**
|
|
21
27
|
* Method to kill the service behaviors.
|
|
22
28
|
* This method MUST be implemented by the service extending this class.
|
|
23
29
|
*
|
|
24
|
-
* @return {
|
|
30
|
+
* @return {void}
|
|
25
31
|
*/
|
|
26
|
-
kill():
|
|
32
|
+
kill(): void;
|
|
27
33
|
/**
|
|
28
34
|
* Add a callback.
|
|
29
35
|
*
|
|
30
36
|
* @param {String} key The callback's identifier
|
|
31
37
|
* @param {Function} callback The callback function
|
|
32
|
-
* @return {
|
|
38
|
+
* @return {void}
|
|
33
39
|
*/
|
|
34
|
-
add(key: string, callback: Function):
|
|
40
|
+
add(key: string, callback: Function): void;
|
|
35
41
|
/**
|
|
36
42
|
* Test if a callback with the given key has already been added.
|
|
37
43
|
*
|
|
@@ -42,22 +48,21 @@ export default class Service {
|
|
|
42
48
|
/**
|
|
43
49
|
* Get the callback tied to the given key.
|
|
44
50
|
*
|
|
45
|
-
* @param {
|
|
51
|
+
* @param {string} key The identifier to get
|
|
46
52
|
* @return {Function} The callback function
|
|
47
53
|
*/
|
|
48
54
|
get(key: string): Function;
|
|
49
55
|
/**
|
|
50
56
|
* Remove the callback tied to the given key.
|
|
51
57
|
*
|
|
52
|
-
* @param
|
|
53
|
-
* @return {Service} The current instance
|
|
58
|
+
* @param {string} key The identifier to remove
|
|
54
59
|
*/
|
|
55
|
-
remove(key: string):
|
|
60
|
+
remove(key: string): void;
|
|
56
61
|
/**
|
|
57
62
|
* Trigger each added callback with the given arguments.
|
|
58
63
|
*
|
|
59
|
-
* @param {
|
|
60
|
-
* @return {
|
|
64
|
+
* @param {...any} args All the arguments to apply to the callback
|
|
65
|
+
* @return {this} The current instance
|
|
61
66
|
*/
|
|
62
|
-
trigger(...args: any[]):
|
|
67
|
+
trigger(...args: any[]): this;
|
|
63
68
|
}
|
package/services/Service.js
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
1
2
|
export default class Service {
|
|
2
3
|
constructor() {
|
|
4
|
+
_defineProperty(this, "props", void 0);
|
|
5
|
+
|
|
3
6
|
this.callbacks = new Map();
|
|
4
7
|
this.isInit = false;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
10
|
+
updateProps() {
|
|
11
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
12
|
+
args[_key] = arguments[_key];
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
this.props = args;
|
|
16
|
+
throw new Error('The `updateProps` method must be implemented.');
|
|
9
17
|
}
|
|
10
18
|
|
|
11
19
|
init() {
|
|
@@ -27,7 +35,6 @@ export default class Service {
|
|
|
27
35
|
}
|
|
28
36
|
|
|
29
37
|
this.callbacks.set(key, callback);
|
|
30
|
-
return this;
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
has(key) {
|
|
@@ -45,13 +52,11 @@ export default class Service {
|
|
|
45
52
|
this.kill();
|
|
46
53
|
this.isInit = false;
|
|
47
54
|
}
|
|
48
|
-
|
|
49
|
-
return this;
|
|
50
55
|
}
|
|
51
56
|
|
|
52
57
|
trigger() {
|
|
53
|
-
for (var
|
|
54
|
-
args[
|
|
58
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
59
|
+
args[_key2] = arguments[_key2];
|
|
55
60
|
}
|
|
56
61
|
|
|
57
62
|
this.callbacks.forEach(function forEachCallback(callback) {
|
package/services/drag.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Use the
|
|
2
|
+
* Use the drag service.
|
|
3
3
|
*
|
|
4
4
|
* ```js
|
|
5
5
|
* import { useDrag } from '@studiometa/js-toolkit/services';
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
*
|
|
13
13
|
* @param {HTMLElement} target
|
|
14
14
|
* @param {DragServiceOptions} options
|
|
15
|
-
* @return {
|
|
15
|
+
* @return {DragService}
|
|
16
16
|
*/
|
|
17
|
-
export default function useDrag(target: HTMLElement, options: DragServiceOptions):
|
|
18
|
-
export type
|
|
17
|
+
export default function useDrag(target: HTMLElement, options: DragServiceOptions): DragService;
|
|
18
|
+
export type DragService = import('./index').ServiceInterface<DragServiceProps>;
|
|
19
19
|
export type PointerServiceProps = import('./pointer.js').PointerServiceProps;
|
|
20
20
|
export type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
|
|
21
21
|
export type DragServiceProps = {
|
|
@@ -75,17 +75,3 @@ export type DragServiceProps = {
|
|
|
75
75
|
export type DragServiceOptions = {
|
|
76
76
|
dampFactor?: number | undefined;
|
|
77
77
|
};
|
|
78
|
-
export type DragService = {
|
|
79
|
-
/**
|
|
80
|
-
* Add a callback function to the service. The key must be the HTML element targeted by the drag.
|
|
81
|
-
*/
|
|
82
|
-
add: (target: HTMLElement, callback: (props: DragServiceProps) => void, options?: DragServiceOptions) => void;
|
|
83
|
-
/**
|
|
84
|
-
* Remove a callback function to the service.
|
|
85
|
-
*/
|
|
86
|
-
remove: (target: HTMLElement) => void;
|
|
87
|
-
/**
|
|
88
|
-
* Get the current values of the resize service props.
|
|
89
|
-
*/
|
|
90
|
-
props: () => DragServiceProps;
|
|
91
|
-
};
|
package/services/drag.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
3
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
6
|
|
|
7
7
|
import Service from './Service.js';
|
|
8
8
|
import usePointer from './pointer.js';
|
|
@@ -24,36 +24,29 @@ class Drag extends Service {
|
|
|
24
24
|
|
|
25
25
|
_defineProperty(this, "id", void 0);
|
|
26
26
|
|
|
27
|
-
_defineProperty(this, "
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
_defineProperty(this, "hasInertia", false);
|
|
34
|
-
|
|
35
|
-
_defineProperty(this, "x", 0);
|
|
36
|
-
|
|
37
|
-
_defineProperty(this, "y", 0);
|
|
38
|
-
|
|
39
|
-
_defineProperty(this, "delta", {
|
|
40
|
-
x: 0,
|
|
41
|
-
y: 0
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
_defineProperty(this, "origin", {
|
|
45
|
-
x: 0,
|
|
46
|
-
y: 0
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
_defineProperty(this, "distance", {
|
|
50
|
-
x: 0,
|
|
51
|
-
y: 0
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
_defineProperty(this, "final", {
|
|
27
|
+
_defineProperty(this, "props", {
|
|
28
|
+
target: null,
|
|
29
|
+
mode: undefined,
|
|
30
|
+
isGrabbing: false,
|
|
31
|
+
hasInertia: false,
|
|
55
32
|
x: 0,
|
|
56
|
-
y: 0
|
|
33
|
+
y: 0,
|
|
34
|
+
delta: {
|
|
35
|
+
x: 0,
|
|
36
|
+
y: 0
|
|
37
|
+
},
|
|
38
|
+
origin: {
|
|
39
|
+
x: 0,
|
|
40
|
+
y: 0
|
|
41
|
+
},
|
|
42
|
+
distance: {
|
|
43
|
+
x: 0,
|
|
44
|
+
y: 0
|
|
45
|
+
},
|
|
46
|
+
final: {
|
|
47
|
+
x: 0,
|
|
48
|
+
y: 0
|
|
49
|
+
}
|
|
57
50
|
});
|
|
58
51
|
|
|
59
52
|
_defineProperty(this, "options", {
|
|
@@ -62,7 +55,7 @@ class Drag extends Service {
|
|
|
62
55
|
|
|
63
56
|
instanceIds += 1;
|
|
64
57
|
this.id = "drag-".concat(instanceIds);
|
|
65
|
-
this.target = target;
|
|
58
|
+
this.props.target = target;
|
|
66
59
|
this.options = _objectSpread(_objectSpread({}, this.options), options);
|
|
67
60
|
this.pointerHandler = this.pointerHandler.bind(this);
|
|
68
61
|
this.rafHandler = this.rafHandler.bind(this);
|
|
@@ -73,16 +66,16 @@ class Drag extends Service {
|
|
|
73
66
|
var options = {
|
|
74
67
|
passive: true
|
|
75
68
|
};
|
|
76
|
-
this.target.addEventListener('mousedown', this, options);
|
|
77
|
-
this.target.addEventListener('touchstart', this, options);
|
|
69
|
+
this.props.target.addEventListener('mousedown', this, options);
|
|
70
|
+
this.props.target.addEventListener('touchstart', this, options);
|
|
78
71
|
var pointer = usePointer();
|
|
79
72
|
pointer.add(this.id, this.pointerHandler);
|
|
80
73
|
return this;
|
|
81
74
|
}
|
|
82
75
|
|
|
83
76
|
kill() {
|
|
84
|
-
this.target.removeEventListener('mousemove', this);
|
|
85
|
-
this.target.removeEventListener('touchmove', this);
|
|
77
|
+
this.props.target.removeEventListener('mousemove', this);
|
|
78
|
+
this.props.target.removeEventListener('touchmove', this);
|
|
86
79
|
var pointer = usePointer();
|
|
87
80
|
pointer.remove(this.id);
|
|
88
81
|
return this;
|
|
@@ -95,27 +88,27 @@ class Drag extends Service {
|
|
|
95
88
|
}
|
|
96
89
|
|
|
97
90
|
start(x, y) {
|
|
98
|
-
this.x = x;
|
|
99
|
-
this.y = y;
|
|
100
|
-
this.origin.x = x;
|
|
101
|
-
this.origin.y = y;
|
|
102
|
-
this.delta.x = 0;
|
|
103
|
-
this.delta.y = 0;
|
|
104
|
-
this.distance.x = 0;
|
|
105
|
-
this.distance.y = 0;
|
|
106
|
-
this.final.x = x;
|
|
107
|
-
this.final.y = y;
|
|
108
|
-
this.mode = MODES.START;
|
|
109
|
-
this.isGrabbing = true;
|
|
91
|
+
this.props.x = x;
|
|
92
|
+
this.props.y = y;
|
|
93
|
+
this.props.origin.x = x;
|
|
94
|
+
this.props.origin.y = y;
|
|
95
|
+
this.props.delta.x = 0;
|
|
96
|
+
this.props.delta.y = 0;
|
|
97
|
+
this.props.distance.x = 0;
|
|
98
|
+
this.props.distance.y = 0;
|
|
99
|
+
this.props.final.x = x;
|
|
100
|
+
this.props.final.y = y;
|
|
101
|
+
this.props.mode = MODES.START;
|
|
102
|
+
this.props.isGrabbing = true;
|
|
110
103
|
this.trigger(this.props);
|
|
111
104
|
}
|
|
112
105
|
|
|
113
106
|
drop() {
|
|
114
|
-
this.isGrabbing = false;
|
|
115
|
-
this.mode = MODES.DROP;
|
|
116
|
-
this.hasInertia = true;
|
|
117
|
-
this.final.x = inertiaFinalValue(this.x, this.delta.x, this.options.dampFactor);
|
|
118
|
-
this.final.y = inertiaFinalValue(this.y, this.delta.y, this.options.dampFactor);
|
|
107
|
+
this.props.isGrabbing = false;
|
|
108
|
+
this.props.mode = MODES.DROP;
|
|
109
|
+
this.props.hasInertia = true;
|
|
110
|
+
this.props.final.x = inertiaFinalValue(this.props.x, this.props.delta.x, this.options.dampFactor);
|
|
111
|
+
this.props.final.y = inertiaFinalValue(this.props.y, this.props.delta.y, this.options.dampFactor);
|
|
119
112
|
this.trigger(this.props);
|
|
120
113
|
setTimeout(() => {
|
|
121
114
|
var raf = useRaf();
|
|
@@ -126,45 +119,45 @@ class Drag extends Service {
|
|
|
126
119
|
|
|
127
120
|
stop() {
|
|
128
121
|
useRaf().remove(this.id);
|
|
129
|
-
this.hasInertia = false;
|
|
130
|
-
this.mode = MODES.STOP;
|
|
122
|
+
this.props.hasInertia = false;
|
|
123
|
+
this.props.mode = MODES.STOP;
|
|
131
124
|
this.trigger(this.props);
|
|
132
125
|
}
|
|
133
126
|
|
|
134
127
|
rafHandler() {
|
|
135
|
-
if (!this.isGrabbing) {
|
|
136
|
-
this.x += this.delta.x;
|
|
137
|
-
this.y += this.delta.y;
|
|
138
|
-
this.distance.x = this.x - this.origin.x;
|
|
139
|
-
this.distance.y = this.y - this.origin.y;
|
|
140
|
-
this.delta.x *= this.options.dampFactor;
|
|
141
|
-
this.delta.y *= this.options.dampFactor;
|
|
142
|
-
|
|
143
|
-
if (this.mode !== MODES.INERTIA) {
|
|
144
|
-
this.mode = MODES.INERTIA;
|
|
128
|
+
if (!this.props.isGrabbing) {
|
|
129
|
+
this.props.x += this.props.delta.x;
|
|
130
|
+
this.props.y += this.props.delta.y;
|
|
131
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
132
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
133
|
+
this.props.delta.x *= this.options.dampFactor;
|
|
134
|
+
this.props.delta.y *= this.options.dampFactor;
|
|
135
|
+
|
|
136
|
+
if (this.props.mode !== MODES.INERTIA) {
|
|
137
|
+
this.props.mode = MODES.INERTIA;
|
|
145
138
|
}
|
|
146
139
|
|
|
147
140
|
this.trigger(this.props);
|
|
148
141
|
|
|
149
|
-
if (Math.abs(this.delta.x) < 0.1 && Math.abs(this.delta.y) < 0.1) {
|
|
142
|
+
if (Math.abs(this.props.delta.x) < 0.1 && Math.abs(this.props.delta.y) < 0.1) {
|
|
150
143
|
this.stop();
|
|
151
144
|
}
|
|
152
145
|
}
|
|
153
146
|
}
|
|
154
147
|
|
|
155
148
|
pointerHandler(props) {
|
|
156
|
-
if (this.isGrabbing) {
|
|
157
|
-
this.x = props.x;
|
|
158
|
-
this.y = props.y;
|
|
159
|
-
this.delta.x = props.delta.x;
|
|
160
|
-
this.delta.y = props.delta.y;
|
|
161
|
-
this.final.x = props.x;
|
|
162
|
-
this.final.y = props.y;
|
|
163
|
-
this.distance.x = this.x - this.origin.x;
|
|
164
|
-
this.distance.y = this.y - this.origin.y;
|
|
165
|
-
|
|
166
|
-
if (this.mode !== MODES.DRAG) {
|
|
167
|
-
this.mode = MODES.DRAG;
|
|
149
|
+
if (this.props.isGrabbing) {
|
|
150
|
+
this.props.x = props.x;
|
|
151
|
+
this.props.y = props.y;
|
|
152
|
+
this.props.delta.x = props.delta.x;
|
|
153
|
+
this.props.delta.y = props.delta.y;
|
|
154
|
+
this.props.final.x = props.x;
|
|
155
|
+
this.props.final.y = props.y;
|
|
156
|
+
this.props.distance.x = this.props.x - this.props.origin.x;
|
|
157
|
+
this.props.distance.y = this.props.y - this.props.origin.y;
|
|
158
|
+
|
|
159
|
+
if (this.props.mode !== MODES.DRAG) {
|
|
160
|
+
this.props.mode = MODES.DRAG;
|
|
168
161
|
}
|
|
169
162
|
|
|
170
163
|
this.trigger(this.props);
|
|
@@ -175,19 +168,8 @@ class Drag extends Service {
|
|
|
175
168
|
}
|
|
176
169
|
}
|
|
177
170
|
|
|
178
|
-
|
|
179
|
-
return
|
|
180
|
-
target: this.target,
|
|
181
|
-
mode: this.mode,
|
|
182
|
-
isGrabbing: this.isGrabbing,
|
|
183
|
-
hasInertia: this.hasInertia,
|
|
184
|
-
x: this.x,
|
|
185
|
-
y: this.y,
|
|
186
|
-
delta: this.delta,
|
|
187
|
-
origin: this.origin,
|
|
188
|
-
distance: this.distance,
|
|
189
|
-
final: this.final
|
|
190
|
-
};
|
|
171
|
+
updateProps() {
|
|
172
|
+
return this.props;
|
|
191
173
|
}
|
|
192
174
|
|
|
193
175
|
}
|
|
@@ -197,20 +179,15 @@ export default function useDrag(target, options) {
|
|
|
197
179
|
var drag = instances.get(target);
|
|
198
180
|
|
|
199
181
|
if (!drag) {
|
|
200
|
-
|
|
182
|
+
var instance = new Drag(target, options);
|
|
183
|
+
drag = {
|
|
184
|
+
add: instance.add.bind(instance),
|
|
185
|
+
remove: instance.remove.bind(instance),
|
|
186
|
+
has: instance.has.bind(instance),
|
|
187
|
+
props: instance.updateProps.bind(instance)
|
|
188
|
+
};
|
|
201
189
|
instances.set(target, drag);
|
|
202
190
|
}
|
|
203
191
|
|
|
204
|
-
|
|
205
|
-
var remove = drag.remove.bind(drag);
|
|
206
|
-
var has = drag.has.bind(drag);
|
|
207
|
-
|
|
208
|
-
var props = () => drag.props;
|
|
209
|
-
|
|
210
|
-
return {
|
|
211
|
-
add,
|
|
212
|
-
remove,
|
|
213
|
-
has,
|
|
214
|
-
props
|
|
215
|
-
};
|
|
192
|
+
return drag;
|
|
216
193
|
}
|
package/services/index.d.ts
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { default as useDrag } from "./drag.js";
|
|
2
|
+
export { default as useKey } from "./key.js";
|
|
3
|
+
export { default as useLoad } from "./load.js";
|
|
4
|
+
export { default as usePointer } from "./pointer.js";
|
|
5
|
+
export { default as useRaf } from "./raf.js";
|
|
6
|
+
export { default as useResize } from "./resize.js";
|
|
7
|
+
export { default as useScroll } from "./scroll.js";
|
|
8
|
+
export type ServiceInterface<T> = {
|
|
2
9
|
/**
|
|
3
10
|
* Remove a function from the resize service by its key.
|
|
4
11
|
*/
|
|
@@ -6,17 +13,13 @@ export type ServiceInterface = {
|
|
|
6
13
|
/**
|
|
7
14
|
* Add a callback to the service. The callback will receive the current service props as parameter.
|
|
8
15
|
*/
|
|
9
|
-
add: (key: string, cb: (props:
|
|
16
|
+
add: (key: string, cb: (props: T) => void) => void;
|
|
10
17
|
/**
|
|
11
18
|
* Test if the service has alreaydy a callback for the given key.
|
|
12
19
|
*/
|
|
13
20
|
has: (key: string) => boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Get the service's props.
|
|
23
|
+
*/
|
|
24
|
+
props: () => T;
|
|
14
25
|
};
|
|
15
|
-
import useKey from "./key.js";
|
|
16
|
-
import usePointer from "./pointer.js";
|
|
17
|
-
import useDrag from "./drag.js";
|
|
18
|
-
import useLoad from "./load.js";
|
|
19
|
-
import useRaf from "./raf.js";
|
|
20
|
-
import useResize from "./resize.js";
|
|
21
|
-
import useScroll from "./scroll.js";
|
|
22
|
-
export { useKey, usePointer, useDrag, useLoad, useRaf, useResize, useScroll };
|