From 9d822d911af4fa09ef67a41bd20048d194ffeb13 Mon Sep 17 00:00:00 2001
From: Cameron <influence365@gmail.com>
Date: Thu, 6 Aug 2020 08:43:52 +0100
Subject: [PATCH] Migration of sortMenu to ES6 module

---
 package.json                        |  1 +
 src/components/sortmenu/sortmenu.js | 87 +++++++++++++++--------------
 src/controllers/list.js             |  2 +-
 3 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 1d7cf770d3..33c4670d5d 100644
--- a/package.json
+++ b/package.json
@@ -155,6 +155,7 @@
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index f62e5bb3a4..d38d98c090 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -1,46 +1,51 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import layoutManager from 'layoutManager';
+import globalize from 'globalize';
+import * as userSettings from 'userSettings';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
-    function onSubmit(e) {
-        e.preventDefault();
-        return false;
-    }
+function onSubmit(e) {
+    e.preventDefault();
+    return false;
+}
 
-    function initEditor(context, settings) {
-        context.querySelector('form').addEventListener('submit', onSubmit);
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
 
-        context.querySelector('.selectSortOrder').value = settings.sortOrder;
-        context.querySelector('.selectSortBy').value = settings.sortBy;
-    }
+    context.querySelector('.selectSortOrder').value = settings.sortOrder;
+    context.querySelector('.selectSortBy').value = settings.sortBy;
+}
 
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
-    }
+function centerFocus(elem, horiz, on) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
+        const fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
+    });
+}
 
-    function fillSortBy(context, options) {
-        var selectSortBy = context.querySelector('.selectSortBy');
+function fillSortBy(context, options) {
+    const selectSortBy = context.querySelector('.selectSortBy');
 
-        selectSortBy.innerHTML = options.map(function (o) {
-            return '<option value="' + o.value + '">' + o.name + '</option>';
-        }).join('');
-    }
+    selectSortBy.innerHTML = options.map(function (o) {
+        return '<option value="' + o.value + '">' + o.name + '</option>';
+    }).join('');
+}
 
-    function saveValues(context, settings, settingsKey) {
-        userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
-        userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
-    }
+function saveValues(context, settingsKey) {
+    userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
+    userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
+}
 
-    function SortMenu() {
-
-    }
-
-    SortMenu.prototype.show = function (options) {
+class SortMenu {
+    show(options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./sortmenu.template.html'], function (template) {
-                var dialogOptions = {
+            import('text!./sortmenu.template.html').then(({default: template}) => {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -51,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     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,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     centerFocus(dlg.querySelector('.formDialogContent'), false, true);
                 }
 
-                var submitted;
+                let submitted;
 
                 dlg.querySelector('form').addEventListener('change', function () {
                     submitted = true;
@@ -90,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     }
 
                     if (submitted) {
-                        saveValues(dlg, options.settings, options.settingsKey);
+                        saveValues(dlg, options.settingsKey);
                         resolve();
                         return;
                     }
@@ -99,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 });
             });
         });
-    };
+    }
+}
 
-    return SortMenu;
-});
+export default SortMenu;
diff --git a/src/controllers/list.js b/src/controllers/list.js
index 68e81f05dd..904ef5aa66 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -371,7 +371,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager'
         var instance = this;
 
         require(['sortMenu'], function (SortMenu) {
-            new SortMenu().show({
+            new SortMenu.default().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getSortValues(),
                 onChange: instance.itemsContainer.refreshItems.bind(instance.itemsContainer),