Migration of refresh dialog to ES6 module

package.json

@@ -146,6 +146,7 @@
           "src/components/playlisteditor/playlisteditor.js",
           "src/components/playmenu.js",
           "src/components/prompt/prompt.js",
+          "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
           "src/components/search/searchfields.js",

src/components/refreshdialog/refreshdialog.js

@@ -1,94 +1,108 @@
-define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) {
+import dom from 'dom';
-    'use strict';
+import dialogHelper from 'dialogHelper';
+import loading from 'loading';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import globalize from 'globalize';
+import 'emby-input';
+import 'emby-checkbox';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
 
-    function getEditorHtml() {
+/*eslint prefer-const: "error"*/
-        var html = '';
 
-        html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
+function getEditorHtml() {
-        html += '<div class="dialogContentInner dialog-content-centered">';
+    let html = '';
-        html += '<form style="margin:auto;">';
 
-        html += '<div class="fldSelectPlaylist selectContainer">';
+    html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
-        html += '<select is="emby-select" id="selectMetadataRefreshMode" label="' + globalize.translate('LabelRefreshMode') + '">';
+    html += '<div class="dialogContentInner dialog-content-centered">';
-        html += '<option value="scan">' + globalize.translate('ScanForNewAndUpdatedFiles') + '</option>';
+    html += '<form style="margin:auto;">';
-        html += '<option value="missing">' + globalize.translate('SearchForMissingMetadata') + '</option>';
-        html += '<option value="all" selected>' + globalize.translate('ReplaceAllMetadata') + '</option>';
-        html += '</select>';
-        html += '</div>';
 
-        html += '<label class="checkboxContainer hide fldReplaceExistingImages">';
+    html += '<div class="fldSelectPlaylist selectContainer">';
-        html += '<input type="checkbox" is="emby-checkbox" class="chkReplaceImages" />';
+    html += '<select is="emby-select" id="selectMetadataRefreshMode" label="' + globalize.translate('LabelRefreshMode') + '">';
-        html += '<span>' + globalize.translate('ReplaceExistingImages') + '</span>';
+    html += '<option value="scan">' + globalize.translate('ScanForNewAndUpdatedFiles') + '</option>';
-        html += '</label>';
+    html += '<option value="missing">' + globalize.translate('SearchForMissingMetadata') + '</option>';
+    html += '<option value="all" selected>' + globalize.translate('ReplaceAllMetadata') + '</option>';
+    html += '</select>';
+    html += '</div>';
 
-        html += '<div class="fieldDescription">';
+    html += '<label class="checkboxContainer hide fldReplaceExistingImages">';
-        html += globalize.translate('RefreshDialogHelp');
+    html += '<input type="checkbox" is="emby-checkbox" class="chkReplaceImages" />';
-        html += '</div>';
+    html += '<span>' + globalize.translate('ReplaceExistingImages') + '</span>';
+    html += '</label>';
 
-        html += '<input type="hidden" class="fldSelectedItemIds" />';
+    html += '<div class="fieldDescription">';
+    html += globalize.translate('RefreshDialogHelp');
+    html += '</div>';
 
-        html += '<br />';
+    html += '<input type="hidden" class="fldSelectedItemIds" />';
-        html += '<div class="formDialogFooter">';
-        html += '<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">' + globalize.translate('Refresh') + '</button>';
-        html += '</div>';
 
-        html += '</form>';
+    html += '<br />';
-        html += '</div>';
+    html += '<div class="formDialogFooter">';
-        html += '</div>';
+    html += '<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">' + globalize.translate('Refresh') + '</button>';
+    html += '</div>';
 
-        return html;
+    html += '</form>';
-    }
+    html += '</div>';
+    html += '</div>';
 
-    function centerFocus(elem, horiz, on) {
+    return html;
-        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 onSubmit(e) {
+    loading.show();
+
+    const instance = this;
+    const dlg = dom.parentWithClass(e.target, 'dialog');
+    const options = instance.options;
+
+    const apiClient = connectionManager.getApiClient(options.serverId);
+
+    const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
+
+    const mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh';
+    const replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked;
+
+    options.itemIds.forEach(function (itemId) {
+        apiClient.refreshItem(itemId, {
+
+            Recursive: true,
+            ImageRefreshMode: mode,
+            MetadataRefreshMode: mode,
+            ReplaceAllImages: replaceAllImages,
+            ReplaceAllMetadata: replaceAllMetadata
         });
-    }
+    });
 
-    function onSubmit(e) {
+    dialogHelper.close(dlg);
-        loading.show();
 
-        var instance = this;
+    import('toast').then(({default: toast}) => {
-        var dlg = dom.parentWithClass(e.target, 'dialog');
+        toast(globalize.translate('RefreshQueued'));
-        var options = instance.options;
+    });
 
-        var apiClient = connectionManager.getApiClient(options.serverId);
+    loading.hide();
 
-        var replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
+    e.preventDefault();
+    return false;
+}
 
-        var mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh';
+class RefreshDialog {
-        var replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked;
+    constructor(options) {
-
-        options.itemIds.forEach(function (itemId) {
-            apiClient.refreshItem(itemId, {
-
-                Recursive: true,
-                ImageRefreshMode: mode,
-                MetadataRefreshMode: mode,
-                ReplaceAllImages: replaceAllImages,
-                ReplaceAllMetadata: replaceAllMetadata
-            });
-        });
-
-        dialogHelper.close(dlg);
-
-        require(['toast'], function (toast) {
-            toast(globalize.translate('RefreshQueued'));
-        });
-
-        loading.hide();
-
-        e.preventDefault();
-        return false;
-    }
-
-    function RefreshDialog(options) {
         this.options = options;
     }
 
-    RefreshDialog.prototype.show = function () {
+    show() {
-        var dialogOptions = {
+        const dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
@@ -99,12 +113,12 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
             dialogOptions.size = 'small';
         }
 
-        var dlg = dialogHelper.createDialog(dialogOptions);
+        const dlg = dialogHelper.createDialog(dialogOptions);
 
         dlg.classList.add('formDialog');
 
-        var html = '';
+        let html = '';
-        var title = globalize.translate('RefreshMetadata');
+        const title = globalize.translate('RefreshMetadata');
 
         html += '<div class="formDialogHeader">';
         html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@@ -150,7 +164,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
             dlg.addEventListener('close', resolve);
             dialogHelper.open(dlg);
         });
-    };
+    }
+}
 
-    return RefreshDialog;
+export default RefreshDialog;
-});