Merge pull request #1728 from mattstrayer/migrate-to-ES6-filtermenu

Migrated FilterMenu to es6 module

package.json

@@ -111,6 +111,7 @@
           "src/components/favoriteitems.js",
           "src/components/fetchhelper.js",
           "src/components/filterdialog/filterdialog.js",
+          "src/components/filtermenu/filtermenu.js",
           "src/components/focusManager.js",
           "src/components/groupedcards.js",
           "src/components/guide/guide.js",

src/components/filtermenu/filtermenu.js

@@ -1,15 +1,25 @@
-define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', 'inputManager', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, appHost, inputManager, layoutManager, connectionManager, appRouter, globalize, userSettings) {
+import dom from 'dom';
-    'use strict';
+import focusManager from 'focusManager';
-    focusManager = focusManager.default || focusManager;
+import dialogHelper from 'dialogHelper';
+import inputManager from 'inputManager';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+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';
 
-    layoutManager = layoutManager.default || layoutManager;
+function onSubmit(e) {
-
-    function onSubmit(e) {
     e.preventDefault();
     return false;
-    }
+}
-
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-    function renderOptions(context, selector, cssClass, items, isCheckedFn) {
     var elem = context.querySelector(selector);
 
     if (items.length) {
@@ -33,32 +43,116 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     }).join('');
 
     elem.querySelector('.filterOptions').innerHTML = html;
-    }
+}
 
-    function renderDynamicFilters(context, result, options) {
+function renderDynamicFilters(context, result, options) {
     renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
         // Switching from | to ,
         var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
         return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
     });
+}
+
+function setBasicFilter(context, key, elem) {
+    var value = elem.checked;
+    value = value ? value : null;
+    userSettings.setFilter(key, value);
+}
+function moveCheckboxFocus(elem, offset) {
+    var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+    var elems = focusManager.getFocusableElements(parent);
+
+    var index = -1;
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i] === elem) {
+            index = i;
+            break;
+        }
     }
 
-    function loadDynamicFilters(context, options) {
+    index += offset;
-        var apiClient = connectionManager.getApiClient(options.serverId);
 
-        var filterMenuOptions = Object.assign(options.filterMenuOptions, {
+    index = Math.min(elems.length - 1, index);
+    index = Math.max(0, index);
 
-            UserId: apiClient.getCurrentUserId(),
+    var newElem = elems[index];
-            ParentId: options.parentId,
+    if (newElem) {
-            IncludeItemTypes: options.itemTypes.join(',')
+        focusManager.focus(newElem);
-        });
+    }
-
+}
-        apiClient.getFilters(filterMenuOptions).then(function (result) {
+function centerFocus(elem, horiz, on) {
-            renderDynamicFilters(context, result, options);
+    import('scrollHelper').then(({ default: scrollHelper }) => {
+        var fn = on ? 'on' : 'off';
+        scrollHelper.centerFocus[fn](elem, horiz);
     });
+}
+function onInputCommand(e) {
+    switch (e.detail.command) {
+        case 'left':
+            moveCheckboxFocus(e.target, -1);
+            e.preventDefault();
+            break;
+        case 'right':
+            moveCheckboxFocus(e.target, 1);
+            e.preventDefault();
+            break;
+        default:
+            break;
+    }
+}
+function saveValues(context, settings, settingsKey) {
+    var elems = context.querySelectorAll('.simpleFilter');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
+        } else {
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
+        }
     }
 
-    function initEditor(context, settings) {
+    // Video type
+    var videoTypes = [];
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
+
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            videoTypes.push(elems[i].getAttribute('data-filter'));
+        }
+    }
+    userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
+
+    // Series status
+    var seriesStatuses = [];
+    elems = context.querySelectorAll('.chkSeriesStatus');
+
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            seriesStatuses.push(elems[i].getAttribute('data-filter'));
+        }
+    }
+
+    // Genres
+    var genres = [];
+    elems = context.querySelectorAll('.chkGenreFilter');
+
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].checked) {
+            genres.push(elems[i].getAttribute('data-filter'));
+        }
+    }
+    userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
+}
+function bindCheckboxInput(context, on) {
+    var elems = context.querySelectorAll('.checkboxList-verticalwrap');
+    for (let i = 0, length = elems.length; i < length; i++) {
+        if (on) {
+            inputManager.on(elems[i], onInputCommand);
+        } else {
+            inputManager.off(elems[i], onInputCommand);
+        }
+    }
+}
+function initEditor(context, settings) {
     context.querySelector('form').addEventListener('submit', onSubmit);
 
     var elems = context.querySelectorAll('.simpleFilter');
@@ -98,128 +192,29 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
     } else {
         context.querySelector('.featureSection').classList.add('hide');
     }
