import dom from '../../scripts/dom'; import scroller from '../../libraries/scroller'; import browser from '../../scripts/browser'; import focusManager from '../../components/focusManager'; import 'webcomponents.js/webcomponents-lite'; import './emby-tabs.css'; import '../../assets/css/scrollstyles.css'; /* eslint-disable indent */ const buttonClass = 'emby-tab-button'; const activeButtonClass = buttonClass + '-active'; function setActiveTabButton(newButton) { newButton.classList.add(activeButtonClass); } function getTabPanel(tabs, index) { return null; } function removeActivePanelClass(tabs, index) { const tabPanel = getTabPanel(tabs, index); if (tabPanel) { tabPanel.classList.remove('is-active'); } } function fadeInRight(elem) { const pct = browser.mobile ? '4%' : '0.5%'; const keyframes = [ { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '1', transform: 'none', offset: 1 }]; elem.animate(keyframes, { duration: 160, iterations: 1, easing: 'ease-out' }); } function triggerBeforeTabChange(tabs, index, previousIndex) { tabs.dispatchEvent(new CustomEvent('beforetabchange', { detail: { selectedTabIndex: index, previousIndex: previousIndex } })); if (previousIndex != null && previousIndex !== index) { removeActivePanelClass(tabs, previousIndex); } const newPanel = getTabPanel(tabs, index); if (newPanel) { // animate new panel ? if (newPanel.animate) { fadeInRight(newPanel); } newPanel.classList.add('is-active'); } } function onClick(e) { const tabs = this; const current = tabs.querySelector('.' + activeButtonClass); const tabButton = dom.parentWithClass(e.target, buttonClass); if (tabButton && tabButton !== current) { if (current) { current.classList.remove(activeButtonClass); } const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; setActiveTabButton(tabButton); const index = parseInt(tabButton.getAttribute('data-index')); triggerBeforeTabChange(tabs, index, previousIndex); // If toCenter is called syncronously within the click event, it sometimes ends up canceling it setTimeout(function () { tabs.selectedTabIndex = index; tabs.dispatchEvent(new CustomEvent('tabchange', { detail: { selectedTabIndex: index, previousIndex: previousIndex } })); }, 120); if (tabs.scroller) { tabs.scroller.toCenter(tabButton, false); } } } function onFocusOut(e) { const parentContainer = e.target.parentNode; const previousFocus = parentContainer.querySelector('.lastFocused'); if (previousFocus) { previousFocus.classList.remove('lastFocused'); } e.target.classList.add('lastFocused'); } function initScroller(tabs) { if (tabs.scroller) { return; } const contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); if (contentScrollSlider) { tabs.scroller = new scroller(tabs, { horizontal: 1, itemNav: 0, mouseDragging: 1, touchDragging: 1, slidee: contentScrollSlider, smart: true, releaseSwing: true, scrollBy: 200, speed: 120, elasticBounds: 1, dragHandle: 1, dynamicHandle: 1, clickBar: 1, hiddenScroll: true, // In safari the transform is causing the headers to occasionally disappear or flicker requireAnimation: !browser.safari, allowNativeSmoothScroll: true }); tabs.scroller.init(); } else { tabs.classList.add('scrollX'); tabs.classList.add('hiddenScrollX'); tabs.classList.add('smoothScrollX'); } } class EmbyTabs extends HTMLDivElement { createdCallback() { if (this.classList.contains('emby-tabs')) { return; } this.classList.add('emby-tabs'); this.classList.add('focusable'); dom.addEventListener(this, 'click', onClick, { passive: true }); dom.addEventListener(this, 'focusout', onFocusOut); } focus() { const selected = this.querySelector('.' + activeButtonClass); if (this.lastFocused) { focusManager.focus(this.lastFocused); } else if (this.selectedTab) { focusManager.focus(this.selectedTab); } else { focusManager.autoFocus(this); } } refresh() { if (this.scroller) { this.scroller.reload(); } } attachedCallback() { console.warn(this); initScroller(this); const current = this.querySelector('.' + activeButtonClass); const currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0'); if (currentIndex !== -1) { this.selectedTabIndex = currentIndex; const tabButtons = this.querySelectorAll('.' + buttonClass); const newTabButton = tabButtons[currentIndex]; if (newTabButton) { setActiveTabButton(newTabButton); } } if (!this.readyFired) { this.readyFired = true; this.dispatchEvent(new CustomEvent('ready', {})); } } detachedCallback() { if (this.scroller) { this.scroller.destroy(); this.scroller = null; } dom.removeEventListener(this, 'click', onClick, { passive: true }); } getSelectedTabButton(elem) { return elem.querySelector('.' + activeButtonClass); } selectedIndex(selected, triggerEvent) { const tabs = this; if (selected == null) { return tabs.selectedTabIndex || 0; } const current = tabs.selectedIndex(); tabs.selectedTabIndex = selected; const tabButtons = tabs.querySelectorAll('.' + buttonClass); if (current === selected || triggerEvent === false) { triggerBeforeTabChange(tabs, selected, current); tabs.dispatchEvent(new CustomEvent('tabchange', { detail: { selectedTabIndex: selected } })); const currentTabButton = tabButtons[current]; setActiveTabButton(tabButtons[selected]); if (current !== selected && currentTabButton) { currentTabButton.classList.remove(activeButtonClass); } } else { onClick.call(tabs, { target: tabButtons[selected] }); } } getSibling(elem, method) { let sibling = elem[method]; while (sibling) { if (sibling.classList.contains(buttonClass)) { if (!sibling.classList.contains('hide')) { return sibling; } } sibling = sibling[method]; } return null; } selectNext() { const current = this.getSelectedTabButton(this); const sibling = this.getSibling(current, 'nextSibling'); if (sibling) { onClick.call(this, { target: sibling }); } } selectPrevious() { const current = this.getSelectedTabButton(this); const sibling = this.getSibling(current, 'previousSibling'); if (sibling) { onClick.call(this, { target: sibling }); } } triggerBeforeTabChange(selected) { const tabs = this; triggerBeforeTabChange(tabs, tabs.selectedIndex()); } triggerTabChange(selected) { const tabs = this; tabs.dispatchEvent(new CustomEvent('tabchange', { detail: { selectedTabIndex: tabs.selectedIndex() } })); } setTabEnabled(index, enabled) { const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); if (enabled) { btn.classList.remove('hide'); } else { btn.classList.remove('add'); } } } customElements.define('emby-tabs', EmbyTabs, { extends: 'div' }); /* eslint-enable indent */