Migrate routes.js to ES6

package.json

@@ -163,6 +163,7 @@
           "src/components/syncPlay/playbackPermissionManager.js",
           "src/components/syncPlay/syncPlayManager.js",
           "src/components/syncPlay/timeSyncManager.js",
+          "src/components/viewContainer.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
           "src/controllers/session/redeemPassword/index.js",
@@ -267,6 +268,7 @@
           "src/scripts/libraryBrowser.js",
           "src/scripts/multiDownload.js",
           "src/scripts/playlists.js",
+          "src/scripts/routes.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
           "src/scripts/settings/webSettings.js",

src/components/viewContainer.js

@@ -1,12 +1,11 @@
-define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewContainer'], function (browser, dom, layoutManager) {
+/* eslint-disable indent */
-    'use strict';
 
     function setControllerClass(view, options) {
         if (options.controllerFactory) {
             return Promise.resolve();
         }
 
-        var controllerUrl = view.getAttribute('data-controller');
+        let controllerUrl = view.getAttribute('data-controller');
 
         if (controllerUrl) {
             if (controllerUrl.indexOf('__plugin/') === 0) {
@@ -14,7 +13,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
             }
 
             controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl);
-            return getRequirePromise([controllerUrl]).then(function (ControllerFactory) {
+            return getRequirePromise([controllerUrl]).then((ControllerFactory) => {
                 options.controllerFactory = ControllerFactory;
             });
         }
@@ -23,35 +22,35 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
     }
 
     function getRequirePromise(deps) {
-        return new Promise(function (resolve, reject) {
+        return new Promise((resolve, reject) => {
             require(deps, resolve);
         });
     }
 
-    function loadView(options) {
+    export function loadView(options) {
         if (!options.cancel) {
-            var selected = selectedPageIndex;
+            const selected = selectedPageIndex;
-            var previousAnimatable = selected === -1 ? null : allPages[selected];
+            const previousAnimatable = selected === -1 ? null : allPages[selected];
-            var pageIndex = selected + 1;
+            let pageIndex = selected + 1;
 
             if (pageIndex >= pageContainerCount) {
                 pageIndex = 0;
             }
 
-            var isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
+            const isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
-            var newViewInfo = normalizeNewView(options, isPluginpage);
+            const newViewInfo = normalizeNewView(options, isPluginpage);
-            var newView = newViewInfo.elem;
+            const newView = newViewInfo.elem;
-            var modulesToLoad = [];
+            const modulesToLoad = [];
 
-            return new Promise(function (resolve) {
+            return new Promise((resolve) => {
-                require(modulesToLoad, function () {
+                require(modulesToLoad, () => {
-                    var currentPage = allPages[pageIndex];
+                    const currentPage = allPages[pageIndex];
 
                     if (currentPage) {
                         triggerDestroy(currentPage);
                     }
 
-                    var view = newView;
+                    let view = newView;
 
                     if (typeof view == 'string') {
                         view = document.createElement('div');
@@ -79,7 +78,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
                         view.setAttribute('data-type', options.type);
                     }
 
-                    var properties = [];
+                    const properties = [];
 
                     if (options.fullscreen) {
                         properties.push('fullscreen');
@@ -90,7 +89,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
                     }
 
                     allPages[pageIndex] = view;
-                    setControllerClass(view, options).then(function () {
+                    setControllerClass(view, options).then(() => {
                         if (onBeforeChange) {
                             onBeforeChange(view, false, options);
                         }
@@ -125,28 +124,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
             html = replaceAll(html, '<\/script>--\x3e', '<\/script>');
         }
 
-        var wrapper = document.createElement('div');
+        const wrapper = document.createElement('div');
         wrapper.innerHTML = html;
         return wrapper.querySelector('div[data-role="page"]');
     }
 
     function normalizeNewView(options, isPluginpage) {
-        var viewHtml = options.view;
+        const viewHtml = options.view;
 
         if (viewHtml.indexOf('data-role="page"') === -1) {
             return viewHtml;
         }
 
-        var hasScript = viewHtml.indexOf('<script') !== -1;
+        let hasScript = viewHtml.indexOf('<script') !== -1;
-        var elem = parseHtml(viewHtml, hasScript);
+        const elem = parseHtml(viewHtml, hasScript);
 
         if (hasScript) {
             hasScript = elem.querySelector('script') != null;
         }
 
-        var hasjQuery = false;
+        let hasjQuery = false;
-        var hasjQuerySelect = false;
+        let hasjQuerySelect = false;
-        var hasjQueryChecked = false;
+        let hasjQueryChecked = false;
 
         if (isPluginpage) {
             hasjQuery = viewHtml.indexOf('jQuery') != -1 || viewHtml.indexOf('$(') != -1 || viewHtml.indexOf('$.') != -1;
@@ -164,7 +163,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
     }
 
     function beforeAnimate(allPages, newPageIndex, oldPageIndex) {
-        for (var index = 0, length = allPages.length; index < length; index++) {
+        for (let index = 0, length = allPages.length; index < length; index++) {
             if (newPageIndex !== index && oldPageIndex !== index) {
                 allPages[index].classList.add('hide');
             }
@@ -172,33 +171,33 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
     }
 
     function afterAnimate(allPages, newPageIndex) {
-        for (var index = 0, length = allPages.length; index < length; index++) {
+        for (let index = 0, length = allPages.length; index < length; index++) {
             if (newPageIndex !== index) {
                 allPages[index].classList.add('hide');
             }
         }
     }
 
-    function setOnBeforeChange(fn) {
+    export function setOnBeforeChange(fn) {
         onBeforeChange = fn;
     }
 
-    function tryRestoreView(options) {
+    export function tryRestoreView(options) {
-        var url = options.url;
+        const url = options.url;
-        var index = currentUrls.indexOf(url);
+        const index = currentUrls.indexOf(url);
 
         if (index !== -1) {
-            var animatable = allPages[index];
+            const animatable = allPages[index];
-            var view = animatable;
+            const view = animatable;
 
             if (view) {
                 if (options.cancel) {
                     return;
                 }
 
-                var selected = selectedPageIndex;
+                const selected = selectedPageIndex;
-                var previousAnimatable = selected === -1 ? null : allPages[selected];
+                const previousAnimatable = selected === -1 ? null : allPages[selected];
-                return setControllerClass(view, options).then(function () {
+                return setControllerClass(view, options).then(() => {
                     if (onBeforeChange) {
                         onBeforeChange(view, true, options);
                     }
@@ -228,25 +227,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
         view.dispatchEvent(new CustomEvent('viewdestroy', {}));
     }
 
-    function reset() {
+    export function reset() {
         allPages = [];
         currentUrls = [];
         mainAnimatedPages.innerHTML = '';
         selectedPageIndex = -1;
     }
 
-    var onBeforeChange;
+    let onBeforeChange;
-    var mainAnimatedPages = document.querySelector('.mainAnimatedPages');
+    const mainAnimatedPages = document.querySelector('.mainAnimatedPages');
-    var allPages = [];
+    let allPages = [];
-    var currentUrls = [];
+    let currentUrls = [];
-    var pageContainerCount = 3;
+    const pageContainerCount = 3;
-    var selectedPageIndex = -1;
+    let selectedPageIndex = -1;
     reset();
     mainAnimatedPages.classList.remove('hide');
-    return {
+
+/* eslint-enable indent */
+
+export default {
     loadView: loadView,
     tryRestoreView: tryRestoreView,
     reset: reset,
     setOnBeforeChange: setOnBeforeChange
-    };
+};
-});
+

src/scripts/routes.js

@@ -1,18 +1,21 @@
-define([
+import 'emby-button';
-    'jQuery',
+import 'emby-input';
-    'emby-button',
+import 'scripts/livetvcomponents';
-    'emby-input',
+import 'paper-icon-button-light';
-    'scripts/livetvcomponents',
+import 'emby-itemscontainer';
-    'paper-icon-button-light',
+import 'emby-collapse';
-    'emby-itemscontainer',
+import 'emby-select';
-    'emby-collapse',
+import 'livetvcss';
-    'emby-select',
+import 'emby-checkbox';
-    'livetvcss',
+import 'emby-slider';
-    'emby-checkbox',
+import 'listViewStyle';
-    'emby-slider',
+import 'dashboardcss';
-    'listViewStyle',
+import 'detailtablecss';
-    'dashboardcss',
+
-    'detailtablecss'], function () {
+/* eslint-disable indent */
+
+    console.groupCollapsed('defining core routes');
+
     function defineRoute(newRoute) {
         var path = newRoute.alias ? newRoute.alias : newRoute.path;
         console.debug('defining route: ' + path);
@@ -20,8 +23,6 @@ define([
         Emby.Page.addRoute(path, newRoute);
     }
 
-    console.debug('defining core routes');
-
     defineRoute({
         alias: '/addserver.html',
         path: '/controllers/session/addServer/index.html',
@@ -30,6 +31,7 @@ define([
         startup: true,
         controller: 'session/addServer/index'
     });
+
     defineRoute({
         alias: '/selectserver.html',
         path: '/controllers/session/selectServer/index.html',
@@ -39,6 +41,7 @@ define([
         controller: 'session/selectServer/index',
         type: 'selectserver'
     });
+
     defineRoute({
         alias: '/login.html',
         path: '/controllers/session/login/index.html',
@@ -48,6 +51,7 @@ define([
         controller: 'session/login/index',
         type: 'login'
     });
+
     defineRoute({
         alias: '/forgotpassword.html',
         path: '/controllers/session/forgotPassword/index.html',
@@ -55,6 +59,7 @@ define([
         startup: true,
         controller: 'session/forgotPassword/index'
     });
+
     defineRoute({
         alias: '/forgotpasswordpin.html',
         path: '/controllers/session/redeemPassword/index.html',
@@ -68,42 +73,41 @@ define([
         alias: '/mypreferencesmenu.html',
         path: '/controllers/user/menu/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/menu/index'
     });
+
     defineRoute({
         alias: '/myprofile.html',
         path: '/controllers/user/profile/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/profile/index'
     });
+
     defineRoute({
         alias: '/mypreferencesdisplay.html',
         path: '/controllers/user/display/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/display/index'
     });
+
     defineRoute({
         alias: '/mypreferenceshome.html',
         path: '/controllers/user/home/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/home/index'
     });
+
     defineRoute({
         alias: '/mypreferencesplayback.html',
         path: '/controllers/user/playback/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/playback/index'
     });
+
     defineRoute({
         alias: '/mypreferencessubtitles.html',
         path: '/controllers/user/subtitles/index.html',
         autoFocus: false,
-        transition: 'fade',
         controller: 'user/subtitles/index'
     });
 
@@ -113,42 +117,49 @@ define([
         roles: 'admin',
         controller: 'dashboard/dashboard'
     });
+
     defineRoute({
         path: '/dashboardgeneral.html',
         controller: 'dashboard/general',
         autoFocus: false,
         roles: 'admin'
     });
+
     defineRoute({
         path: '/networking.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/networking'
     });
+
     defineRoute({
         path: '/devices.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/devices'
     });
+
     defineRoute({
         path: '/device.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/devices/device'
     });
+
     defineRoute({
         path: '/dlnaprofile.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profile'
     });
+
     defineRoute({
         path: '/dlnaprofiles.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/profiles'
     });
+
     defineRoute({
         alias: '/addplugin.html',
         path: '/controllers/dashboard/plugins/add/index.html',
@@ -156,52 +167,61 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/add/index'
     });
+
     defineRoute({
         path: '/library.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/mediaLibrary'
     });
+
     defineRoute({
         path: '/librarydisplay.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/librarydisplay'
     });
+
     defineRoute({
         path: '/dlnasettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/dlna/settings'
     });
+
     defineRoute({
         path: '/edititemmetadata.html',
         controller: 'edititemmetadata',
         autoFocus: false
     });
+
     defineRoute({
         path: '/encodingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/encodingsettings'
     });
+
     defineRoute({
         path: '/log.html',
         roles: 'admin',
         controller: 'dashboard/logs'
     });
+
     defineRoute({
         path: '/metadataimages.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadataImages'
     });
+
     defineRoute({
         path: '/metadatanfo.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/metadatanfo'
     });
+
     defineRoute({
         alias: '/notificationsetting.html',
         path: '/controllers/dashboard/notifications/notification/index.html',
@@ -209,6 +229,7 @@ define([
         roles: 'admin',
         controller: 'dashboard/notifications/notification/index'
     });
+
     defineRoute({
         alias: '/notificationsettings.html',
         path: '/controllers/dashboard/notifications/notifications/index.html',
@@ -216,12 +237,14 @@ define([
         autoFocus: false,
         roles: 'admin'
     });
+
     defineRoute({
         path: '/playbackconfiguration.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/playback'
     });
+
     defineRoute({
         alias: '/availableplugins.html',
         path: '/controllers/dashboard/plugins/available/index.html',
@@ -229,6 +252,7 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/available/index'
     });
+
     defineRoute({
         alias: '/repositories.html',
         path: '/controllers/dashboard/plugins/repositories/index.html',
@@ -241,67 +265,72 @@ define([
         path: '/home.html',
         autoFocus: false,
         controller: 'home',
-        transition: 'fade',
         type: 'home'
     });
+
     defineRoute({
         path: '/search.html',
         controller: 'searchpage'
     });
+
     defineRoute({
         path: '/list.html',
         autoFocus: false,
-        controller: 'list',
+        controller: 'list'
-        transition: 'fade'
     });
+
     defineRoute({
         alias: '/details',
         path: '/controllers/itemDetails/index.html',
         controller: 'itemDetails/index',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/livetv.html',
         controller: 'livetv/livetvsuggested',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/livetvguideprovider.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvguideprovider'
     });
+
     defineRoute({
         path: '/livetvsettings.html',
         autoFocus: false,
         controller: 'livetvsettings'
     });
+
     defineRoute({
         path: '/livetvstatus.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvstatus'
     });
+
     defineRoute({
         path: '/livetvtuner.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'livetvtuner'
     });
+
     defineRoute({
         path: '/movies.html',
         autoFocus: false,
-        controller: 'movies/moviesrecommended',
+        controller: 'movies/moviesrecommended'
-        transition: 'fade'
     });
+
     defineRoute({
         path: '/music.html',
         controller: 'music/musicrecommended',
-        autoFocus: false,
+        autoFocus: false
-        transition: 'fade'
     });
+
     defineRoute({
         alias: '/installedplugins.html',
         path: '/controllers/dashboard/plugins/installed/index.html',
@@ -309,41 +338,46 @@ define([
         roles: 'admin',
         controller: 'dashboard/plugins/installed/index'
     });
+
     defineRoute({
         path: '/scheduledtask.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtask'
     });
+
     defineRoute({
         path: '/scheduledtasks.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/scheduledtasks/scheduledtasks'
     });
+
     defineRoute({
         path: '/serveractivity.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/serveractivity'
     });
+
     defineRoute({
         path: '/apikeys.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/apikeys'
     });
+
     defineRoute({
         path: '/streamingsettings.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/streaming'
     });
+
     defineRoute({
         path: '/tv.html',
         autoFocus: false,
-        controller: 'shows/tvrecommended',
+        controller: 'shows/tvrecommended'
-        transition: 'fade'
     });
 
     defineRoute({
@@ -352,29 +386,34 @@ define([
         roles: 'admin',
         controller: 'dashboard/users/useredit'
     });
+
     defineRoute({
         path: '/userlibraryaccess.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userlibraryaccess'
     });
+
     defineRoute({
         path: '/usernew.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/usernew'
     });
+
     defineRoute({
         path: '/userparentalcontrol.html',
         autoFocus: false,
         roles: 'admin',
         controller: 'dashboard/users/userparentalcontrol'
     });
+
     defineRoute({
         path: '/userpassword.html',
         autoFocus: false,
         controller: 'dashboard/users/userpasswordpage'
     });
+
     defineRoute({
         path: '/userprofiles.html',
         autoFocus: false,
@@ -389,6 +428,7 @@ define([
         anonymous: true,
         controller: 'wizard/remote/index'
     });
+
     defineRoute({
         alias: '/wizardfinish.html',
         path: '/controllers/wizard/finish/index.html',
@@ -396,12 +436,14 @@ define([
         anonymous: true,
         controller: 'wizard/finish/index'
     });
+
     defineRoute({
         path: '/wizardlibrary.html',
         autoFocus: false,
         anonymous: true,
         controller: 'dashboard/mediaLibrary'
     });
+
     defineRoute({
         alias: '/wizardsettings.html',
         path: '/controllers/wizard/settings/index.html',
@@ -409,6 +451,7 @@ define([
         anonymous: true,
         controller: 'wizard/settings/index'
     });
+
     defineRoute({
         alias: '/wizardstart.html',
         path: '/controllers/wizard/start/index.html',
@@ -416,6 +459,7 @@ define([
         anonymous: true,
         controller: 'wizard/start/index'
     });
+
     defineRoute({
         alias: '/wizarduser.html',
         path: '/controllers/wizard/user/index.html',
@@ -427,7 +471,6 @@ define([
     defineRoute({
         alias: '/video',
         path: '/controllers/playback/video/index.html',
-        transition: 'fade',
         controller: 'playback/video/index',
         autoFocus: false,
         type: 'video-osd',
@@ -435,16 +478,17 @@ define([
         fullscreen: true,
         enableMediaControl: false
     });
+
     defineRoute({
         alias: '/queue',
         path: '/controllers/playback/queue/index.html',
         controller: 'playback/queue/index',
         autoFocus: false,
-        transition: 'fade',
         fullscreen: true,
         supportsThemeMedia: true,
         enableMediaControl: false
     });
+
     defineRoute({
         path: '/configurationpage',
         autoFocus: false,
@@ -458,9 +502,13 @@ define([
         isDefaultRoute: true,
         autoFocus: false
     });
+
     defineRoute({
         path: '/index.html',
         autoFocus: false,
         isDefaultRoute: true
     });
-});
+
+    console.groupEnd('defining core routes');
+
+/* eslint-enable indent */