-    }
+}
+function loadDynamicFilters(context, options) {
+    var apiClient = connectionManager.getApiClient(options.serverId);
 
-    function saveValues(context, settings, settingsKey) {
+    var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-        var elems = context.querySelectorAll('.simpleFilter');
-        var i;
-        var length;
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].tagName === 'INPUT') {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
-            } else {
-                setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
-            }
-        }
 
-        // Video type
+        UserId: apiClient.getCurrentUserId(),
-        var videoTypes = [];
+        ParentId: options.parentId,
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
+        IncludeItemTypes: options.itemTypes.join(',')
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                videoTypes.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
-
-        // Series status
-        var seriesStatuses = [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                seriesStatuses.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-
-        // Genres
-        var genres = [];
-        elems = context.querySelectorAll('.chkGenreFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].checked) {
-                genres.push(elems[i].getAttribute('data-filter'));
-            }
-        }
-        userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
-    }
-
-    function setBasicFilter(context, key, elem) {
-        var value = elem.checked;
-        value = value ? value : null;
-        userSettings.setFilter(key, value);
-    }
-
-    function centerFocus(elem, horiz, on) {
-        require(['scrollHelper'], function (scrollHelper) {
-            scrollHelper = scrollHelper.default || scrollHelper;
-            var fn = on ? 'on' : 'off';
-            scrollHelper.centerFocus[fn](elem, horiz);
     });
-    }
 
-    function moveCheckboxFocus(elem, offset) {
+    apiClient.getFilters(filterMenuOptions).then((result) => {
-        var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+        renderDynamicFilters(context, result, options);
-        var elems = focusManager.getFocusableElements(parent);
+    });
-
+}
-        var index = -1;
+class FilterMenu {
-        for (var i = 0, length = elems.length; i < length; i++) {
+    show(options) {
-            if (elems[i] === elem) {
+        return new Promise( (resolve, reject) => {
-                index = i;
+            import('text!./filtermenu.template.html').then(({ default: template }) => {
-                break;
-            }
-        }
-
-        index += offset;
-
-        index = Math.min(elems.length - 1, index);
-        index = Math.max(0, index);
-
-        var newElem = elems[index];
-        if (newElem) {
-            focusManager.focus(newElem);
-        }
-    }
-
-    function onInputCommand(e) {
-        switch (e.detail.command) {
-            case 'left':
-                moveCheckboxFocus(e.target, -1);
-                e.preventDefault();
-                break;
-            case 'right':
-                moveCheckboxFocus(e.target, 1);
-                e.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-
-    function FilterMenu() {
-
-    }
-
-    function bindCheckboxInput(context, on) {
-        var elems = context.querySelectorAll('.checkboxList-verticalwrap');
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (on) {
-                inputManager.on(elems[i], onInputCommand);
-            } else {
-                inputManager.off(elems[i], onInputCommand);
-            }
-        }
-    }
-
-    FilterMenu.prototype.show = function (options) {
-        return new Promise(function (resolve, reject) {
-            require(['text!./filtermenu.template.html'], function (template) {
                 var dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
                 };
-
                 if (layoutManager.tv) {
                     dialogOptions.size = 'fullscreen';
                 } else {
@@ -243,7 +238,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 dlg.innerHTML = globalize.translateHtml(html, 'core');
 
                 var settingElements = dlg.querySelectorAll('.viewSetting');
-                for (var i = 0, length = settingElements.length; i < length; i++) {
+                for (let i = 0, length = settingElements.length; i < length; i++) {
                     if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
                         settingElements[i].classList.add('hide');
                     } else {
@@ -255,7 +250,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                 loadDynamicFilters(dlg, options);
 
                 bindCheckboxInput(dlg, true);
-
                 dlg.querySelector('.btnCancel').addEventListener('click', function () {
                     dialogHelper.close(dlg);
                 });
@@ -270,7 +264,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     submitted = true;
                 }, true);
 
-                dialogHelper.open(dlg).then(function () {
+                dialogHelper.open(dlg).then( function() {
                     bindCheckboxInput(dlg, false);
 
                     if (layoutManager.tv) {
@@ -280,16 +274,14 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
                     if (submitted) {
                         //if (!options.onChange) {
                         saveValues(dlg, options.settings, options.settingsKey);
-                        resolve();
+                        return resolve();
                         //}
-                        return;
                     }
+                    return resolve();
+                });
+            });
+        });
+    }
+}
 
-                    reject();
+export default FilterMenu;
-                });
-            });
-        });
-    };
-
-    return FilterMenu;
-});