mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 02:18:16 -07:00
Merge pull request #1728 from mattstrayer/migrate-to-ES6-filtermenu
Migrated FilterMenu to es6 module
This commit is contained in:
Anthony Lavado
GitHub
commit
ead5b82ef2
@ -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",
|
||||
|
||||
@ -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 += '<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) {
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user