@sutton-signwriting/sgnw-components/dist/components/draggabilly.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var i,n={exports:{}},s={exports:{}};function e(){return i||(i=1,t=s,function(i,n){t.exports?t.exports=n():i.getSize=n()}(window,(function(){function t(t){let i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}let i=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];return function(n){if("string"==typeof n&&(n=document.querySelector(n)),!n||"object"!=typeof n||!n.nodeType)return;let s=getComputedStyle(n);if("none"==s.display)return function(){let t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0};return i.forEach((i=>{t[i]=0})),t}();let e={};e.width=n.offsetWidth,e.height=n.offsetHeight;let h=e.isBorderBox="border-box"==s.boxSizing;i.forEach((t=>{let i=parseFloat(s[t]);e[t]=isNaN(i)?0:i}));let o=e.paddingLeft+e.paddingRight,r=e.paddingTop+e.paddingBottom,u=e.marginLeft+e.marginRight,f=e.marginTop+e.marginBottom,c=e.borderLeftWidth+e.borderRightWidth,d=e.borderTopWidth+e.borderBottomWidth,a=t(s.width);!1!==a&&(e.width=a+(h?0:o+c));let l=t(s.height);return!1!==l&&(e.height=l+(h?0:r+d)),e.innerWidth=e.width-(o+c),e.innerHeight=e.height-(r+d),e.outerWidth=e.width+u,e.outerHeight=e.height+f,e}}))),s.exports;var t}var h,o={exports:{}},r={exports:{}},u=r.exports;function f(){return h||(h=1,t="undefined"!=typeof window?window:u,i=function(){function t(){}let i=t.prototype;return i.on=function(t,i){if(!t||!i)return this;let n=this._events=this._events||{},s=n[t]=n[t]||[];return s.includes(i)||s.push(i),this},i.once=function(t,i){if(!t||!i)return this;this.on(t,i);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[i]=!0,this},i.off=function(t,i){let n=this._events&&this._events[t];if(!n||!n.length)return this;let s=n.indexOf(i);return-1!=s&&n.splice(s,1),this},i.emitEvent=function(t,i){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),i=i||[];let s=this._onceEvents&&this._onceEvents[t];for(let e of n)s&&s[e]&&(this.off(t,e),delete s[e]),e.apply(this,i);return this},i.allOff=function(){return delete this._events,delete this._onceEvents,this},t},r.exports?r.exports=i():t.EvEmitter=i()),r.exports;var t,i}
/*!
 * Unidragger v3.0.1
 * Draggable base class
 * MIT license
 */var c,d,a=o.exports;function l(){return c||(c=1,t=o,function(i,n){t.exports?t.exports=n(i,f()):i.Unidragger=n(i,i.EvEmitter)}("undefined"!=typeof window?window:a,(function(t,i){function n(){}let s,e,h=n.prototype=Object.create(i.prototype);h.handleEvent=function(t){let i="on"+t.type;this[i]&&this[i](t)},"ontouchstart"in t?(s="touchstart",e=["touchmove","touchend","touchcancel"]):t.PointerEvent?(s="pointerdown",e=["pointermove","pointerup","pointercancel"]):(s="mousedown",e=["mousemove","mouseup"]),h.touchActionValue="none",h.bindHandles=function(){this._bindHandles("addEventListener",this.touchActionValue)},h.unbindHandles=function(){this._bindHandles("removeEventListener","")},h._bindHandles=function(i,n){this.handles.forEach((e=>{e[i](s,this),e[i]("click",this),t.PointerEvent&&(e.style.touchAction=n)}))},h.bindActivePointerEvents=function(){e.forEach((i=>{t.addEventListener(i,this)}))},h.unbindActivePointerEvents=function(){e.forEach((i=>{t.removeEventListener(i,this)}))},h.withPointer=function(t,i){i.pointerId===this.pointerIdentifier&&this[t](i,i)},h.withTouch=function(t,i){let n;for(let t of i.changedTouches)t.identifier===this.pointerIdentifier&&(n=t);n&&this[t](i,n)},h.onmousedown=function(t){this.pointerDown(t,t)},h.ontouchstart=function(t){this.pointerDown(t,t.changedTouches[0])},h.onpointerdown=function(t){this.pointerDown(t,t)};const o=["TEXTAREA","INPUT","SELECT","OPTION"],r=["radio","checkbox","button","submit","image","file"];return h.pointerDown=function(t,i){let n=o.includes(t.target.nodeName),s=r.includes(t.target.type);!this.isPointerDown&&!t.button&&(!n||s)&&(this.isPointerDown=!0,this.pointerIdentifier=void 0!==i.pointerId?i.pointerId:i.identifier,this.pointerDownPointer={pageX:i.pageX,pageY:i.pageY},this.bindActivePointerEvents(),this.emitEvent("pointerDown",[t,i]))},h.onmousemove=function(t){this.pointerMove(t,t)},h.onpointermove=function(t){this.withPointer("pointerMove",t)},h.ontouchmove=function(t){this.withTouch("pointerMove",t)},h.pointerMove=function(t,i){let n={x:i.pageX-this.pointerDownPointer.pageX,y:i.pageY-this.pointerDownPointer.pageY};this.emitEvent("pointerMove",[t,i,n]),!this.isDragging&&this.hasDragStarted(n)&&this.dragStart(t,i),this.isDragging&&this.dragMove(t,i,n)},h.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3},h.dragStart=function(t,i){this.isDragging=!0,this.isPreventingClicks=!0,this.emitEvent("dragStart",[t,i])},h.dragMove=function(t,i,n){this.emitEvent("dragMove",[t,i,n])},h.onmouseup=function(t){this.pointerUp(t,t)},h.onpointerup=function(t){this.withPointer("pointerUp",t)},h.ontouchend=function(t){this.withTouch("pointerUp",t)},h.pointerUp=function(t,i){this.pointerDone(),this.emitEvent("pointerUp",[t,i]),this.isDragging?this.dragEnd(t,i):this.staticClick(t,i)},h.dragEnd=function(t,i){this.isDragging=!1,setTimeout((()=>delete this.isPreventingClicks)),this.emitEvent("dragEnd",[t,i])},h.pointerDone=function(){this.isPointerDown=!1,delete this.pointerIdentifier,this.unbindActivePointerEvents(),this.emitEvent("pointerDone")},h.onpointercancel=function(t){this.withPointer("pointerCancel",t)},h.ontouchcancel=function(t){this.withTouch("pointerCancel",t)},h.pointerCancel=function(t,i){this.pointerDone(),this.emitEvent("pointerCancel",[t,i])},h.onclick=function(t){this.isPreventingClicks&&t.preventDefault()},h.staticClick=function(t,i){let n="mouseup"===t.type;n&&this.isIgnoringMouseUp||(this.emitEvent("staticClick",[t,i]),n&&(this.isIgnoringMouseUp=!0,setTimeout((()=>{delete this.isIgnoringMouseUp}),400)))},n}))),o.exports;var t}
