Merge pull request #1538 from Camc314/migrate-to-ES6-7

Migration of emby-radio, emby-scroller and emby-tabs to ES6 modules

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",

src/elements/emby-radio/emby-radio.js

@@ -1,7 +1,10 @@
-define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
+import layoutManager from 'layoutManager';
-    'use strict';
+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 += '<div class="mdl-radio__circles">';
 
@@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou
         prototype: EmbyRadioPrototype,
         extends: 'input'
     });
-});
+
+/* eslint-enable indent */

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) {
+import scroller from 'scroller';
-    'use strict';
+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;
+        const scrollFrame = this;
-        var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
+        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 */

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) {
+import dom from 'dom';
-    'use strict';
+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);
+/* eslint-disable indent */
-    var buttonClass = 'emby-tab-button';
+
-    var activeButtonClass = buttonClass + '-active';
+    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);
+        const current = tabs.querySelector('.' + activeButtonClass);
-        var tabButton = dom.parentWithClass(e.target, buttonClass);
+        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);
+        const current = this.querySelector('.' + activeButtonClass);
-        var currentIndex = current ? parseInt(current.getAttribute('data-index')) : parseInt(this.getAttribute('data-index') || '0');
+        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;
+        const tabs = this;
-        var btn = this.querySelector('.emby-tab-button[data-index="' + index + '"]');
+        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 */