1 line
No EOL
8.9 KiB
JavaScript
1 line
No EOL
8.9 KiB
JavaScript
import dom from"./../dom.js";let kbdProps="altKey,ctrlKey,metaKey,shiftKey".split(","),ptProps="pageX,pageY,clientX,clientY,screenX,screenY".split(",");function DragDrop(){this._boundPointerMove=this._PointerMove.bind(this),this._boundPointerUp=this._PointerUp.bind(this),this._boundContextMenu=this._contextMenu.bind(this),dom.addEventListener(document,window.PointerEvent?"pointerdown":"touchstart",this._pointerDown.bind(this),{passive:!0})}function shouldHandle(e){return!(e.defaultPrevented||(e=e.touches)&&2<e.length)}function getPoint(e,page){var touches=e.touches;return touches&&touches.length&&(e=touches[0]),{x:page?e.pageX:e.clientX,y:page?e.pageY:e.clientY}}function getTarget(pt){pt=document.elementFromPoint(pt.x,pt.y);if(pt){var btn=pt.closest("a,button,div[tabindex]");if(btn)return btn}return pt}function removeImage(instance,img,dragSource,lastPointerEvent){img.remove(),dragSource&&dispatchEvent(instance,lastPointerEvent,"dragendcomplete",dragSource,getPoint(lastPointerEvent))}function animateRemoveImage(instance,img,dragSource,lastPointerEvent){var time=!1===instance._dragY?400:300,opacityTime=instance._dragX&&instance._dragY?time-20:time;img.style.transition="transform "+time+"ms ease-out,opacity "+opacityTime+"ms ease-out",img.classList.remove("dragging"),img.style.transform="none",img.style.opacity="1",setTimeout(function(){removeImage(instance,img,dragSource,lastPointerEvent)},time)}function scrollYIfNeeded(e,pt,ptDown){var rect,boundarySize,topY1;"mouse"===e.pointerType&&(e=e.target.closest(".emby-scroller.scrollFrameY"))&&(rect=e.getScrollContainerBoundingClientRect(),boundarySize=Math.round(rect.height/6),topY1=rect.top,pt.y>=topY1&&pt.y<topY1+boundarySize?pt.y<ptDown.y&&e.scrollBy(-20):(topY1=rect.bottom)-boundarySize<=pt.y&&pt.y<topY1&&pt.y>ptDown.y&&e.scrollBy(20))}function copyProps(dst,src,props){for(let i=0;i<props.length;i++){var p=props[i];dst[p]=src[p]}}function copyStyle(src,dst){src instanceof HTMLCanvasElement&&((cDst=dst).width=(cSrc=src).width,cDst.height=cSrc.height,cDst.getContext("2d").drawImage(cSrc,0,0));var cSrc,cDst,cs=getComputedStyle(src);let i;for(i=0;i<cs.length;i++){var key=cs[i];key.indexOf("transition")<0&&(dst.style[key]=cs[key])}for(dst.style.pointerEvents="none",i=0;i<src.children.length;i++)copyStyle(src.children[i],dst.children[i]);dst.style.transform="none",dst.style.translate="none",dst.style.scale="none"}function dispatchEvent(instance,e,type,target,pt){if(e&&target){var evt=document.createEvent("Event"),t=e.touches?e.touches[0]:e;evt.initEvent(type,!0,!0),evt.button=0,evt.which=evt.buttons=1,evt.detail={polyfill:!0,dragX:instance._dragX,dragY:instance._dragY,pt:pt,ptDown:instance._ptDown},copyProps(evt,e,kbdProps),copyProps(evt,t,ptProps);let dataTransfer=instance._dataTransfer;return dataTransfer=dataTransfer||(instance._dataTransfer=new DataTransfer),evt.dataTransfer=dataTransfer,target.dispatchEvent(evt),evt.defaultPrevented}return!1}DragDrop.prototype.addAdditionalEventListeners=function(){this._devicePixelRatio=window.devicePixelRatio||1,dom.addEventListener(document,"pointermove",this._boundPointerMove,{passive:!1,capture:!1}),dom.addEventListener(document,"touchmove",this._boundPointerMove,{passive:!1,capture:!1}),window.PointerEvent?(dom.addEventListener(document,"pointerup",this._boundPointerUp,{passive:!0}),dom.addEventListener(document,"pointercancel",this._boundPointerUp,{passive:!0})):dom.addEventListener(document,"touchend",this._boundPointerUp,{passive:!0}),dom.addEventListener(document,"contextmenu",this._boundContextMenu,{passive:!0})},DragDrop.prototype.removeAdditionalEventListeners=function(){dom.removeEventListener(document,"pointermove",this._boundPointerMove,{passive:!1,capture:!1}),dom.removeEventListener(document,"touchmove",this._boundPointerMove,{passive:!1,capture:!1}),dom.removeEventListener(document,"pointerup",this._boundPointerUp,{passive:!0}),dom.removeEventListener(document,"pointercancel",this._boundPointerUp,{passive:!0}),dom.removeEventListener(document,"touchend",this._boundPointerUp,{passive:!0}),dom.removeEventListener(document,"contextmenu",this._boundContextMenu,{passive:!0})},DragDrop.prototype._contextMenu=function(e){this.removeAdditionalEventListeners(),this._destroyImage(),this._reset()},DragDrop.prototype._pointerDown=function(e){let pointerType=e.pointerType;if(("mouse"!==pointerType||0===e.button)&&shouldHandle(e)){this._reset();var target=e.target,src=target.closest('[draggable="true"]');if(src){this.addAdditionalEventListeners(src),this._dragSource=src,this._dragSourceDraggableX=src.classList.contains("draggable-x"),this._dragSourceDraggableY=src.classList.contains("draggable-y"),this._dragSourceDraggableXY=src.classList.contains("draggable-xy")||!this._dragSourceDraggableX&&!this._dragSourceDraggableY,this._ptDown=getPoint(e),this._lastPointerEvent=e;let delay=target.classList.contains("dragHandle")?200:400;pointerType||"touchstart"===e.type&&(pointerType="touch"),pointerType&&"touch"!==pointerType&&(delay=0),this._pointerDownTime=e.timeStamp,this._delay=delay}}},DragDrop.prototype._PointerMove=function(e){if("touch"!==e.pointerType||"pointermove"!==e.type){let dragEnabled=this._isDragEnabled;var pt=getPoint(e),ptDown=this._ptDown,deltaX=Math.abs(pt.x-ptDown.x),ptDown=Math.abs(pt.y-ptDown.y),dragSource=this._dragSource,deltaX=(!dragEnabled&&dragSource&&this._dragSourceDraggableX&&(ptDown<=5&&5<deltaX||ptDown<=3&&0<deltaX)&&(this._isDragEnabled=dragEnabled=!0,this._dragY=!1),dragEnabled||e.timeStamp-this._pointerDownTime>=this._delay&&this._dragSourceDraggableXY&&(this._dragY=!0,this._dragX=!0,this._isDragEnabled=dragEnabled=!0),deltaX+ptDown);if(!dragEnabled&&10<deltaX)this._reset();else if(dragEnabled){e.preventDefault();ptDown=e.touches;if(!ptDown||ptDown.length){let target=getTarget(pt);if(dragSource&&!this._img&&5<deltaX){if(dispatchEvent(this,this._lastPointerEvent,"dragstart",dragSource,pt))return this._dragSource=null,this._dragSourceDraggableX=null,this._dragSourceDraggableY=null,void(this._dragSourceDraggableXY=null);this._createImage(e),dispatchEvent(this,e,"dragenter",target,pt)}if(this._img){this._lastPointerEvent=e;ptDown=this._lastTarget;if(target===ptDown||ptDown&&target?.contains(ptDown)?ptDown&&(target=ptDown):(ptDown&&(ptDown.parentNode.style.cursor=null,ptDown.style.pointerEvents=null),dispatchEvent(this,this._lastPointerEvent,"dragleave",ptDown,pt),dispatchEvent(this,e,"dragenter",target,pt),this._lastTarget=target),this._moveImage(e,pt),target?.matches("a,button,div[tabindex]")&&(target.style.pointerEvents="none"),dispatchEvent(this,e,"dragover",target,pt))switch(this._isDropZone=!0,this._dataTransfer.dropEffectEmby){case"copy":target.parentNode.style.cursor="copy";break;case"move":target.parentNode.style.cursor="move";break;case"none":target.parentNode.style.cursor="no-drop";break;case"link":target.parentNode.style.cursor="alias";break;default:target.parentNode.style.cursor="copy"}else this._isDropZone=!1,target&&(target.parentNode.style.cursor="no-drop");dispatchEvent(this,e,"drag",dragSource,pt)}}}}},DragDrop.prototype._PointerUp=function(e){var pt;this.removeAdditionalEventListeners(),this._destroyImage(),shouldHandle(e)&&this._dragSource&&(pt=getPoint(this._lastPointerEvent),e.type.indexOf("cancel")<0&&this._isDropZone&&dispatchEvent(this,this._lastPointerEvent,"drop",this._lastTarget,pt),dispatchEvent(this,this._lastPointerEvent,"dragend",this._dragSource,pt)),this._reset()},DragDrop.prototype._reset=function(){this.removeAdditionalEventListeners(),this._destroyImage(),this._dragSource=null,this._dragSourceDraggableX=null,this._dragSourceDraggableY=null,this._dragSourceDraggableXY=null,this._lastPointerEvent=null;var lastTarget=this._lastTarget;lastTarget&&(lastTarget.parentNode.style.cursor=null,lastTarget.style.pointerEvents=null),this._lastTarget=null,this._ptDown=null,this._isDragEnabled=!1,this._isDropZone=!1,this._dataTransfer=null,this._pointerDownTime=0,this._delay=0,this._dragX=!0,this._dragY=!0},DragDrop.prototype._createImage=function(e){this._img&&this._destroyImage();var src=this._dragSource,src=(this._img=src.cloneNode(!0),copyStyle(src,this._img),src.getBoundingClientRect()),left=(this._img.style.opacity=".9",this._img.style.position="absolute",this._img.style.pointerEvents="none",this._img.style.zIndex="999999",src.left),src=src.top;this._img.style.left=Math.round(left)+"px",this._img.style.top=Math.round(src)+"px",this._img.classList.add("dragClone"),document.body.appendChild(this._img),this._img.offsetWidth,this._img.classList.add("dragging")},DragDrop.prototype._destroyImage=function(){var img=this._img;img&&(this._img=null,(this._isDropZone&&!1!==this._dragY?removeImage:animateRemoveImage)(this,img,this._dragSource,this._lastPointerEvent))},DragDrop.prototype._moveImage=function(e,pt){let _this=this;requestAnimationFrame(function(){var img=_this._img;if(img){var img=img.style,ptDown=_this._ptDown;let deltaX=pt.x-ptDown.x,deltaY=pt.y-ptDown.y;_this._dragX||(deltaX=0),_this._dragY||(deltaY=0),img.transform="translate("+Math.round(deltaX)+"px, "+Math.round(deltaY)+"px)",_this._dragY&&scrollYIfNeeded(e,pt,ptDown)}})},new DragDrop; |