/*!
 * Draggabilly v3.0.0
 * Make that shiz draggable
 * https://draggabilly.desandro.com
 * MIT license
 */var p,g=(d||(d=1,p=n,function(t,i){p.exports?p.exports=i(t,e(),l()):t.Draggabilly=i(t,t.getSize,t.Unidragger)}("undefined"!=typeof window?window:n.exports,(function(t,i,n){let s=t.jQuery;function e(t,i){this.element="string"==typeof t?document.querySelector(t):t,s&&(this.$element=s(this.element)),this.options={},this.option(i),this._create()}let h=e.prototype=Object.create(n.prototype);h.option=function(t){this.options={...this.options,...t}};const o=["relative","absolute","fixed"];h._create=function(){this.position={},this._getPosition(),this.startPoint={x:0,y:0},this.dragPoint={x:0,y:0},this.startPosition={...this.position};let t=getComputedStyle(this.element);o.includes(t.position)||(this.element.style.position="relative"),this.on("pointerDown",this.handlePointerDown),this.on("pointerUp",this.handlePointerUp),this.on("dragStart",this.handleDragStart),this.on("dragMove",this.handleDragMove),this.on("dragEnd",this.handleDragEnd),this.setHandles(),this.enable()},h.setHandles=function(){let{handle:t}=this.options;this.handles="string"==typeof t?this.element.querySelectorAll(t):"object"==typeof t&&t.length?t:t instanceof HTMLElement?[t]:[this.element]};const r=["dragStart","dragMove","dragEnd"];let u=h.emitEvent;function f(t,i,n){return i?(n=n||"round",Math[n](t/i)*i):t}h.emitEvent=function(i,n){if(!this.isEnabled&&r.includes(i))return;u.call(this,i,n);let s,e=t.jQuery;if(!e||!this.$element)return;let h=n;n&&n[0]instanceof Event&&([s,...h]=n);let o=e.Event(s);o.type=i,this.$element.trigger(o,h)},h._getPosition=function(){let t=getComputedStyle(this.element),i=this._getPositionCoord(t.left,"width"),n=this._getPositionCoord(t.top,"height");this.position.x=isNaN(i)?0:i,this.position.y=isNaN(n)?0:n,this._addTransformPosition(t)},h._getPositionCoord=function(t,n){if(t.includes("%")){let s=i(this.element.parentNode);return s?parseFloat(t)/100*s[n]:0}return parseInt(t,10)},h._addTransformPosition=function(t){let i=t.transform;if(!i.startsWith("matrix"))return;let n=i.split(","),s=i.startsWith("matrix3d")?12:4,e=parseInt(n[s],10),h=parseInt(n[s+1],10);this.position.x+=e,this.position.y+=h},h.handlePointerDown=function(t,i){this.isEnabled&&(this.pointerDownPointer={pageX:i.pageX,pageY:i.pageY},t.preventDefault(),document.activeElement.blur(),this.bindActivePointerEvents(t),this.element.classList.add("is-pointer-down"))},h.handleDragStart=function(){this.isEnabled&&(this._getPosition(),this.measureContainment(),this.startPosition.x=this.position.x,this.startPosition.y=this.position.y,this.setLeftTop(),this.dragPoint.x=0,this.dragPoint.y=0,this.element.classList.add("is-dragging"),this.animate())},h.measureContainment=function(){let t=this.getContainer();if(!t)return;let n=i(this.element),s=i(t),{borderLeftWidth:e,borderRightWidth:h,borderTopWidth:o,borderBottomWidth:r}=s,u=this.element.getBoundingClientRect(),f=t.getBoundingClientRect(),c=e+h,d=o+r,a=this.relativeStartPosition={x:u.left-(f.left+e),y:u.top-(f.top+o)};this.containSize={width:s.width-c-a.x-n.width,height:s.height-d-a.y-n.height}},h.getContainer=function(){let t=this.options.containment;if(t)return t instanceof HTMLElement?t:"string"==typeof t?document.querySelector(t):this.element.parentNode},h.handleDragMove=function(t,i,n){if(!this.isEnabled)return;let s=n.x,e=n.y,h=this.options.grid,o=h&&h[0],r=h&&h[1];s=f(s,o),e=f(e,r),s=this.containDrag("x",s,o),e=this.containDrag("y",e,r),s="y"==this.options.axis?0:s,e="x"==this.options.axis?0:e,this.position.x=this.startPosition.x+s,this.position.y=this.startPosition.y+e,this.dragPoint.x=s,this.dragPoint.y=e},h.containDrag=function(t,i,n){if(!this.options.containment)return i;let s="x"==t?"width":"height",e=f(-this.relativeStartPosition[t],n,"ceil"),h=this.containSize[s];return h=f(h,n,"floor"),Math.max(e,Math.min(h,i))},h.handlePointerUp=function(){this.element.classList.remove("is-pointer-down")},h.handleDragEnd=function(){this.isEnabled&&(this.element.style.transform="",this.setLeftTop(),this.element.classList.remove("is-dragging"))},h.animate=function(){this.isDragging&&(this.positionDrag(),requestAnimationFrame((()=>this.animate())))},h.setLeftTop=function(){let{x:t,y:i}=this.position;this.element.style.left=`${t}px`,this.element.style.top=`${i}px`},h.positionDrag=function(){let{x:t,y:i}=this.dragPoint;this.element.style.transform=`translate3d(${t}px, ${i}px, 0)`},h.setPosition=function(t,i){this.position.x=t,this.position.y=i,this.setLeftTop()},h.enable=function(){this.isEnabled||(this.isEnabled=!0,this.bindHandles())},h.disable=function(){this.isEnabled&&(this.isEnabled=!1,this.isDragging&&this.dragEnd(),this.unbindHandles())};const c=["transform","left","top","position"];return h.destroy=function(){this.disable(),c.forEach((t=>{this.element.style[t]=""})),this.unbindHandles(),this.$element&&this.$element.removeData("draggabilly")},h._init=function(){},s&&s.bridget&&s.bridget("draggabilly",e),e}))),n.exports),m=t(g);export{m as d}