1 line
5.5 KiB
JavaScript
1 line
5.5 KiB
JavaScript
|
import dom from"./../../dom.js";import scroller from"./../../scroller/smoothscroller.js";import focusManager from"./../../focusmanager.js";require(["css!modules/emby-elements/emby-tabs/emby-tabs.css"]);let buttonClass="emby-tab-button",activeButtonClass="emby-tab-button-active";function setActiveTabButton(tabs,newButton,oldButton){newButton&&newButton.classList.add(activeButtonClass)}function getFocusCallback(tabs,e){return function(){var target,activeElement=document.activeElement;activeElement&&(activeElement===(target=e.target)||activeElement.contains(target)?tabs.disablefocusActivation||(e={type:e.type,target:target,currentTarget:e.currentTarget},onClick.call(tabs,e)):(activeElement=tabs.querySelector("."+activeButtonClass))&&tabs.scroller&&tabs.scroller.scrollToElement(activeElement,{}))}}function onFocus(e){var delay;this.clearFocusTimeout(),e.target.closest("."+buttonClass)&&(delay=-1===this.selectedIndex()?0:700,this.focusTimeout=setTimeout(getFocusCallback(this,e),delay))}function getTabPanel(tabs,index){return null}function removeActivePanelClass(tabs,index){tabs=getTabPanel(tabs,index);tabs&&tabs.classList.remove("is-active")}function triggerBeforeTabChangeInternal(tabs,index,previousIndex,triggerEvent){!1!==triggerEvent&&tabs.dispatchEvent(new CustomEvent("beforetabchange",{detail:{selectedTabIndex:index,previousIndex:previousIndex}})),null!=previousIndex&&previousIndex!==index&&removeActivePanelClass(tabs,previousIndex);triggerEvent=getTabPanel(tabs,index);triggerEvent&&triggerEvent.classList.add("is-active")}function onClick(e){this.clearFocusTimeout();var previousIndex,current=this.querySelector("."+activeButtonClass),tabButton=e.target.closest("."+buttonClass);tabButton&&tabButton!==current&&(current&¤t.classList.remove(activeButtonClass),previousIndex=current?parseInt(current.getAttribute("data-index")):null,setActiveTabButton(this,tabButton,current,!0),triggerBeforeTabChangeInternal(this,current=parseInt(tabButton.getAttribute("data-index")),previousIndex),this.selectedTabIndex=current,"click"!==e.type&&tabButton.href&&tabButton.click(),this.dispatchEvent(new CustomEvent("tabchange",{detail:{selectedTabIndex:current,previousIndex:previousIndex}})))}let DefaultFocusScroll="adaptive";function initScroller(tabs){if(!tabs.scroller){let focusScroll=tabs.getAttribute("data-focusscroll");focusScroll="true"===focusScroll?DefaultFocusScroll:"false"===focusScroll?null:focusScroll||("false"!==tabs.getAttribute("data-centerfocus")?DefaultFocusScroll:null);var contentScrollSlider=tabs.querySelector(".emby-tabs-slider");contentScrollSlider&&(contentScrollSlider.classList.add("nohoverfocus"),tabs.scroller=new scroller(tabs,{horizontal:1,slidee:contentScrollSlider,speed:240,dragHandle:1,hiddenScroll:!0,focusScroll:focusScroll,focusScrollOffsetLeft:tabs.getAttribute("data-focusscrolloffsetleft")||tabs.getAttribute("data-focusscrolloffset")||null,allowNativeSmoothScroll:!0,autoPreventScrollOnFocus:!1,autoStartEdge:!1,adaptiveBorderXStart:0,adaptiveBorderXEnd:0}),tabs.scroller.init())}}function onInit(){this.hasInit||(this.hasInit=!0,this.classList.add("emby-tabs","focusable"))}class EmbyTabs extends HTMLDivElement{constructor(){var self=super();return onInit.call(self),self}connectedCallback(){onInit.call(this),dom.removeEventListener(this,"click",onClick,{passive:!0}),dom.addEventListener(this,"click",onClick,{passive:!0}),dom.removeEventListener(this,"focus",onFocus,{passive:!0,capture:!0}),dom.addEventListener(this,"focus",onFocus,{passive:!0,capture:!0}),initScroller(this),this.onTabsChanged(),this.readyFired||(this.readyFired=!0,this.dispatchEvent(new CustomEvent("ready",{})))}onTabsChanged(){var current=this.querySelector("."+activeButtonClass),currentIndex=current?parseInt(current.getAttribute("data-index")):parseInt(this.getAttribute("data-index")||"0");-1!==(this.selectedTabIndex=currentIndex)&&(currentIndex=this.querySelectorAll("."+buttonClass)[currentIndex])&&(setActiveTabButton(this,currentIndex,current,!1),this.scroller)&&this.scroller.scrollToElement(currentIndex,{behavior:"instant"})}clearFocusTime
|