diff --git a/package.json b/package.json index 7ee64e04f0..51f1ae10d2 100644 --- a/package.json +++ b/package.json @@ -137,6 +137,9 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/elements/emby-tabs/emby-tabs.js", + "src/elements/emby-scroller/emby-scroller.js", + "src/elements/emby-radio/emby-radio.js", "src/elements/emby-progressbar/emby-progressbar.js", "src/elements/emby-progressring/emby-progressring.js", "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 46a3e3826c..d989326d25 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,7 +1,10 @@ -define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-radio'; +import 'registerElement'; - var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ + + let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { @@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou } EmbyRadioPrototype.attachedCallback = function () { - var showFocus = !layoutManager.mobile; + const showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou this.classList.add('mdl-radio__button'); - var labelElement = this.parentNode; + let labelElement = this.parentNode; //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect'); labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); @@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou labelElement.classList.add('show-focus'); } - var labelTextElement = labelElement.querySelector('span'); + let labelTextElement = labelElement.querySelector('span'); labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('mdl-radio__label'); - var html = ''; + let html = ''; html += '
'; @@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou prototype: EmbyRadioPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js index 3df40fa6c2..407031a55f 100644 --- a/src/elements/emby-scroller/emby-scroller.js +++ b/src/elements/emby-scroller/emby-scroller.js @@ -1,7 +1,15 @@ -define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) { - 'use strict'; +import scroller from 'scroller'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import inputManager from 'inputManager'; +import focusManager from 'focusManager'; +import browser from 'browser'; +import 'registerElement'; +import 'css!./emby-scroller'; - var ScrollerPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + let ScrollerPrototype = Object.create(HTMLDivElement.prototype); ScrollerPrototype.createdCallback = function () { this.classList.add('emby-scroller'); @@ -9,7 +17,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro function initCenterFocus(elem, scrollerInstance) { dom.addEventListener(elem, 'focus', function (e) { - var focused = focusManager.focusableParent(e.target); + const focused = focusManager.focusableParent(e.target); if (focused) { scrollerInstance.toCenter(focused); } @@ -80,7 +88,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; function onInputCommand(e) { - var cmd = e.detail.command; + const cmd = e.detail.command; if (cmd === 'end') { focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands')); e.preventDefault(); @@ -101,18 +109,18 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro inputManager.on(this, onInputCommand); } - var horizontal = this.getAttribute('data-horizontal') !== 'false'; + const horizontal = this.getAttribute('data-horizontal') !== 'false'; - var slider = this.querySelector('.scrollSlider'); + const slider = this.querySelector('.scrollSlider'); if (horizontal) { slider.style['white-space'] = 'nowrap'; } - var scrollFrame = this; - var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false'; + const scrollFrame = this; + const enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false'; - var options = { + const options = { horizontal: horizontal, mouseDragging: 1, mouseWheel: this.getAttribute('data-mousewheel') !== 'false', @@ -154,14 +162,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro } ScrollerPrototype.pause = function () { - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.pause(); } }; ScrollerPrototype.resume = function () { - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.resume(); } @@ -172,13 +180,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro inputManager.off(this, onInputCommand); } - var headroom = this.headroom; + const headroom = this.headroom; if (headroom) { headroom.destroy(); this.headroom = null; } - var scrollerInstance = this.scroller; + const scrollerInstance = this.scroller; if (scrollerInstance) { scrollerInstance.destroy(); this.scroller = null; @@ -189,4 +197,5 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro prototype: ScrollerPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index 5e03c3f096..c36a5c7f06 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -1,9 +1,17 @@ -define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'registerElement', 'css!./emby-tabs', 'scrollStyles'], function (dom, scroller, browser, layoutManager, focusManager) { - 'use strict'; +import dom from 'dom'; +import scroller from 'scroller'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import 'registerElement'; +import 'css!./emby-tabs'; +import 'scrollStyles'; - var EmbyTabs = Object.create(HTMLDivElement.prototype); - var buttonClass = 'emby-tab-button'; - var activeButtonClass = buttonClass + '-active'; +/* eslint-disable indent */ + + let EmbyTabs = Object.create(HTMLDivElement.prototype); + const buttonClass = 'emby-tab-button'; + const activeButtonClass = buttonClass + '-active'; function setActiveTabButton(tabs, newButton, oldButton, animate) { @@ -16,14 +24,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register } function removeActivePanelClass(tabs, index) { - var tabPanel = getTabPanel(tabs, index); + let tabPanel = getTabPanel(tabs, index); if (tabPanel) { tabPanel.classList.remove('is-active'); } } function addActivePanelClass(tabs, index) { - var tabPanel = getTabPanel(tabs, index); + let tabPanel = getTabPanel(tabs, index); if (tabPanel) { tabPanel.classList.add('is-active'); } @@ -31,9 +39,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register function fadeInRight(elem) { - var pct = browser.mobile ? '4%' : '0.5%'; + const pct = browser.mobile ? '4%' : '0.5%'; - var keyframes = [ + const keyframes = [ { opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 }, { opacity: '1', transform: 'none', offset: 1 }]; @@ -56,7 +64,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register removeActivePanelClass(tabs, previousIndex); } - var newPanel = getTabPanel(tabs, index); + let newPanel = getTabPanel(tabs, index); if (newPanel) { // animate new panel ? @@ -70,10 +78,10 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register function onClick(e) { - var tabs = this; + const tabs = this; - var current = tabs.querySelector('.' + activeButtonClass); - var tabButton = dom.parentWithClass(e.target, buttonClass); + const current = tabs.querySelector('.' + activeButtonClass); + const tabButton = dom.parentWithClass(e.target, buttonClass); if (tabButton && tabButton !== current) { @@ -81,11 +89,11 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register current.classList.remove(activeButtonClass); } - var previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; + const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; setActiveTabButton(tabs, tabButton, current, true); - var index = parseInt(tabButton.getAttribute('data-index')); + const index = parseInt(tabButton.getAttribute('data-index')); triggerBeforeTabChange(tabs, index, previousIndex); @@ -115,7 +123,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register return; } - var contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); + const contentScrollSlider = tabs.querySelector('.emby-tabs-slider'); if (contentScrollSlider) { tabs.scroller = new scroller(tabs, { horizontal: 1, @@ -160,7 +168,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.focus = function () { - var selected = this.querySelector('.' + activeButtonClass); + const selected = this.querySelector('.' + activeButtonClass); if (selected) { focusManager.focus(selected); @@ -180,16 +188,16 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register initScroller(this); - var current = this.querySelector('.' + activeButtonClass); - var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0'); + 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; - var tabButtons = this.querySelectorAll('.' + buttonClass); + const tabButtons = this.querySelectorAll('.' + buttonClass); - var newTabButton = tabButtons[currentIndex]; + const newTabButton = tabButtons[currentIndex]; if (newTabButton) { setActiveTabButton(this, newTabButton, current, false); @@ -221,18 +229,18 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.selectedIndex = function (selected, triggerEvent) { - var tabs = this; + const tabs = this; if (selected == null) { return tabs.selectedTabIndex || 0; } - var current = tabs.selectedIndex(); + const current = tabs.selectedIndex(); tabs.selectedTabIndex = selected; - var tabButtons = tabs.querySelectorAll('.' + buttonClass); + const tabButtons = tabs.querySelectorAll('.' + buttonClass); if (current === selected || triggerEvent === false) { @@ -244,7 +252,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register } })); - var currentTabButton = tabButtons[current]; + let currentTabButton = tabButtons[current]; setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false); if (current !== selected && currentTabButton) { @@ -262,7 +270,7 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register function getSibling(elem, method) { - var sibling = elem[method]; + let sibling = elem[method]; while (sibling) { if (sibling.classList.contains(buttonClass)) { @@ -280,9 +288,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.selectNext = function () { - var current = getSelectedTabButton(this); + const current = getSelectedTabButton(this); - var sibling = getSibling(current, 'nextSibling'); + const sibling = getSibling(current, 'nextSibling'); if (sibling) { onClick.call(this, { @@ -293,9 +301,9 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.selectPrevious = function () { - var current = getSelectedTabButton(this); + const current = getSelectedTabButton(this); - var sibling = getSibling(current, 'previousSibling'); + const sibling = getSibling(current, 'previousSibling'); if (sibling) { onClick.call(this, { @@ -306,14 +314,14 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.triggerBeforeTabChange = function (selected) { - var tabs = this; + const tabs = this; triggerBeforeTabChange(tabs, tabs.selectedIndex()); }; EmbyTabs.triggerTabChange = function (selected) { - var tabs = this; + const tabs = this; tabs.dispatchEvent(new CustomEvent('tabchange', { detail: { @@ -324,8 +332,8 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register EmbyTabs.setTabEnabled = function (index, enabled) { - var tabs = this; - var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); + const tabs = this; + const btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]'); if (enabled) { btn.classList.remove('hide'); @@ -338,4 +346,5 @@ define(['dom', 'scroller', 'browser', 'layoutManager', 'focusManager', 'register prototype: EmbyTabs, extends: 'div' }); -}); + +/* eslint-enable indent */