coherent-gameface-interaction-manager/dist/draggable.min.js

Library for the most common UI interactions

var draggable=(()=>{var h=(i,e)=>()=>(i&&(e=i(i=0)),e);var B=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports);var p,D,w=h(()=>{p=class{constructor(e){this.draggableElements=[],this.draggedElement=null,this.enabled=!1,this.onMouseDown=this.onMouseDown.bind(this),this.onMouseMove=this.onMouseMove.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.options=e}get draggedItemIndex(){return[...this.draggableElements].indexOf(this.draggedElement)}get bodyScrollOffset(){return{x:document.body.scrollLeft,y:document.body.scrollTop}}setPointerOffset(e,t,n){let{x:r,y:s}=n.getBoundingClientRect();this.offset={x:e-r,y:t-s}}},D=p});function O(i){return i*180/Math.PI}function M(i,e,t){return Math.min(Math.max(i,e),t)}function N(){return(Math.random()+1).toString(36).substring(7)}function f(i,e,t,n){let r=i-t,s=e-n;return Math.hypot(r,s)}function P(i,e,t,n){return{x:(i+t)/2,y:(e+n)/2}}var I=h(()=>{});var b,g,S=h(()=>{b=class i{constructor(){this.actions=[],this.keyboardFunctions=[],this.gamepadFunctions=[]}init(){window._IM||(window._IM=new i)}getKeys(e){return _IM.keyboardFunctions.filter(t=>t.keys.every(n=>e.includes(n)))}getKeysIndex(e){return _IM.keyboardFunctions.findIndex(t=>t.keys.every(n=>e.includes(n)))}getGamepadAction({actions:e,type:t}){return _IM.gamepadFunctions.find(n=>n.actions.every(r=>e.includes(r))&&n.type===t&&n.actions.length===e.length)}getGamepadActions(e){return _IM.gamepadFunctions.filter(t=>t.actions.every(n=>e.includes(n))&&t.actions.length===e.length)}getGamepadActionIndex(e){return _IM.gamepadFunctions.findIndex(t=>t.actions.every(n=>e.includes(n)))}getAction(e){return _IM.actions.find(t=>t.name===e)}getActionIndex(e){return _IM.actions.findIndex(t=>t.name===e)}},g=new b});var _,E,A=h(()=>{S();_=class{register(e,t){if(g.getAction(e))return console.error(`The following action "${e}" is already registered!`);_IM.actions.push({name:e,callback:t})}remove(e){let t=g.getActionIndex(e);if(t===-1)return console.error(`${e} is not a registered action!`);_IM.actions.splice(t,1)}execute(e,t){let n=g.getAction(e);if(!n)return console.error(`${e} is not a registered action!`);n.callback(t)}},E=new _});function k(i,e){if(e<0&&i>-200&&i<200)return"top";if(e>0&&i>-200&&i<200)return"bottom";if(i<0&&e>-200&&e<200)return"left";if(i>0&&e>-200&&e<200)return"right";if(i<=-200&&e<=-200)return"top-left";if(i>=200&&e<=-200)return"top-right";if(i<=-200&&e>=200)return"bottom-left";if(i>=200&&e>=200)return"bottom-right"}function d(i){return i instanceof HTMLElement?i:document.querySelector(i)}var R=h(()=>{});var T,x,W,X=h(()=>{R();I();T=2,x=class{constructor(){this.activeTouches=new Map}hold(e){if(!e)return console.error("Options not provided for hold!");let t,n=d(e.element);if(!n)return console.error("Element not found!");let r=({touches:o})=>{this.activeTouches.set(o[0].identifier,o[0]),t=setTimeout(()=>{e.callback&&e.callback()},e.time||1e3)},s=({touches:o})=>{this.activeTouches.delete(o[0].identifier),clearTimeout(t)};return n.addEventListener("touchstart",r),n.addEventListener("touchend",s),{remove(){n.removeEventListener("touchstart",r),n.removeEventListener("touchend",s)}}}tap(e){if(!e)return console.error("Options not provided for tap!");let t,n,r=!0,s=e.tapsNumber||1,o=d(e.element);if(!o)return console.error("Element not found!");let u=({touches:c})=>{this.activeTouches.set(c[0].identifier,c[0]),clearTimeout(n),r=!0,t=setTimeout(()=>{r=!1},e.tapTime||200)},a=({touches:c})=>{this.activeTouches.delete(c[0].identifier),clearTimeout(t),r&&(s--,n=setTimeout(()=>{s=e.tapsNumber||1,clearTimeout(n)},e.betweenTapsTime||500),!(s!==0||!e.callback)&&(e.callback(),r=!0,clearTimeout(t),s=e.tapsNumber||1))};return o.addEventListener("touchstart",u),o.addEventListener("touchend",a),{remove(){o.removeEventListener("touchstart",u),o.removeEventListener("touchend",a)}}}drag(e){if(!e)return console.error("Options not provided for drag!");let t=d(e.element);if(!t)return console.error("Element not found!");let n=({touches:o,target:u,currentTarget:a})=>{this.activeTouches.set(o[0].identifier,o[0]),document.addEventListener("touchmove",r),document.addEventListener("touchend",s),e.onDragStart&&e.onDragStart({x:o[0].clientX,y:o[0].clientY,target:u,currentTarget:a})},r=({touches:o})=>{this.activeTouches.has(o[0].identifier)&&e.onDrag&&e.onDrag({x:o[0].clientX,y:o[0].clientY})},s=({touches:o})=>{this.activeTouches.delete(o[0].identifier),document.removeEventListener("touchmove",r),document.removeEventListener("touchend",s),e.onDragEnd&&e.onDragEnd({x:o[0].clientX,y:o[0].clientY})};return t.addEventListener("touchstart",n),{remove(){t.removeEventListener("touchstart",n)}}}swipe(e){if(!e)return console.error("Options not provided for swipe!");let t,n,r,s=!0,o=100;e.touchNumber||=1;let u=d(e.element);if(!u)return console.error("Element not found!");let a=({touches:l})=>{this.activeTouches.set(l[0].identifier,l[0]),this.activeTouches.size>e.touchNumber&&(document.removeEventListener("touchmove",c),document.removeEventListener("touchend",m)),this.activeTouches.size===e.touchNumber&&(t=setTimeout(()=>{s=!1,clearTimeout(t),t=null},1e3),document.addEventListener("touchmove",c),document.addEventListener("touchend",m))},c=({touches:l})=>{if(!this.activeTouches.has(l[0].identifier))return;let{clientX:L,clientY:F}=this.activeTouches.get(l[0].identifier),$=l[0].clientX-L,z=l[0].clientY-F;n=k($,z),r=f(L,F,l[0].clientX,l[0].clientY)},m=({touches:l})=>{this.activeTouches.delete(l[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",c),document.removeEventListener("touchend",m),v()&&e.callback(n),clearTimeout(t),s=!0,t=null)},v=()=>s&&e.callback&&n&&r>o;return u.addEventListener("touchstart",a),{remove(){u.removeEventListener("touchstart",a)}}}pinch(e){if(!e)return console.error("Options not provided for pinch!");let t,n=40,r=d(e.element);if(!r)return console.error("Element not found!");let s=({touches:a})=>{this.activeTouches.set(a[0].identifier,a[0]),!(this.activeTouches.size<T)&&(document.addEventListener("touchmove",o),document.addEventListener("touchend",u),t=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY))},o=({touches:a})=>{if(this.activeTouches.size!==T)return;this.activeTouches.set(a[0].identifier,a[0]);let c=f(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY),m=Math.sign(c-t)*n;t=c;let v=P(this.activeTouches.get(0).clientX,this.activeTouches.get(0).clientY,this.activeTouches.get(1).clientX,this.activeTouches.get(1).clientY);e.callback&&e.callback({pinchDelta:m,midpoint:v})},u=({touches:a})=>{this.activeTouches.delete(a[0].identifier),this.activeTouches.size===0&&(document.removeEventListener("touchmove",o),document.removeEventListener("touchend",u))};return r.addEventListener("touchstart",s),{remove(){r.removeEventListener("touchstart",s)}}}rotate(e){if(!e)return console.error("Options not provided for rotate!");let t=0,n,r=d(e.element);if(!r)return console.error("Element not found!");let s=({touches:c})=>{this.activeTouches.size<T||(this.activeTouches.set(c[0].identifier,c[0]),t=a()-n,e.callback&&e.callback(t))},o=({touches:c})=>{this.activeTouches.set(c[0].identifier,c[0]),this.activeTouches.size===T&&(n=a()-t,document.addEventListener("touchmove",s),document.addEventListener("touchend",u))},u=({touches:c})=>{this.activeTouches.delete(c[0].identifier),document.removeEventListener("touchmove",s),document.removeEventListener("touchend",u)};r.addEventListener("touchstart",o);let a=()=>{let v=this.activeTouches.get(0).clientY-this.activeTouches.get(1).clientY,l=this.activeTouches.get(0).clientX-this.activeTouches.get(1).clientX;return(O(Math.atan2(v,l))+360+90)%360};return{remove(){r.removeEventListener("touchstart",o)}}}},W=new x});var H,y,Y,C=h(()=>{w();I();A();X();H=["x","y"],y=class extends D{constructor(e){super(e);let t=N();this.actionName=`drag-around-${t}`,this.restrict={top:0,left:0,right:1/0,bottom:1/0},this._touchEnabled=!1,this.touchEvents=[],this.init()}set touchEnabled(e){this._touchEnabled!==e&&(this._touchEnabled=e,this._touchEnabled?this.addTouchEvents():this.removeTouchEvents())}init(){if(!this.enabled){if(this.draggableElements=document.querySelectorAll(this.options.element),this.draggableElements.length===0)return console.error(`${this.options.element} is not a valid element selector.`);this.draggableElements.forEach(e=>e.addEventListener("mousedown",this.onMouseDown)),this.registerDragActions(),this.enabled=!0}}deinit(){this.enabled&&(this.enabled=!1,this.draggableElements.forEach(e=>e.removeEventListener("mousedown",this.onMouseDown)),this.removeDragActions())}onMouseDown(e){this.draggedElement=e.currentTarget,this.draggedElement.style.position="absolute",this.elementRect=this.draggedElement.getBoundingClientRect(),this.setRestriction(),this.setPointerOffset(e.clientX,e.clientY,this.draggedElement),E.execute(this.actionName,{x:e.clientX+this.bodyScrollOffset.x-this.offset.x,y:e.clientY+this.bodyScrollOffset.y-this.offset.y,index:this.draggedItemIndex}),this.options.dragClass&&this.draggedElement.classList.add(this.options.dragClass),this.options.onDragStart&&this.options.onDragStart(this.draggedElement),document.addEventListener("mousemove",this.onMouseMove),document.addEventListener("mouseup",this.onMouseUp)}onMouseMove(e){E.execute(this.actionName,{x:e.clientX+this.bodyScrollOffset.x-this.offset.x,y:e.clientY+this.bodyScrollOffset.y-this.offset.y,index:this.draggedItemIndex})}onMouseUp(){document.removeEventListener("mousemove",this.onMouseMove),document.removeEventListener("mouseup",this.onMouseUp),this.options.onDragEnd&&this.options.onDragEnd(this.draggedElement),this.options.dragClass&&this.draggedElement.classList.remove(this.options.dragClass),this.draggedElement=null}registerDragActions(){E.register(this.actionName,({x:e,y:t,index:n})=>{if(!this.draggableElements[n])return console.error(`There is no draggable element at index ${n}`);this.options.lockAxis&&H.includes(this.options.lockAxis)&&(e=this.options.lockAxis==="y"?this.elementRect.x:e,t=this.options.lockAxis==="x"?this.elementRect.y:t),this.draggableElements[n].style.left=`${M(e,this.restrict.left,this.restrict.right)}px`,this.draggableElements[n].style.top=`${M(t,this.restrict.top,this.restrict.bottom)}px`,this.options.onDragMove&&this.options.onDragMove({x:e,y:t})})}removeDragActions(){E.remove(this.actionName)}addTouchEvents(){this.draggableElements.forEach(e=>{this.touchEvents.push(W.drag({element:e,onDragStart:t=>{this.onMouseDown({currentTarget:t.currentTarget,clientX:t.x,clientY:t.y})},onDrag:({x:t,y:n})=>{this.onMouseMove({clientX:t,clientY:n})},onDragEnd:()=>{this.onMouseUp()}}))})}removeTouchEvents(){this.touchEvents.forEach(e=>e.remove()),this.touchEvents=[]}setRestriction(){if(!this.options.restrictTo)return;let e=document.querySelector(this.options.restrictTo);if(!e)return console.error(`The element ${this.options.restrictTo} you trying to restrict dragging to is not a valid element`);let{x:t,y:n,height:r,width:s}=e.getBoundingClientRect();this.restrict={top:n,left:t,right:s+t-this.elementRect.width,bottom:r+n-this.elementRect.height}}},Y=y});var q=B((le,U)=>{C();S();g.init();U.exports=Y});return q();})();
//# sourceMappingURL=draggable.min.js.map