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,225 +1,220 @@
-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) {
+    e.preventDefault();
+    return false;
+}
+function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    var elem = context.querySelector(selector);
 
-    function onSubmit(e) {
+    if (items.length) {
-        e.preventDefault();
+        elem.classList.remove('hide');
-        return false;
+    } else {
+        elem.classList.add('hide');
     }
 
-    function renderOptions(context, selector, cssClass, items, isCheckedFn) {
+    var html = '';
-        var elem = context.querySelector(selector);
 
-        if (items.length) {
+    html += items.map(function (filter) {
-            elem.classList.remove('hide');
+        var itemHtml = '';
+
+        var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+        itemHtml += '<label>';
+        itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
+        itemHtml += '<span>' + filter.Name + '</span>';
+        itemHtml += '</label>';
+
+        return itemHtml;
+    }).join('');
+
+    elem.querySelector('.filterOptions').innerHTML = html;
+}
+
+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;
+        }
+    }
+
+    index += offset;
+
+    index = Math.min(elems.length - 1, index);
+    index = Math.max(0, index);
+
+    var newElem = elems[index];
+    if (newElem) {
+        focusManager.focus(newElem);
+    }
+}
+function centerFocus(elem, horiz, on) {
+    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 {
-            elem.classList.add('hide');
+            setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
         }
-
-        var html = '';
-
-        html += items.map(function (filter) {
-            var itemHtml = '';
-
-            var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
-            itemHtml += '<label>';
-            itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
-            itemHtml += '<span>' + filter.Name + '</span>';
-            itemHtml += '</label>';
-
-            return itemHtml;
-        }).join('');
-
-        elem.querySelector('.filterOptions').innerHTML = html;
     }
 
-    function renderDynamicFilters(context, result, options) {
+    // Video type
-        renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
+    var videoTypes = [];
-            // Switching from | to ,
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
-            var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
+
-            return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
+    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'));
+        }
     }
 
-    function loadDynamicFilters(context, options) {
+    // Genres
-        var apiClient = connectionManager.getApiClient(options.serverId);
+    var genres = [];
+    elems = context.querySelectorAll('.chkGenreFilter');
 
-        var filterMenuOptions = Object.assign(options.filterMenuOptions, {
+    for (let i = 0, length = elems.length; i < length; i++) {
-
+        if (elems[i].checked) {
-            UserId: apiClient.getCurrentUserId(),
+            genres.push(elems[i].getAttribute('data-filter'));
-            ParentId: options.parentId,
+        }
-            IncludeItemTypes: options.itemTypes.join(',')
-        });
-
-        apiClient.getFilters(filterMenuOptions).then(function (result) {
-            renderDynamicFilters(context, result, options);
-        });
     }
-
+    userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
-    function initEditor(context, settings) {
+}
-        context.querySelector('form').addEventListener('submit', onSubmit);
+function bindCheckboxInput(context, on) {
-
+    var elems = context.querySelectorAll('.checkboxList-verticalwrap');
-        var elems = context.querySelectorAll('.simpleFilter');
+    for (let i = 0, length = elems.length; i < length; i++) {
-        var i;
+        if (on) {
-        var length;
+            inputManager.on(elems[i], onInputCommand);
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            if (elems[i].tagName === 'INPUT') {
-                elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            } else {
-                elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
-            }
-        }
-
-        var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        var seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
-        elems = context.querySelectorAll('.chkSeriesStatus');
-
-        for (i = 0, length = elems.length; i < length; i++) {
-            elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        }
-
-        if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
-            context.querySelector('.basicFilterSection').classList.remove('hide');
         } else {
-            context.querySelector('.basicFilterSection').classList.add('hide');
+            inputManager.off(elems[i], onInputCommand);
         }
+    }
+}
+function initEditor(context, settings) {
+    context.querySelector('form').addEventListener('submit', onSubmit);
 
-        if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
+    var elems = context.querySelectorAll('.simpleFilter');
-            context.querySelector('.featureSection').classList.remove('hide');
+    var i;
+    var length;
+
+    for (i = 0, length = elems.length; i < length; i++) {
+        if (elems[i].tagName === 'INPUT') {
+            elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
         } else {
-            context.querySelector('.featureSection').classList.add('hide');
+            elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false;
         }
     }
 
-    function saveValues(context, settings, settingsKey) {
+    var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
-        var elems = context.querySelectorAll('.simpleFilter');
+    elems = context.querySelectorAll('.chkVideoTypeFilter');
-        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
+    for (i = 0, length = elems.length; i < length; i++) {
-        var videoTypes = [];
+        elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-
-        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 seriesStatuses = settings.SeriesStatus ? settings.SeriesStatus.split(',') : [];
-        var value = elem.checked;
+    elems = context.querySelectorAll('.chkSeriesStatus');
-        value = value ? value : null;
+
-        userSettings.setFilter(key, value);
+    for (i = 0, length = elems.length; i < length; i++) {
+        elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
     }
 
-    function centerFocus(elem, horiz, on) {
+    if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
-        require(['scrollHelper'], function (scrollHelper) {
+        context.querySelector('.basicFilterSection').classList.remove('hide');
-            scrollHelper = scrollHelper.default || scrollHelper;
+    } else {
-            var fn = on ? 'on' : 'off';
+        context.querySelector('.basicFilterSection').classList.add('hide');
-            scrollHelper.centerFocus[fn](elem, horiz);
-        });
     }
 
-    function moveCheckboxFocus(elem, offset) {
+    if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
-        var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
+        context.querySelector('.featureSection').classList.remove('hide');
-        var elems = focusManager.getFocusableElements(parent);
+    } else {
-
+        context.querySelector('.featureSection').classList.add('hide');
-        var index = -1;
-        for (var i = 0, length = elems.length; i < length; i++) {
-            if (elems[i] === elem) {
-                index = i;
-                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 loadDynamicFilters(context, options) {
+    var apiClient = connectionManager.getApiClient(options.serverId);
 
-    function onInputCommand(e) {
+    var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-        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() {
+        UserId: apiClient.getCurrentUserId(),
+        ParentId: options.parentId,
+        IncludeItemTypes: options.itemTypes.join(',')
+    });
 
-    }
+    apiClient.getFilters(filterMenuOptions).then((result) => {
-
+        renderDynamicFilters(context, result, options);
-    function bindCheckboxInput(context, on) {
+    });
-        var elems = context.querySelectorAll('.checkboxList-verticalwrap');
+}
-        for (var i = 0, length = elems.length; i < length; i++) {
+class FilterMenu {
-            if (on) {
+    show(options) {
-                inputManager.on(elems[i], onInputCommand);
+        return new Promise( (resolve, reject) => {
-            } else {
+            import('text!./filtermenu.template.html').then(({ default: template }) => {
-                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();
                 });
             });
         });
-    };
+    }
+}
 
-    return FilterMenu;
+export default FilterMenu;
-});