dashboard-ui/modules/emby-elements/emby-scrollbuttons/emby-scrollbuttons.js

define(["exports","./../emby-button/paper-icon-button-light.js"],function(_exports,_paperIconButtonLight){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-ripple="false" data-direction="'+direction+'" class="emby-scrollbuttons-scrollbutton"><i class="md-icon autortl">')+("backwards"===direction?"&#xE5CB;":"&#xE5CC;")+"</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 onScroll(e){var scroller=this.scroller,scrollType=this.scrollType;!function(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"))}(this,getScrollPosition(scroller,scrollType),function(parent,scrollType){if("x"===scrollType){if(parent.getScrollWidth)return parent.getScrollWidth()}else if(parent.getScrollHeight)return parent.getScrollHeight();return 0}(scroller,scrollType))}function getStyleValue(style,name){style=style.getPropertyValue(name);return!style||!(style=style.replace("px",""))||(style=parseInt(style),isNaN(style))?0:style}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,require(["css!modules/emby-elements/emby-scrollbuttons/emby-scrollbuttons.css"]);var 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 onScrollButtonClick(e){var scrollButtonsParent=this.closest("[is=emby-scrollbuttons]"),scrollType=scrollButtonsParent.scrollType,scrollButtonsParent=scrollButtonsParent.getScroller(),buttonDirection=this.getAttribute("data-direction"),scrollContainerSize=function(elem,scrollType){var scrollSize=elem.getScrollContainerBoundingClientRect().width,style=(console.log("scrollbuttons scrollSize: "+scrollSize),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}(scrollButtonsParent,scrollType),pos=(scrollButtonsParent.getScrollButtonPageSize&&(scrollContainerSize=scrollButtonsParent.getScrollButtonPageSize(scrollContainerSize,scrollType)),getScrollPosition(scrollButtonsParent,scrollType)),multiplier="x"===scrollType?scrollButtonsParent.getScrollLeftMultiplier():scrollButtonsParent.getScrollTopMultiplier(),buttonDirection="backwards"===buttonDirection?pos-scrollContainerSize*multiplier:pos+scrollContainerSize*multiplier;"x"===scrollType?scrollButtonsParent.scrollToPosition({left:buttonDirection}):scrollButtonsParent.scrollToPosition({top:buttonDirection})}function onInit(){var scroller,buttons,parentNode=this.parentNode;!parentNode||this.hasInit||(this.hasInit=!0,this.classList.add("emby-scrollbuttons"),scroller=this.getScroller(),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"),parentNode=onScroll.bind(this),this.scrollHandler=parentNode,(buttons=this.querySelectorAll(".emby-scrollbuttons-scrollbutton"))[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))}var EmbyScrollButtons=function(_HTMLDivElement){babelHelpers.inherits(EmbyScrollButtons,_HTMLDivElement);var _super=_createSuper(EmbyScrollButtons);function EmbyScrollButtons(){babelHelpers.classCallCheck(this,EmbyScrollButtons);var _this,self=_this=_super.call(this);return onInit.call(self),babelHelpers.possibleConstructorReturn(_this,self)}return babelHelpers.createClass(EmbyScrollButtons,[{key:"connectedCallback",value:function(){onInit.call(this)}},{key:"getScroller",value:function(){var parentNode,scroller=this.scroller;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}},{key:"disconnectedCallback",value:function(){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}}]),EmbyScrollButtons}(babelHelpers.wrapNativeSuper(HTMLDivElement));customElements.define("emby-scrollbuttons",EmbyScrollButtons,{extends:"div"}),_exports.default=EmbyScrollButtons});