diff --git a/package.json b/package.json
index 8014caa22..0a5be66a9 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index df74dc2a1..637214a87 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/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) {
- 'use strict';
- focusManager = focusManager.default || focusManager;
+import dom from 'dom';
+import focusManager from '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) {
- e.preventDefault();
- return false;
+ if (items.length) {
+ elem.classList.remove('hide');
+ } else {
+ elem.classList.add('hide');
}
- function renderOptions(context, selector, cssClass, items, isCheckedFn) {
- var elem = context.querySelector(selector);
+ var html = '';
- if (items.length) {
- elem.classList.remove('hide');
+ html += items.map(function (filter) {
+ var itemHtml = '';
+
+ var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+ itemHtml += '';
+
+ 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 += '';
-
- 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;
- });
+ // 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'));
+ }
}
- function loadDynamicFilters(context, options) {
- var apiClient = connectionManager.getApiClient(options.serverId);
+ // Genres
+ var genres = [];
+ elems = context.querySelectorAll('.chkGenreFilter');
- var filterMenuOptions = Object.assign(options.filterMenuOptions, {
-
- UserId: apiClient.getCurrentUserId(),
- ParentId: options.parentId,
- IncludeItemTypes: options.itemTypes.join(',')
- });
-
- apiClient.getFilters(filterMenuOptions).then(function (result) {
- renderDynamicFilters(context, result, options);
- });
+ for (let i = 0, length = elems.length; i < length; i++) {
+ if (elems[i].checked) {
+ genres.push(elems[i].getAttribute('data-filter'));
+ }
}
-
- function initEditor(context, settings) {
- context.querySelector('form').addEventListener('submit', onSubmit);
-
- var elems = context.querySelectorAll('.simpleFilter');
- 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 {
- 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');
+ 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 {
- 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)')) {
- context.querySelector('.featureSection').classList.remove('hide');
+ var elems = context.querySelectorAll('.simpleFilter');
+ 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 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'));
- }
- }
+ var videoTypes = settings.VideoTypes ? settings.VideoTypes.split(',') : [];
+ elems = context.querySelectorAll('.chkVideoTypeFilter');
- // Video type
- var videoTypes = [];
- 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(','));
+ for (i = 0, length = elems.length; i < length; i++) {
+ elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
}
- function setBasicFilter(context, key, elem) {
- var value = elem.checked;
- value = value ? value : null;
- userSettings.setFilter(key, value);
+ 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;
}
- function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- scrollHelper = scrollHelper.default || scrollHelper;
- var fn = on ? 'on' : 'off';
- scrollHelper.centerFocus[fn](elem, horiz);
- });
+ if (context.querySelector('.basicFilterSection .viewSetting:not(.hide)')) {
+ context.querySelector('.basicFilterSection').classList.remove('hide');
+ } else {
+ context.querySelector('.basicFilterSection').classList.add('hide');
}
- function moveCheckboxFocus(elem, offset) {
- var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
- var elems = focusManager.getFocusableElements(parent);
-
- 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);
- }
+ if (context.querySelector('.featureSection .viewSetting:not(.hide)')) {
+ context.querySelector('.featureSection').classList.remove('hide');
+ } else {
+ context.querySelector('.featureSection').classList.add('hide');
}
+}
+function loadDynamicFilters(context, options) {
+ var apiClient = connectionManager.getApiClient(options.serverId);
- 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;
- }
- }
+ var filterMenuOptions = Object.assign(options.filterMenuOptions, {
- function FilterMenu() {
+ UserId: apiClient.getCurrentUserId(),
+ ParentId: options.parentId,
+ IncludeItemTypes: options.itemTypes.join(',')
+ });
- }
-
- 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) {
+ apiClient.getFilters(filterMenuOptions).then((result) => {
+ renderDynamicFilters(context, result, options);
+ });
+}
+class FilterMenu {
+ show(options) {
+ return new Promise( (resolve, reject) => {
+ import('text!./filtermenu.template.html').then(({ default: 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;
}
-
- reject();
+ return resolve();
});
});
});
- };
+ }
+}
- return FilterMenu;
-});
+export default FilterMenu;