1 line
11 KiB
JavaScript
1 line
11 KiB
JavaScript
define(["exports","./../../dom.js","./../../layoutmanager.js","./../../common/inputmanager.js","./../../customelementupgrade.js"],function(_exports,_dom,_layoutmanager,_inputmanager,_customelementupgrade){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,require(["css!modules/emby-elements/emby-slider/emby-slider.css","css!!tv|modules/emby-elements/emby-slider/emby-slider_nontv.css","css!tv|modules/emby-elements/emby-slider/emby-slider_tv.css","css!modules/emby-elements/emby-slider/emby-slider2.css"]);var insetInlineStartProp=CSS.supports("inset-inline-start","0")?"insetInlineStart":"left",insetBlockStartProp="bottom",SupportsCalc=CSS.supports("width","min(45.2%,calc(100% - .65em))"),SupportsMin=CSS.supports("width","min(10em, 5vw)"),SupportsCalcMin=SupportsCalc&&SupportsMin;function onInputCommand(e){var stepUpCommand,stepDownCommand="vertical"===this.getAttribute("orient")?(stepUpCommand="up","down"):"rtl"===document.dir?(stepUpCommand="left","right"):(stepUpCommand="right","left");switch(e.detail.command){case stepUpCommand:e.preventDefault(),this.stepUp();var value=parseFloat(this.value);this.beginEditing(value);break;case stepDownCommand:e.preventDefault(),this.stepDown();value=parseFloat(this.value);this.beginEditing(value)}}function getValueAsPercent(range,value){var min=parseFloat(range.min),value=(value-min)/(parseFloat(range.max)-min);return value*=100}function updateValues(range,value){requestAnimationFrame(function(){var backgroundLower=range.backgroundLower,originalPct=getValueAsPercent(range,value),pct=originalPct+"%",backgroundLower=(backgroundLower&&(prop="vertical"===range.getAttribute("orient")?"height":"width",backgroundLower.style[prop]=pct),range.sliderThumb);if(backgroundLower){var prop="vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp;if(SupportsMin){if(originalPct<10)return void(backgroundLower.style[prop]="max("+originalPct+"%,.65em)");if(90<originalPct&&SupportsCalcMin)return void(backgroundLower.style[prop]="min("+originalPct+"%,calc(100% - .65em))")}backgroundLower.style[prop]=originalPct+"%"}})}function getBubbleOffsetSize(range){var prop,size=range.bubbleOffsetSize;return size||(prop="vertical"===range.getAttribute("orient")?"offsetHeight":"offsetWidth",range.bubbleOffsetSize=size=range.getBubbleElement()[prop]),size}function updateBubble(range,value,pct,bubble){range.dragging&&range.dispatchEvent(new CustomEvent("displayvaluechange",{bubbles:!0,cancelable:!1,detail:{value:value}}));value=range.getBubbleHtml?range.getBubbleHtml(value):'<h2 class="sliderBubbleText">'+(value=range.getBubbleText?range.getBubbleText(value):Math.round(value))+"</h2>";bubble.innerHTML=value;value="vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp;if(SupportsCalcMin){var size=getBubbleOffsetSize(range),size=Math.round(size/2);if(pct<30)return void(bubble.style[value]="max("+pct+"%,"+size+"px)");if(70<pct)return void(bubble.style[value]="min("+pct+"%,calc(100% - "+size+"px))");bubble.style[value]=pct+"%"}size=getBubbleOffsetSize(range),range=function(range){var prop,size=range.containerOffsetSize;return size||(prop="vertical"===range.getAttribute("orient")?"offsetHeight":"offsetWidth",range.containerOffsetSize=size=range.containerElement[prop]),size}(range);pct=range*(pct/100),pct=Math.max(pct,size/2),pct=Math.min(pct,range-size/2),bubble.style[value]=pct+"px"}function setRange(elem,range,startPercent,endPercent){elem=elem.style,elem["vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp]=Math.max(startPercent,0)+"%",endPercent-=startPercent;elem["vertical"===range.getAttribute("orient")?"height":"width"]=Math.max(Math.min(endPercent,100),0)+"%"}var supportsTouchEvent="ontouchstart"in document.documentElement;function onPointerMove(e){var pointerType,dir,rect,min;this.disabled||"touch"===(pointerType=e.pointerType)||!pointerType&&supportsTouchEvent||(this.classList.add("emby-slider-hovering"),this.dragging)||(pointerType=this.sliderBubble)&&(rect=this.getBoundingClientRect(),dir=document.dir,dir="vertical"===this.getAttribute("orient")?(rect.bottom-e.clientY)/rect.height:(e=e.clientX,("rtl"===dir?rect.right-e:e-rect.left)/rect.width),dir*=100,dir=Math.min(Math.max(0,dir),100),updateBubble(this,(e=this,rect=dir,rect/=100,min=parseFloat(e.min),(parseFloat(e.max)-min)*rect+min),dir,pointerType))}function onPointerLeave(e){e.target===e.currentTarget&&this.classList.remove("emby-slider-hovering")}function onInput(e){this.beginEditing(parseFloat(this.value))}function onChange(e){updateValues(this,parseFloat(this.value));e=e.detail;e&&e.isStep||this.endEditing()}function onBlur(e){this.endEditing()}function onPointerUp(e){this.endEditing()}function onMouseWheel(e){e.deltaY<0?this.stepUp():this.stepDown(),e.preventDefault(),e.stopPropagation()}function onContextMenu(e){e.preventDefault()}SupportsCalc=function(_HTMLInputElement){function EmbySlider(){var _this;_this=_HTMLInputElement.call(this)||this;return babelHelpers.possibleConstructorReturn(_this,_this)}return babelHelpers.inherits(EmbySlider,_HTMLInputElement),babelHelpers.createClass(EmbySlider,[{key:"setForceDisplayThumb",value:function(forceDisplayThumb){forceDisplayThumb||_layoutmanager.default.tv?this.classList.remove("emby-slider-nothumb"):this.classList.add("emby-slider-nothumb"),forceDisplayThumb||!_layoutmanager.default.tv?this.sliderThumb.classList.remove("emby-slider-thumb-hoveronly"):this.sliderThumb.classList.add("emby-slider-thumb-hoveronly")}},{key:"connectedCallback",value:function(){var containerElement,htmlToInsert,backgroundClass,thumbClass;"true"!==this.getAttribute("data-embyslider")&&(this.setAttribute("data-embyslider","true"),this.classList.add("emby-slider"),_dom.default.allowBackdropFilter()&&this.classList.add("emby-slider-backdropfilter"),(containerElement=this.parentNode).classList.add("emby-slider-container"),htmlToInsert="",backgroundClass=((this.getAttribute("data-sliderbackgroundclass")||"")+" emby-slider-background").trim(),thumbClass=((this.getAttribute("data-thumbclass")||"")+" emby-slider-thumb").trim(),_dom.default.allowBackdropFilter()&&(backgroundClass+=" emby-slider-background-backdropfilter",thumbClass+=" emby-slider-thumb-backdropfilter"),htmlToInsert=(htmlToInsert=htmlToInsert+'<div class="'+backgroundClass+'"><div class="emby-slider-background-inner"><div class="emby-slider-background-upper"></div><div class="emby-slider-background-lower"></div></div>')+'</div><div class="'+thumbClass+' flex align-items-center justify-content-center"></div>',"false"!==this.getAttribute("data-bubble")&&(backgroundClass="sliderBubble dialog",(thumbClass=this.getAttribute("data-bubbleclass"))&&(backgroundClass+=" "+thumbClass),"rtl"===document.dir&&(backgroundClass+=" sliderBubble-rtl"),htmlToInsert+='<div class="'+backgroundClass+'"></div>'),containerElement.insertAdjacentHTML("beforeend",htmlToInsert),this.backgroundElement=containerElement.querySelector(".emby-slider-background"),this.backgroundLower=containerElement.querySelector(".emby-slider-background-lower"),this.backgroundUpper=containerElement.querySelector(".emby-slider-background-upper"),this.sliderThumb=containerElement.querySelector(".emby-slider-thumb"),this.sliderBubble=containerElement.querySelector(".sliderBubble"),this.containerElement=containerElement,this.containerResizeObserver=new ResizeObserver(function(){this.containerOffsetSize=null}.bind(this),{}),this.containerResizeObserver.observe(containerElement),this.sliderBubble&&(this.bubbleResizeObserver=new ResizeObserver(function(){this.bubbleOffsetSize=null}.bind(this),{}),this.bubbleResizeObserver.observe(this.sliderBubble)),thumbClass="true"!==this.getAttribute("data-hoverthumb"),this.setForceDisplayThumb(thumbClass),_dom.default.addEventListener(this,"input",onInput,{passive:!0}),_dom.default.addEventListener(this,"change",onChange,{passive:!0}),_dom.default.addEventListener(this,"contextmenu",onContextMenu,{}),_dom.default.addEventListener(this,"blur",onBlur,{}),_dom.default.addEventListener(this,window.PointerEvent?"pointermove":"mousemove",onPointerMove,{passive:!0}),_dom.default.addEventListener(this,window.PointerEvent?"pointerleave":"mouseleave",onPointerLeave,{passive:!0}),_dom.default.addEventListener(this,window.PointerEvent?"pointerup":"mouseup",onPointerUp,{passive:!0}),_dom.default.addEventListener(this,"wheel",onMouseWheel,{}),"false"!==this.getAttribute("data-defaultinputhandling")&&_inputmanager.default.on(this,onInputCommand),this.__upgraded=!0,this.dispatchEvent(new CustomEvent("upgraded",{cancelable:!1})))}},{key:"setValue",value:function(val,triggerChange){this.value=val,updateValues(this,val),triggerChange&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}},{key:"disconnectedCallback",value:function(){this.backgroundUpper=null,this.backgroundLower=null,this.sliderThumb=null,this.sliderBubble=null,this.backgroundElement=null,this.containerElement=null;var observer=this.containerResizeObserver;observer&&observer.disconnect(),this.containerResizeObserver=null,(observer=this.bubbleResizeObserver)&&observer.disconnect(),this.bubbleResizeObserver=null,this.bubbleOffsetSize=null,this.containerOffsetSize=null}},{key:"setSeekRanges",value:function(ranges,runtime,position){var elem=this.backgroundUpper;if(elem){null!=runtime&&(ranges=function(ranges,runtime){return runtime?ranges.map(function(r){return{start:r.start/runtime*100,end:r.end/runtime*100}}):[]}(ranges,runtime),position=position/runtime*100);for(var i=0,length=ranges.length;i<length;i++){var range=ranges[i];if(!(null!=position&&position>=range.end))return void setRange(elem,this,range.start,range.end)}setRange(elem,this,0,0)}}},{key:"setIsClear",value:function(isClear){var backgroundLower=this.backgroundLower;backgroundLower&&(isClear?backgroundLower.classList.add("emby-slider-background-lower-clear"):backgroundLower.classList.remove("emby-slider-background-lower-clear"))}},{key:"beginEditing",value:function(value){this.dragging=!0,this.classList.add("emby-slider-editing");var sliderBubble=this.sliderBubble;sliderBubble&&updateBubble(this,value,getValueAsPercent(this,value),sliderBubble),updateValues(this,value),this.dispatchEvent(new CustomEvent("beginediting",{bubbles:!0,cancelable:!1}))}},{key:"cancelEditing",value:function(){this.endEditing(!1)}},{key:"endEditing",value:function(triggerChange,value){this.dragging&&console.log("slider endEditing"),this.dragging=!1,this.classList.remove("emby-slider-editing"),triggerChange&&(this.value=value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1}))),this.dispatchEvent(new CustomEvent("endediting",{bubbles:!0,cancelable:!1}))}},{key:"stepUp",value:function(){HTMLInputElement.prototype.stepUp.call(this),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}},{key:"stepDown",value:function(){HTMLInputElement.prototype.stepDown.call(this),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}},{key:"getBubbleElement",value:function(){return this.sliderBubble}},{key:"getTrackBackgroundUpper",value:function(){return this.backgroundUpper}},{key:"setThumbIcon",value:function(options){var sliderThumb=this.sliderThumb;options?(sliderThumb.classList.add("emby-slider-thumb-withicon"),sliderThumb.innerHTML=options.icon,sliderThumb.style.fontSize=options.fontSize||null):(sliderThumb.classList.remove("emby-slider-thumb-withicon"),sliderThumb.innerHTML="",sliderThumb.style.fontSize=null)}}])}(babelHelpers.wrapNativeSuper(HTMLInputElement));customElements.define("emby-slider",SupportsCalc,{extends:"input"}),_exports.default=SupportsCalc}); |