Migration of viewSettings to ES6 module

package.json

@@ -171,6 +171,7 @@
           "src/components/toast/toast.js",
           "src/components/upnextdialog/upnextdialog.js",
           "src/components/viewContainer.js",
+          "src/components/viewSettings/viewSettings.js",
           "src/controllers/session/addServer/index.js",
           "src/controllers/session/forgotPassword/index.js",
           "src/controllers/session/redeemPassword/index.js",

src/components/viewSettings/viewSettings.js

@@ -1,57 +1,66 @@
-define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-checkbox';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    function onSubmit(e) {
+function onSubmit(e) {
-        e.preventDefault();
+    e.preventDefault();
-        return false;
+    return false;
+}
+
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
+
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+
+    for (const elem of elems) {
+        elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
     }
 
-    function initEditor(context, settings) {
+    context.querySelector('.selectImageType').value = settings.imageType || 'primary';
-        context.querySelector('form').addEventListener('submit', onSubmit);
+}
 
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+function saveValues(context, settings, settingsKey) {
-
+    const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
-        for (var i = 0, length = elems.length; i < length; i++) {
+    for (const elem of elems) {
-            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
+        userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
-        }
-
-        context.querySelector('.selectImageType').value = settings.imageType || 'primary';
     }
 
-    function saveValues(context, settings, settingsKey) {
+    userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
-        var elems = context.querySelectorAll('.viewSetting-checkboxContainer');
+}
-        for (var i = 0, length = elems.length; i < length; i++) {
-            userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked);
-        }
 
-        userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
+function centerFocus(elem, horiz, on) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
+
+function showIfAllowed(context, selector, visible) {
+    const elem = context.querySelector(selector);
+
+    if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
+        elem.classList.remove('hide');
+    } else {
+        elem.classList.add('hide');
     }
+}
 
-    function centerFocus(elem, horiz, on) {
+class ViewSettings {
-        require(['scrollHelper'], function (scrollHelper) {
+    constructor() {
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
     }
-
+    show(options) {
-    function showIfAllowed(context, selector, visible) {
-        var elem = context.querySelector(selector);
-
-        if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
-            elem.classList.remove('hide');
-        } else {
-            elem.classList.add('hide');
-        }
-    }
-
-    function ViewSettings() {
-
-    }
-
-    ViewSettings.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./viewSettings.template.html'], function (template) {
+            import('text!./viewSettings.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -62,11 +71,11 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     dialogOptions.size = 'small';
                 }
 
-                var dlg = dialogHelper.createDialog(dialogOptions);
+                const dlg = dialogHelper.createDialog(dialogOptions);
 
                 dlg.classList.add('formDialog');
 
-                var html = '';
+                let html = '';
 
                 html += '<div class="formDialogHeader">';
                 html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -78,14 +87,14 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
-                var settingElements = dlg.querySelectorAll('.viewSetting');
+                const settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                for (const settingElement of settingElements) {
-                    if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
+                    if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) {
-                        settingElements[i].classList.add('hide');
+                        settingElement.classList.add('hide');
-                        settingElements[i].classList.add('hiddenFromViewSettings');
+                        settingElement.classList.add('hiddenFromViewSettings');
                     } else {
-                        settingElements[i].classList.remove('hide');
+                        settingElement.classList.remove('hide');
-                        settingElements[i].classList.remove('hiddenFromViewSettings');
+                        settingElement.classList.remove('hiddenFromViewSettings');
                     }
                 }
 
@@ -104,7 +113,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {}));
 
@@ -127,7 +136,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
                 });
             });
         });
-    };
+    }
+}
 
-    return ViewSettings;
+export default ViewSettings;
-});