Merge pull request #1768 from Camc314/migrate-to-ES6-63

Migration of sortmenu and slideshow to ES6 modules

package.json

@@ -160,6 +160,8 @@
           "src/components/refreshdialog/refreshdialog.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
+          "src/components/slideshow/slideshow.js",
+          "src/components/sortmenu/sortmenu.js",
           "src/plugins/htmlVideoPlayer/plugin.js",
           "src/components/search/searchfields.js",
           "src/components/search/searchresults.js",

src/components/slideshow/slideshow.js

@@ -2,12 +2,17 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import inputManager from 'inputManager';
-
+import connectionManager from 'connectionManager';
-    browser = browser.default || browser;
+import layoutManager from 'layoutManager';
-    layoutManager = layoutManager.default || layoutManager;
+import focusManager from 'focusManager';
-    focusManager = focusManager.default || focusManager;
+import browser from 'browser';
+import appHost from 'apphost';
+import dom from 'dom';
+import 'css!./style';
+import 'material-icons';
+import 'paper-icon-button-light';
 
 /**
  * Name of transition event.
@@ -80,8 +85,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = connectionManager.getApiClient(item.ServerId);
-        var imageOptions = {};
+    const imageOptions = {};
 
     if (item.BackdropImageTags && item.BackdropImageTags.length) {
         return getBackdropImageUrl(item, imageOptions, apiClient);
@@ -103,7 +108,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
  * @returns {string} The HTML markup of the button.
  */
 function getIcon(icon, cssClass, canFocus, autoFocus) {
-        var tabIndex = canFocus ? '' : ' tabindex="-1"';
+    const tabIndex = canFocus ? '' : ' tabindex="-1"';
     autoFocus = autoFocus ? ' autofocus' : '';
     return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
 }
@@ -120,18 +125,18 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
     }
 }
 
