mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 10:58:20 -07:00
only export functions previously declared in prototype
This commit is contained in:
Matt Strayer
parent
5675b00956
commit
fe237698bf
@ -15,12 +15,11 @@ import 'css!./../formdialog';
|
|||||||
import 'emby-button';
|
import 'emby-button';
|
||||||
import 'flexStyles';
|
import 'flexStyles';
|
||||||
|
|
||||||
class FilterMenu {
|
function onSubmit(e) {
|
||||||
onSubmit(e) {
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
renderOptions(context, selector, cssClass, items, isCheckedFn) {
|
function renderOptions(context, selector, cssClass, items, isCheckedFn) {
|
||||||
var elem = context.querySelector(selector);
|
var elem = context.querySelector(selector);
|
||||||
|
|
||||||
if (items.length) {
|
if (items.length) {
|
||||||
@ -44,32 +43,119 @@ class FilterMenu {
|
|||||||
}).join('');
|
}).join('');
|
||||||
|
|
||||||
elem.querySelector('.filterOptions').innerHTML = html;
|
elem.querySelector('.filterOptions').innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderDynamicFilters(context, result, options) {
|
function renderDynamicFilters(context, result, options) {
|
||||||
this.renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
|
renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
|
||||||
// Switching from | to ,
|
// Switching from | to ,
|
||||||
var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
|
var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
|
||||||
return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -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 (var i = 0, length = elems.length; i < length; i++) {
|
||||||
|
if (elems[i] === elem) {
|
||||||
|
index = i;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
loadDynamicFilters(context, options) {
|
|
||||||
var apiClient = connectionManager.getApiClient(options.serverId);
|
|
||||||
|
|
||||||
var filterMenuOptions = Object.assign(options.filterMenuOptions, {
|
|
||||||
|
|
||||||
UserId: apiClient.getCurrentUserId(),
|
|
||||||
ParentId: options.parentId,
|
|
||||||
IncludeItemTypes: options.itemTypes.join(',')
|
|
||||||
});
|
|
||||||
|
|
||||||
apiClient.getFilters(filterMenuOptions).then((result) => {
|
|
||||||
this.renderDynamicFilters(context, result, options);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
initEditor(context, settings) {
|
index += offset;
|
||||||
context.querySelector('form').addEventListener('submit', this.onSubmit);
|
|
||||||
|
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');
|
||||||
|
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
|
||||||
|
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(','));
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function initEditor(context, settings) {
|
||||||
|
context.querySelector('form').addEventListener('submit', onSubmit);
|
||||||
|
|
||||||
var elems = context.querySelectorAll('.simpleFilter');
|
var elems = context.querySelectorAll('.simpleFilter');
|
||||||
var i;
|
var i;
|
||||||
@ -108,109 +194,22 @@ class FilterMenu {
|
|||||||
} else {
|
} else {
|
||||||
context.querySelector('.featureSection').classList.add('hide');
|
context.querySelector('.featureSection').classList.add('hide');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function loadDynamicFilters(context, options) {
|
||||||
|
var apiClient = connectionManager.getApiClient(options.serverId);
|
||||||
|
|
||||||
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') {
|
|
||||||
this.setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
|
|
||||||
} else {
|
|
||||||
this.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(','));
|
|
||||||
}
|
|
||||||
setBasicFilter(context, key, elem) {
|
|
||||||
var value = elem.checked;
|
|
||||||
value = value ? value : null;
|
|
||||||
userSettings.setFilter(key, value);
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
centerFocus(elem, horiz, on) {
|
|
||||||
import('scrollHelper').then(({ default: scrollHelper }) => {
|
|
||||||
var fn = on ? 'on' : 'off';
|
|
||||||
scrollHelper.centerFocus[fn](elem, horiz);
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
onInputCommand(e) {
|
apiClient.getFilters(filterMenuOptions).then((result) => {
|
||||||
switch (e.detail.command) {
|
renderDynamicFilters(context, result, options);
|
||||||
case 'left':
|
});
|
||||||
this.moveCheckboxFocus(e.target, -1);
|
}
|
||||||
e.preventDefault();
|
class FilterMenu {
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
this.moveCheckboxFocus(e.target, 1);
|
|
||||||
e.preventDefault();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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], this.onInputCommand);
|
|
||||||
} else {
|
|
||||||
inputManager.off(elems[i], this.onInputCommand);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
show(options) {
|
show(options) {
|
||||||
return new Promise( (resolve, reject) => {
|
return new Promise( (resolve, reject) => {
|
||||||
import('text!./filtermenu.template.html').then(({ default: template }) => {
|
import('text!./filtermenu.template.html').then(({ default: template }) => {
|
||||||
@ -249,16 +248,16 @@ class FilterMenu {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.initEditor(dlg, options.settings);
|
initEditor(dlg, options.settings);
|
||||||
this.loadDynamicFilters(dlg, options);
|
loadDynamicFilters(dlg, options);
|
||||||
|
|
||||||
this.bindCheckboxInput(dlg, true);
|
bindCheckboxInput(dlg, true);
|
||||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
this.centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
var submitted;
|
var submitted;
|
||||||
@ -267,16 +266,16 @@ class FilterMenu {
|
|||||||
submitted = true;
|
submitted = true;
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
dialogHelper.open(dlg).then( () => {
|
dialogHelper.open(dlg).then( function() {
|
||||||
this.bindCheckboxInput(dlg, false);
|
bindCheckboxInput(dlg, false);
|
||||||
|
|
||||||
if (layoutManager.tv) {
|
if (layoutManager.tv) {
|
||||||
this.centerFocus(dlg.querySelector('.formDialogContent'), false, false);
|
centerFocus(dlg.querySelector('.formDialogContent'), false, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (submitted) {
|
if (submitted) {
|
||||||
//if (!options.onChange) {
|
//if (!options.onChange) {
|
||||||
this.saveValues(dlg, options.settings, options.settingsKey);
|
saveValues(dlg, options.settings, options.settingsKey);
|
||||||
return resolve();
|
return resolve();
|
||||||
//}
|
//}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user