1 line
No EOL
17 KiB
JavaScript
1 line
No EOL
17 KiB
JavaScript
import appRouter from"./../approuter.js";import dom from"./../dom.js";import focusManager from"./../focusmanager.js";import inputManager from"./../common/inputmanager.js";import browser from"./../browser.js";import events from"./../emby-apiclient/events.js";import layoutManager from"./../layoutmanager.js";import Gesture from"./../gesture/gesture.js";import skinViewManager from"./../skinviewmanager.js";let uiDependencies=["css!modules/dialoghelper/dialoghelper.css"],appMode=globalThis.appMode,supportsTranslate=CSS.supports("translate","40px 100px"),allowHistory=browser.tv&&"standalone"===(appMode||"standalone");function loadDependencies(){var deps=uiDependencies;deps.length&&require(deps)}loadDependencies();let globalOnOpenCallback,SupportsCssAnimations=CSS.supports("animation-name","a"),AnimationSupported=SupportsCssAnimations&&dom.supportsEventListenerOnce();function enableAnimation(dlg){return!(!AnimationSupported||dlg&&dlg.classList.contains("dialog-noanimation"))}function tryRemoveElement(elem){try{elem.remove()}catch(err){console.log("Error removing dialog element: "+err)}}function getScrollingElement(){return document.scrollingElement||document.documentElement}function DialogHashHandler(dlg,hash,resolve){let originalUrl=window.location.href,activeElement=document.activeElement,removeScrollLockOnClose=!1;function onHashChange(e){var isBack=originalUrl===window.location.href;!isBack&&isOpened(dlg)||window.removeEventListener("popstate",onHashChange),isBack&&hideDialog(dlg)}function onNavigate(e){dlg._closedForNavigation=!0,close(dlg)}function onInputCommand(e){var command=e.detail.command;switch(console.log("dialogHelper input command: "+command),command){case"left":case"right":case"up":case"down":case"pageup":case"pagedown":case"select":e.stopPropagation();break;case"home":blockInputCommandNavigation(dlg)&&e.preventDefault();break;case"end":case"settings":case"guide":case"recordedtv":case"favorites":case"channelup":case"channeldown":e.preventDefault();break;case"back":e.preventDefault(),e.stopPropagation(),requestClose(dlg);break;case"forward":e.preventDefault(),e.stopPropagation()}}function afterClosed(){resolve({element:dlg})}dom.addEventListener(dlg,"preclosing",function(){var elemForEvents=dlg.dialogContainer;elemForEvents&&dlg.boundDocumentMouseDown&&(dom.removeEventListener(elemForEvents,window.PointerEvent?"pointerdown":"mousedown",dlg.boundDocumentMouseDown,{passive:!0}),dlg.boundDocumentMouseDown=null),elemForEvents&&dlg.boundDocumentClick&&(dom.removeEventListener(elemForEvents,"click",dlg.boundDocumentClick,{passive:!0}),dlg.boundDocumentClick=null),inputManager.off(dlg,onInputCommand),events.off(appRouter,"navigate",onNavigate),window.removeEventListener("popstate",onHashChange)},{once:!0}),dom.addEventListener(dlg,"close",function(){(elemForEvents=dlg.dialogContainer)&&dlg.boundDocumentMouseDown&&(dom.removeEventListener(elemForEvents,window.PointerEvent?"pointerdown":"mousedown",dlg.boundDocumentMouseDown,{passive:!0}),dlg.boundDocumentMouseDown=null),elemForEvents&&dlg.boundDocumentClick&&(dom.removeEventListener(elemForEvents,"click",dlg.boundDocumentClick,{passive:!0}),dlg.boundDocumentClick=null),inputManager.off(dlg,onInputCommand),events.off(appRouter,"navigate",onNavigate),window.removeEventListener("popstate",onHashChange),dlg.classList.remove("opened"),removeScrollLockOnClose&&getScrollingElement().classList.remove("withDialogOpen"),!1!==dlg.dialogOptions?.refocus&&activeElement&&focusManager.focus(activeElement);var elemForEvents=dlg.dialogContainer;"false"!==dlg.getAttribute("data-removeonclose")?elemForEvents?(removeBackdrop(dlg),dlg.dialogContainer=null):tryRemoveElement(dlg):elemForEvents&&elemForEvents.classList.remove("dialogBackdropOpened"),isHistoryEnabled(dlg)?setTimeout(afterClosed,1):afterClosed()},{once:!0}),addBackdropOverlay(dlg),dlg.classList.remove("hide"),dlg.classList.add("opened"),dlg.dispatchEvent(new CustomEvent("open",{bubbles:!1,cancelable:!1}));var scrollingElement=getScrollingElement();"true"!==dlg.getAttribute("data-lockscroll")||scrollingElement.classList.contains("withDialogOpen")||(scrollingElement.classList.add("withDialogOpen"),removeScrollLockOnClose=!0),animateDialogOpen(dlg),isHistoryEnabled(dlg)&&(appRouter.pushState({dialogId:hash},"Dialog","#"+hash),window.addEventListener("popstate",onHashChange)),inputManager.on(dlg,onInputCommand),events.on(appRouter,"navigate",onNavigate),positionDialog(dlg,!1===dlg.dialogOptions?.setDialogSize),setTimeout(()=>dlg.classList.add("afterOpened"),10)}function onOpenAnimationFinish(e){e.target===e.currentTarget&&(dom.removeEventListener(this,"animationend",onOpenAnimationFinish,{passive:!0}),"false"!==this.getAttribute("data-focusscope")&&focusManager.pushScope(this),this.dispatchEvent(new CustomEvent("opened",{bubbles:!1,cancelable:!1})),"true"===this.getAttribute("data-autofocus"))&&focusManager.autoFocus(this,{skipIfNotEnabled:!1!==this.dialogOptions?.skipAutoFocusIfNotEnabled})}function animateDialogOpen(dlg){enableAnimation(dlg)?dom.addEventListener(dlg,"animationend",onOpenAnimationFinish,{passive:!0}):onOpenAnimationFinish.call(dlg,{target:dlg,currentTarget:dlg})}function onDocumentMouseDown(e){this.pointerDownTarget=e.target}function onDocumentClick(e){e=e.target;this.pointerDownTarget&&this.pointerDownTarget!==this.dialogContainer||e!==this.dialogContainer&&this.contains(e)||requestClose(this),this.pointerDownTarget=null}function bindEvents(){this.boundDocumentMouseDown||(this.boundDocumentMouseDown=onDocumentMouseDown.bind(this));var elemForEvents=this.dialogContainer;elemForEvents&&(dom.addEventListener(elemForEvents,window.PointerEvent?"pointerdown":"mousedown",this.boundDocumentMouseDown,{passive:!0}),this.boundDocumentClick||(this.boundDocumentClick=onDocumentClick.bind(this)),dom.addEventListener(elemForEvents,"click",this.boundDocumentClick,{passive:!0}))}function addBackdropOverlay(dlg){var transparentBackground=dlg.getAttribute("data-transparentbackground")||"false",blurBackground=dlg.getAttribute("data-blurbackground")&&dom.allowBackdropFilter();"true"===transparentBackground&&!blurBackground||(dlg.dialogContainer.classList.add("dialogBackdrop"),"true"===transparentBackground&&dlg.dialogContainer.classList.add("dialogBackdrop-nomouse"),blurBackground&&dlg.dialogContainer.classList.add("dialogBackdrop-blur"),"auto"===transparentBackground&&dlg.dialogContainer.classList.add("dialogBackdrop-auto"),dlg.dialogContainer.offsetWidth,dlg.dialogContainer.classList.add("dialogBackdropOpened")),setTimeout(bindEvents.bind(dlg),100)}function blockInputCommandNavigation(dlg){return"false"!==dlg.getAttribute("data-blocknav")}function isHistoryEnabled(dlg){return"true"===dlg.getAttribute("data-history")}function getOffsets(elem,windowSize){return document?{top:(elem=elem.getBoundingClientRect()).top,bottom:windowSize.innerHeight-elem.bottom,left:elem.left,right:windowSize.innerWidth-elem.right,width:elem.width,height:elem.height,verticalPositionProp:"top",horizontalPositionProp:"left"}:null}let UnknownDialogHeight=300,UnknownDialogWidth=160;function getPosition(options,dlg,isInitialPositioning){var windowSize=dom.getWindowSize(),pos=getOffsets(options.positionTo,windowSize);let positionX=options.positionX,positionY=options.positionY;var containerHeight,padding,overflowLeft,isRTL="rtl"===document.dir;if(isRTL)switch(positionX){case"right":positionX="left";break;case"left":positionX="right";break;case"after":positionX="before";break;case"before":positionX="after"}switch(null!=options.positionClientY&&(pos.top=options.positionClientY,positionY="match"),positionY){case"bottom":pos.top+=pos.height||0,pos.height&&(pos.top+=2);break;case"above":pos.verticalPositionProp="bottom";break;case"top":case"match":break;default:pos.top+=(pos.height||0)/2}let dlgHeight,dlgWidth;switch(positionX){case"after":isRTL||(pos.left+=pos.width||0);break;case"right":isRTL||(pos.horizontalPositionProp="right");break;case"before":isRTL||(pos.horizontalPositionProp="right",pos.right+=pos.width||0);break;case"left":break;default:null==dlgWidth&&(dlgWidth=dlg.offsetWidth||UnknownDialogWidth),pos.left+=(pos.width||0)/2,pos.left-=dlgWidth/2}if(null!=options.positionClientX)switch(pos.left=options.positionClientX,pos.horizontalPositionProp="left",positionX){case"left":case"before":null==dlgWidth&&(dlgWidth=dlg.offsetWidth||UnknownDialogWidth),pos.left-=dlgWidth;break;case"right":case"after":break;default:null==dlgWidth&&(dlgWidth=dlg.offsetWidth||UnknownDialogWidth),pos.left-=dlgWidth/2}switch(pos.top+=options.offsetTop||0,pos.left+=options.offsetLeft||0,positionY){case"above":pos.bottom+=pos.height;break;case"bottom":case"center":case"top":case"match":break;default:isInitialPositioning||(null==dlgHeight&&(dlgHeight=dlg.offsetHeight||UnknownDialogHeight),pos.top-=dlgHeight/2)}return isInitialPositioning||(containerHeight=windowSize.innerHeight,windowSize=windowSize.innerWidth,padding=layoutManager.tv?30:20,null==dlgWidth&&(dlgWidth=dlg.offsetWidth||UnknownDialogWidth),0<(overflowLeft=pos.left+dlgWidth-windowSize+padding)&&(pos.left-=overflowLeft),0<(overflowLeft=pos.right+dlgWidth-windowSize+padding)&&(pos.right-=overflowLeft),!1!==options.autoRepositionY&&(null==dlgHeight&&(dlgHeight=dlg.offsetHeight||UnknownDialogHeight),0<(windowSize=pos.top+dlgHeight-containerHeight+padding)&&(pos.top-=windowSize),0<(overflowLeft=pos.bottom+dlgHeight-containerHeight+padding))&&(pos.bottom-=overflowLeft)),pos.top=Math.max(pos.top,10),pos.bottom=Math.max(pos.bottom,10),pos.left=Math.max(pos.left,10),pos.right=Math.max(pos.right,10),pos}function enablePositioning(dialogOptions){return dialogOptions.positionTo&&"fullscreen"!==dialogOptions.size}function positionDialog(dlg,isInitialPositioning){var horizontalPos,envCss,options=dlg.dialogOptions,isInitialPositioning=enablePositioning(options)?getPosition(options,dlg,isInitialPositioning):null;isInitialPositioning&&(dlg.style.position="fixed",horizontalPos=isInitialPositioning[isInitialPositioning.horizontalPositionProp],dlg.style[isInitialPositioning.horizontalPositionProp]=horizontalPos+"px",horizontalPos=isInitialPositioning[isInitialPositioning.verticalPositionProp],dlg.style[isInitialPositioning.verticalPositionProp]=horizontalPos+"px",!1!==options.setDialogSize)&&(envCss="android"===appMode?"var(--window-inset-bottom, 0)":"env(safe-area-inset-bottom, 0)",options.fixedSize?dlg.style.height="calc(98% - "+horizontalPos+"px - "+envCss+")":dlg.style.maxHeight="calc(98% - "+horizontalPos+"px - "+envCss+")",options.minWidthToElement)&&isInitialPositioning.width&&(options.fixedSize?dlg.style.width=isInitialPositioning.width+"px":dlg.style.minWidth=isInitialPositioning.width+"px")}function addGestures(dlg){let gesture=new Gesture(dlg);(dlg.gesture=gesture).on("panmove",event=>{var target=event.target;if(target.closest('.dragHandle,input[type="range"]'))dlg.classList.remove("dialog-dragging"),gesture.isScrolling=!0,gesture.isDragging=null;else{var target=target.closest(".emby-scroller.scrollY"),diff=gesture.touchMoveY;if(target){target=target.getScrollTop();if(diff<0&&target<=0)return dlg.classList.remove("dialog-dragging"),gesture.isScrolling=!0,void(gesture.isDragging=null);if(0!==target)return dlg.classList.remove("dialog-dragging"),gesture.isScrolling=!0,void(gesture.isDragging=null)}gesture.isScrolling||(null==gesture.isSliding&&(gesture.isSliding="slideup"===getComputedStyle(dlg).getPropertyValue("animation-name")),gesture.isDragging=gesture.isSliding,gesture.isDragging&&(event.preventDefault(),dlg.classList.add("dialog-draggable","dialog-dragging"),dlg.style.translate="0 "+Math.max(Math.floor(diff),0)+"px"))}}),gesture.on("panend",event=>{dlg.classList.remove("dialog-dragging"),dlg.style.translate="none",gesture.isScrolling=null}),gesture.on("swipedown",()=>{dlg.classList.remove("dialog-dragging"),dlg.style.translate="none",gesture.isDragging&&(gesture.isDragging=null,requestClose(dlg))})}function open(dlg){!layoutManager.tv&&supportsTranslate&&dlg.classList.contains("dialog-swipe-close")&&addGestures(dlg),dlg.classList.remove("dialog-close"),globalOnOpenCallback&&globalOnOpenCallback(dlg),dlg.remove();var dialogContainer=document.createElement("div");return dialogContainer.classList.add("dialogContainer"),dialogContainer.appendChild(dlg),dlg.dialogContainer=dialogContainer,document.body.appendChild(dialogContainer),new Promise(function(resolve,reject){new DialogHashHandler(dlg,"dlg"+Date.now(),resolve)})}function isOpened(dlg){return!dlg.classList.contains("hide")}function requestClose(dlg,forceClose){!isOpened(dlg)||dlg.queryCloseHandler&&!dlg.queryCloseHandler(dlg,forceClose)||close(dlg)}function close(dlg){isOpened(dlg)&&(isHistoryEnabled(dlg)?appRouter.back():hideDialog(dlg))}function onCloseAnimationFinish(e){e.target===e.currentTarget&&(dom.removeEventListener(this,"animationend",onCloseAnimationFinish,{passive:!0}),focusManager.popScope(this),this.classList.add("hide"),this.dispatchEvent(new CustomEvent("close",{bubbles:!1,cancelable:!0})))}function hideDialog(dlg){dlg.gesture&&(dlg.gesture.destroy(),dlg.gesture=null),dlg.classList.contains("hide")||(dlg.dispatchEvent(new CustomEvent("preclosing",{bubbles:!1,cancelable:!1})),dlg.dispatchEvent(new CustomEvent("closing",{bubbles:!1,cancelable:!1})),dlg.classList.add("dialog-close"),enableAnimation(dlg)?dom.addEventListener(dlg,"animationend",onCloseAnimationFinish,{passive:!0}):onCloseAnimationFinish.call(dlg,{target:dlg,currentTarget:dlg}))}function shouldLockDocumentScroll(options){return!0}function removeBackdrop(dlg){let backdrop=dlg.dialogContainer;var onAnimationFinish;backdrop&&(onAnimationFinish=function(){tryRemoveElement(backdrop)},enableAnimation(dlg)?(backdrop.classList.remove("dialogBackdropOpened"),dlg=skinViewManager.getSkinOptions().dialogAnimationTimeout||300,setTimeout(onAnimationFinish,dlg)):onAnimationFinish())}function createDialog(options){let positionX=(options=options||{}).positionX,transformOrigin=options.transformOrigin;if("rtl"===document.dir){switch(positionX){case"right":positionX="left";break;case"left":positionX="right";break;case"after":positionX="before";break;case"before":positionX="after"}"right top"===transformOrigin?transformOrigin="left top":"left top"===transformOrigin?transformOrigin="right top":"left bottom"===transformOrigin?transformOrigin="right bottom":"right bottom"===transformOrigin&&(transformOrigin="left bottom")}var dlg=options.dialog||document.createElement("div"),isFullscreen=(dlg.classList.add("hide","focuscontainer"),shouldLockDocumentScroll(options)&&dlg.setAttribute("data-lockscroll","true"),allowHistory&&!1!==options.enableHistory&&dlg.setAttribute("data-history","true"),!1!==options.autoFocus&&dlg.setAttribute("data-autofocus","true"),dlg.classList.add("dialog","dialog-animated"),!1!==options.animate&&enableAnimation()||dlg.classList.add("dialog-noanimation"),!1===options.blockInputCommandNavigation&&dlg.setAttribute("data-blocknav","false"),!1===options.setCurrentFocusScope&&dlg.setAttribute("data-focusscope","false"),options.removeOnClose&&dlg.setAttribute("data-removeonclose","true"),options.transparentBackground&&dlg.setAttribute("data-transparentbackground",options.transparentBackground),options.blurBackground&&"fullscreen"!==options.size&&dlg.setAttribute("data-blurbackground","true"),options.size&&dlg.classList.add("dialog-fixedSize","dialog-"+options.size),"fullscreen"===options.size);if(!1===options.autoLowResLayout||layoutManager.tv||isFullscreen||(dlg.classList.add("dialog-fullscreen-lowres"),options.lowResXMargin&&dlg.classList.add("dialog-fullscreen-lowres-xmargin"),options.lowResAutoHeight&&dlg.classList.add("dialog-fullscreen-lowres-autoheight")),!1===options.autoCenter||dlg.classList.contains("dialog-fixedSize")||dlg.classList.add("centeredDialog"),!1!==options.swipeClose&&dlg.classList.add("dialog-swipe-close"),enablePositioning(options))if(transformOrigin)"center top"===transformOrigin?dlg.classList.add("dialog-transformorigin-top"):"left top"===transformOrigin?dlg.classList.add("dialog-transformorigin-lefttop"):"right top"===transformOrigin?dlg.classList.add("dialog-transformorigin-righttop"):"center bottom"===transformOrigin?dlg.classList.add("dialog-transformorigin-bottom"):"right bottom"===transformOrigin?dlg.classList.add("dialog-transformorigin-rightbottom"):"left bottom"===transformOrigin&&dlg.classList.add("dialog-transformorigin-leftbottom");else if("bottom"===options.positionY)switch(positionX){case"right":case"after":dlg.classList.add("dialog-transformorigin-lefttop");break;case"left":case"before":dlg.classList.add("dialog-transformorigin-righttop");break;default:dlg.classList.add("dialog-transformorigin-top")}else if("top"===options.positionY)switch(positionX){case"right":case"after":dlg.classList.add("dialog-transformorigin-lefttop");break;case"left":case"before":dlg.classList.add("dialog-transformorigin-righttop");break;default:dlg.classList.add("dialog-transformorigin-bottom")}return(dlg.dialogOptions=options).queryCloseHandler&&(dlg.queryCloseHandler=options.queryCloseHandler),dlg}export default{open:open,close:close,createDialog:createDialog,setOnOpen:function(val){globalOnOpenCallback=val},positionDialog:positionDialog}; |