1 line
No EOL
5.5 KiB
JavaScript
1 line
No EOL
5.5 KiB
JavaScript
import"./../emby-button/paper-icon-button-light.js";function getScrollButtonContainerHtml(direction){var html="";return(html+='<div class="scrollbuttoncontainer scrollbuttoncontainer-'+direction+("backwards"===direction?" hide":"")+'">')+('<button tabindex="-1" type="button" is="paper-icon-button-light" data-direction="'+direction+'" class="emby-scrollbuttons-scrollbutton"><i class="md-icon autortl">')+("backwards"===direction?"":"")+"</i></button>"+"</div>"}function getScrollPosition(parent,scrollType){if("x"===scrollType){if(parent.getScrollLeft)return parent.getScrollLeft()}else if(parent.getScrollTop)return parent.getScrollTop();return 0}function getScrolledContentSize(parent,scrollType){if("x"===scrollType){if(parent.getScrollWidth)return parent.getScrollWidth()}else if(parent.getScrollHeight)return parent.getScrollHeight();return 0}function onScrolledToPosition(scroller,scrollButtons,pos,scrollContentSize){0<(pos=Math.abs(pos))?scrollButtons.scrollButtonsBackwards.classList.remove("hide"):scrollButtons.scrollButtonsBackwards.classList.add("hide"),0<scrollContentSize&&(scrollContentSize-1<=(pos+=scrollButtons.offsetWidth)?scrollButtons.scrollButtonsForwards.classList.add("hide"):scrollButtons.scrollButtonsForwards.classList.remove("hide"))}function onScroll(e){var scroller=this.scroller,scrollType=this.scrollType;onScrolledToPosition(scroller,this,getScrollPosition(scroller,scrollType),getScrolledContentSize(scroller,scrollType))}function getStyleValue(style,name){let value=style.getPropertyValue(name);return!value||!(value=value.replace("px",""))||(value=parseInt(value),isNaN(value))?0:value}require(["css!modules/emby-elements/emby-scrollbuttons/emby-scrollbuttons.css"]);let paddingInlineStartProp=CSS.supports("padding-inline-start","0")?"padding-inline-start":CSS.supports("-webkit-padding-start","0")?"-webkit-padding-start":"padding-left",paddingInlineEndProp=CSS.supports("padding-inline-end","0")?"padding-inline-end":CSS.supports("-webkit-padding-end","0")?"-webkit-padding-end":"padding-right";function getScrollContainerSize(elem,scrollType){let scrollSize=elem.getScrollContainerBoundingClientRect().width;console.log("scrollbuttons scrollSize: "+scrollSize);var style=window.getComputedStyle(elem,null),paddingBackwardsProperty="x"===scrollType?paddingInlineStartProp:"padding-top",scrollType="x"===scrollType?paddingInlineEndProp:"padding-bottom",paddingBackwards=getStyleValue(style,paddingBackwardsProperty),paddingForwards=(paddingBackwards&&(scrollSize-=paddingBackwards),getStyleValue(style,scrollType)),elem=(paddingForwards&&(scrollSize-=paddingForwards),elem.getScrollSlider());return(paddingBackwards=getStyleValue(style=window.getComputedStyle(elem,null),paddingBackwardsProperty))&&(scrollSize+=paddingBackwards),(paddingForwards=getStyleValue(style,scrollType))&&(scrollSize+=paddingForwards),scrollSize}function onScrollButtonClick(e){var scrollButtonsParent=this.closest("[is=emby-scrollbuttons]"),scrollType=scrollButtonsParent.scrollType,scrollButtonsParent=scrollButtonsParent.getScroller(),buttonDirection=this.getAttribute("data-direction");let scrollContainerSize=getScrollContainerSize(scrollButtonsParent,scrollType);scrollButtonsParent.getScrollButtonPageSize&&(scrollContainerSize=scrollButtonsParent.getScrollButtonPageSize(scrollContainerSize,scrollType));var pos=getScrollPosition(scrollButtonsParent,scrollType);let newPos;var multiplier="x"===scrollType?scrollButtonsParent.getScrollLeftMultiplier():scrollButtonsParent.getScrollTopMultiplier();newPos="backwards"===buttonDirection?pos-scrollContainerSize*multiplier:pos+scrollContainerSize*multiplier,"x"===scrollType?scrollButtonsParent.scrollToPosition({left:newPos}):scrollButtonsParent.scrollToPosition({top:newPos})}function onInit(){var parentNode=this.parentNode;if(parentNode)if(!this.hasInit){this.hasInit=!0,this.classList.add("emby-scrollbuttons");var scroller=this.getScroller(),parentNode=(parentNode.classList.add("emby-scrollbuttons-scroller"),scroller.isNativeScroll()&&(parentNode=scroller.querySelector(".scrollSlider"))&&parentNode.classList.add("emby-scrollbuttons-scrollSlider"),this.scrollType="x",this.innerHTML=getScrollButtonContainerHtml("backwards")+getScrollButtonContainerHtml("forwards"),onScroll.bind(this));this.scrollHandler=parentNode;let buttons=this.querySelectorAll(".emby-scrollbuttons-scrollbutton");buttons[0].addEventListener("click",onScrollButtonClick),buttons[1].addEventListener("click",onScrollButtonClick),buttons=this.querySelectorAll(".scrollbuttoncontainer"),this.scrollButtonsBackwards=buttons[0],this.scrollButtonsForwards=buttons[1],scroller.addScrollEventListener(parentNode,{passive:!0}),scroller.addResizeObserver(parentNode)}}class EmbyScrollButtons extends HTMLDivElement{constructor(){var self=super();return onInit.call(self),self}connectedCallback(){onInit.call(this)}getScroller(){let scroller=this.scroller;var parentNode;return scroller||(scroller=this.closest("[is=emby-scroller]"),parentNode=this.parentNode,scroller&&(parentNode===scroller||parentNode.contains(scroller))||(scroller=parentNode.querySelector("[is=emby-scroller]")),this.scroller=scroller),scroller}disconnectedCallback(){var scroller=this.scroller,scrollHandler=(this.scroller=null,this.scrollHandler);scroller&&scrollHandler&&(scroller.removeResizeObserver(scrollHandler),scroller.removeScrollEventListener(scrollHandler,{passive:!0})),this.scrollHandler=null,this.scrollButtonsBackwards=null,this.scrollButtonsForwards=null}}customElements.define("emby-scrollbuttons",EmbyScrollButtons,{extends:"div"});export default EmbyScrollButtons; |