-    return function (options) {
+export default function (options) {
-        var self = this;
+    const self = this;
     /** Initialized instance of Swiper. */
-        var swiperInstance;
+    let swiperInstance;
     /** Initialized instance of the dialog containing the Swiper instance. */
-        var dialog;
+    let dialog;
     /** Options of the slideshow components */
-        var currentOptions;
+    let currentOptions;
     /** ID of the timeout used to hide the OSD. */
-        var hideTimeout;
+    let hideTimeout;
     /** Last coordinates of the mouse pointer. */
-        var lastMouseMoveData;
+    let lastMouseMoveData;
 
     /**
      * Creates the HTML markup for the dialog and the OSD.
@@ -151,12 +156,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         dialog.classList.add('slideshowDialog');
 
-            var html = '';
+        let html = '';
 
         html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
 
         if (options.interactive && !layoutManager.tv) {
-                var actionButtonsOnTop = layoutManager.mobile;
+            const actionButtonsOnTop = layoutManager.mobile;
 
             html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
             html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
@@ -197,17 +202,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 dialogHelper.close(dialog);
             });
 
-                var btnPause = dialog.querySelector('.btnSlideshowPause');
+            const btnPause = dialog.querySelector('.btnSlideshowPause');
             if (btnPause) {
                 btnPause.addEventListener('click', playPause);
             }
 
-                var btnDownload = dialog.querySelector('.btnDownload');
+            const btnDownload = dialog.querySelector('.btnDownload');
             if (btnDownload) {
                 btnDownload.addEventListener('click', download);
             }
 
-                var btnShare = dialog.querySelector('.btnShare');
+            const btnShare = dialog.querySelector('.btnShare');
             if (btnShare) {
                 btnShare.addEventListener('click', share);
             }
@@ -232,7 +237,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Handles OSD changes when the autoplay is started.
      */
     function onAutoplayStart() {
-            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+        const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
         if (btnSlideshowPause) {
             btnSlideshowPause.classList.replace('play_arrow', 'pause');
         }
@@ -242,7 +247,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Handles OSD changes when the autoplay is stopped.
      */
     function onAutoplayStop() {
-            var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
+        const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
         if (btnSlideshowPause) {
             btnSlideshowPause.classList.replace('pause', 'play_arrow');
         }
@@ -289,14 +294,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @param {Object} options - Options used to initialize the Swiper instance.
      */
     function loadSwiper(dialog, options) {
-            var slides;
+        let slides;
         if (currentOptions.slides) {
             slides = currentOptions.slides;
         } else {
             slides = currentOptions.items;
         }
 
-            require(['swiper'], function (Swiper) {
+        import('swiper').then(({default: Swiper}) => {
             swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
                 direction: 'horizontal',
                 // Loop is disabled due to the virtual slides option not supporting it.
@@ -370,7 +375,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @returns {string} The HTML markup of the slide.
      */
     function getSwiperSlideHtmlFromSlide(item) {
-            var html = '';
+        let html = '';
         html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
         html += '<div class="swiper-zoom-container">';
         if (useFakeZoomImage) {
@@ -405,7 +410,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      */
     function getCurrentImageInfo() {
         if (swiperInstance) {
-                var slide = document.querySelector('.swiper-slide-active');
+            const slide = document.querySelector('.swiper-slide-active');
 
             if (slide) {
                 return {
@@ -425,9 +430,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Starts a download for the currently displayed slide.
      */
     function download() {
-            var imageInfo = getCurrentImageInfo();
+        const imageInfo = getCurrentImageInfo();
 
-            require(['fileDownloader'], function (fileDownloader) {
+        import('fileDownloader').then(({default: fileDownloader}) => {
             fileDownloader.download([imageInfo]);
         });
     }
@@ -436,7 +441,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Shares the currently displayed slide using the browser's built-in sharing feature.
      */
     function share() {
-            var imageInfo = getCurrentImageInfo();
+        const imageInfo = getCurrentImageInfo();
 
         navigator.share({
             url: imageInfo.shareUrl
@@ -465,7 +470,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Toggles the autoplay feature of the Swiper instance.
      */
     function playPause() {
-            var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
+        const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
         if (paused) {
             play();
         } else {
@@ -477,7 +482,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Closes the dialog and destroys the Swiper instance.
      */
     function onDialogClosed() {
-            var swiper = swiperInstance;
+        const swiper = swiperInstance;
         if (swiper) {
             swiper.destroy(true, true);
             swiperInstance = null;
@@ -495,7 +500,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Shows the OSD.
      */
     function showOsd() {
-            var bottom = dialog.querySelector('.slideshowBottomBar');
+        const bottom = dialog.querySelector('.slideshowBottomBar');
         if (bottom) {
             slideUpToShow(bottom);
             startHideTimer();
@@ -506,7 +511,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * Hides the OSD.
      */
     function hideOsd() {
-            var bottom = dialog.querySelector('.slideshowBottomBar');
+        const bottom = dialog.querySelector('.slideshowBottomBar');
         if (bottom) {
             slideDownToHide(bottom);
         }
@@ -541,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
         element.classList.remove('hide');
 
-            var onFinish = function () {
+        const onFinish = function () {
             focusManager.focus(element.querySelector('.btnSlideshowPause'));
         };
 
@@ -551,11 +556,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
 
         requestAnimationFrame(function () {
-                var keyframes = [
+            const keyframes = [
                 { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
                 { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
             ];
-                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+            const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
             element.animate(keyframes, timing).onfinish = onFinish;
         });
     }
@@ -569,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             return;
         }
 
-            var onFinish = function () {
+        const onFinish = function () {
             element.classList.add('hide');
         };
 
@@ -579,11 +584,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         }
 
         requestAnimationFrame(function () {
-                var keyframes = [
+            const keyframes = [
                 { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
                 { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
             ];
-                var timing = { duration: 300, iterations: 1, easing: 'ease-out' };
+            const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
             element.animate(keyframes, timing).onfinish = onFinish;
         });
     }
@@ -593,13 +598,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
      * @param {Event} event - Pointer movement event.
      */
     function onPointerMove(event) {
-            var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
+        const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
 
         if (pointerType === 'mouse') {
-                var eventX = event.screenX || 0;
+            const eventX = event.screenX || 0;
-                var eventY = event.screenY || 0;
+            const eventY = event.screenY || 0;
 
-                var obj = lastMouseMoveData;
+            const obj = lastMouseMoveData;
             if (!obj) {
                 lastMouseMoveData = {
                     x: eventX,
@@ -665,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             dialogHelper.close(dialog);
         }
     };
-    };
+}
-});

src/components/sortmenu/sortmenu.js

@@ -1,8 +1,13 @@
-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) {
+import dialogHelper from 'dialogHelper';
-    'use strict';
+import layoutManager from 'layoutManager';
-
+import globalize from 'globalize';
-    layoutManager = layoutManager.default || layoutManager;
+import * as userSettings from 'userSettings';
-    focusManager = focusManager.default || focusManager;
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -17,34 +22,30 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
 }
 
 function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
+    import('scrollHelper').then(({default: scrollHelper}) => {
-            scrollHelper = scrollHelper.default || scrollHelper;
+        const fn = on ? 'on' : 'off';
-            var fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
 }
 
 function fillSortBy(context, options) {
-        var selectSortBy = context.querySelector('.selectSortBy');
+    const selectSortBy = context.querySelector('.selectSortBy');
 
     selectSortBy.innerHTML = options.map(function (o) {
         return '<option value="' + o.value + '">' + o.name + '</option>';
     }).join('');
 }
 
-    function saveValues(context, settings, settingsKey) {
+function saveValues(context, settingsKey) {
     userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
     userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
 }
 
-    function SortMenu() {
+class SortMenu {
-
+    show(options) {
-    }
-
-    SortMenu.prototype.show = function (options) {
         return new Promise(function (resolve, reject) {
-            require(['text!./sortmenu.template.html'], function (template) {
+            import('text!./sortmenu.template.html').then(({default: template}) => {
-                var dialogOptions = {
+                const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
@@ -55,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>';
@@ -82,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;
@@ -94,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                     }
 
                     if (submitted) {
-                        saveValues(dlg, options.settings, options.settingsKey);
+                        saveValues(dlg, options.settingsKey);
                         resolve();
                         return;
                     }
@@ -103,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
                 });
             });
         });
-    };
+    }
+}
 
-    return SortMenu;
+export default SortMenu;
-});