Migrated filterdialog.js

This commit is contained in:
Cromefire_ 2020-05-05 23:32:08 +02:00
parent 1b4c178790
commit 3549bd5700
No known key found for this signature in database
GPG Key ID: D3D3DB179F435F0C
8 changed files with 601 additions and 557 deletions

View File

@ -1,49 +1,59 @@
define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'browser', 'require', 'emby-checkbox', 'emby-collapse', 'css!./style'], function (dom, dialogHelper, globalize, connectionManager, events, browser, require) { import dom from "dom";
'use strict'; import dialogHelper from "dialogHelper";
import globalize from "globalize";
import connectionManager from "connectionManager";
import events from "events";
import "emby-checkbox";
import "emby-collapse";
import "css!./style.css";
/* eslint-disable indent */
function renderOptions(context, selector, cssClass, items, isCheckedFn) { function renderOptions(context, selector, cssClass, items, isCheckedFn) {
var elem = context.querySelector(selector); const elem = context.querySelector(selector);
if (items.length) { if (items.length) {
elem.classList.remove('hide'); elem.classList.remove("hide");
} else { } else {
elem.classList.add('hide'); elem.classList.add("hide");
} }
var html = ''; let html = "";
html += '<div class="checkboxList">'; html += '<div class="checkboxList">';
html += items.map(function (filter) { html += items.map(function (filter) {
var itemHtml = ''; let itemHtml = "";
var checkedHtml = isCheckedFn(filter) ? ' checked' : ''; const checkedHtml = isCheckedFn(filter) ? " checked" : "";
itemHtml += '<label>'; itemHtml += "<label>";
itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '"/>'; itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '"/>';
itemHtml += '<span>' + filter + '</span>'; itemHtml += "<span>" + filter + "</span>";
itemHtml += '</label>'; itemHtml += "</label>";
return itemHtml; return itemHtml;
}).join(''); }).join("");
html += '</div>'; html += "</div>";
elem.querySelector('.filterOptions').innerHTML = html; elem.querySelector(".filterOptions").innerHTML = html;
} }
function renderFilters(context, result, query) { function renderFilters(context, result, query) {
renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) { if (result.Tags) {
var delimeter = '|'; result.Tags.length = Math.min(result.Tags.length, 50);
return (delimeter + (query.Genres || '') + delimeter).indexOf(delimeter + i + delimeter) != -1; }
renderOptions(context, ".genreFilters", "chkGenreFilter", result.Genres, function (i) {
const delimeter = "|";
return (delimeter + (query.Genres || "") + delimeter).includes(delimeter + i + delimeter);
}); });
renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) { renderOptions(context, ".officialRatingFilters", "chkOfficialRatingFilter", result.OfficialRatings, function (i) {
var delimeter = '|'; const delimeter = "|";
return (delimeter + (query.OfficialRatings || '') + delimeter).indexOf(delimeter + i + delimeter) != -1; return (delimeter + (query.OfficialRatings || "") + delimeter).includes(delimeter + i + delimeter);
}); });
renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) { renderOptions(context, ".tagFilters", "chkTagFilter", result.Tags, function (i) {
var delimeter = '|'; const delimeter = "|";
return (delimeter + (query.Tags || '') + delimeter).indexOf(delimeter + i + delimeter) != -1; return (delimeter + (query.Tags || "") + delimeter).includes(delimeter + i + delimeter);
}); });
renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) { renderOptions(context, ".yearFilters", "chkYearFilter", result.Years, function (i) {
var delimeter = ','; const delimeter = ",";
return (delimeter + (query.Years || '') + delimeter).indexOf(delimeter + i + delimeter) != -1; return (delimeter + (query.Years || "") + delimeter).includes(delimeter + i + delimeter);
}); });
} }
function loadDynamicFilters(context, apiClient, userId, itemQuery) { function loadDynamicFilters(context, apiClient, userId, itemQuery) {
return apiClient.getJSON(apiClient.getUrl('Items/Filters', { return apiClient.getJSON(apiClient.getUrl("Items/Filters", {
UserId: userId, UserId: userId,
ParentId: itemQuery.ParentId, ParentId: itemQuery.ParentId,
IncludeItemTypes: itemQuery.IncludeItemTypes IncludeItemTypes: itemQuery.IncludeItemTypes
@ -52,346 +62,380 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
}); });
} }
/**
* @param context {HTMLDivElement} Dialog
* @param options {any} Options
*/
function updateFilterControls(context, options) { function updateFilterControls(context, options) {
var elems; const query = options.query;
var i;
var length;
var query = options.query;
if (options.mode == 'livetvchannels') { if (options.mode === "livetvchannels") {
context.querySelector('.chkFavorite').checked = query.IsFavorite == true; context.querySelector(".chkFavorite").checked = query.IsFavorite === true;
context.querySelector('.chkLikes').checked = query.IsLiked == true; context.querySelector(".chkLikes").checked = query.IsLiked === true;
context.querySelector('.chkDislikes').checked = query.IsDisliked == true; context.querySelector(".chkDislikes").checked = query.IsDisliked === true;
} else { } else {
elems = context.querySelectorAll('.chkStandardFilter'); for (const elem of context.querySelectorAll(".chkStandardFilter")) {
for (i = 0, length = elems.length; i < length; i++) { const filters = "," + (query.Filters || "");
var chkStandardFilter = elems[i]; const filterName = elem.getAttribute("data-filter");
var filters = ',' + (query.Filters || ''); elem.checked = filters.includes("," + filterName);
var filterName = chkStandardFilter.getAttribute('data-filter');
chkStandardFilter.checked = filters.indexOf(',' + filterName) != -1;
} }
} }
elems = context.querySelectorAll('.chkVideoTypeFilter'); for (const elem of context.querySelectorAll(".chkVideoTypeFilter")) {
for (i = 0, length = elems.length; i < length; i++) { const filters = "," + (query.VideoTypes || "");
var chkVideoTypeFilter = elems[i]; const filterName = elem.getAttribute("data-filter");
var filters = ',' + (query.VideoTypes || ''); elem.checked = filters.includes("," + filterName);
var filterName = chkVideoTypeFilter.getAttribute('data-filter');
chkVideoTypeFilter.checked = filters.indexOf(',' + filterName) != -1;
} }
context.querySelector('.chk3DFilter').checked = query.Is3D == true; context.querySelector(".chk3DFilter").checked = query.Is3D === true;
context.querySelector('.chkHDFilter').checked = query.IsHD == true; context.querySelector(".chkHDFilter").checked = query.IsHD === true;
context.querySelector('.chk4KFilter').checked = query.Is4K == true; context.querySelector(".chk4KFilter").checked = query.Is4K === true;
context.querySelector('.chkSDFilter').checked = query.IsHD == true; context.querySelector(".chkSDFilter").checked = query.IsHD === true;
context.querySelector('#chkSubtitle').checked = query.HasSubtitles == true; context.querySelector("#chkSubtitle").checked = query.HasSubtitles === true;
context.querySelector('#chkTrailer').checked = query.HasTrailer == true; context.querySelector("#chkTrailer").checked = query.HasTrailer === true;
context.querySelector('#chkThemeSong').checked = query.HasThemeSong == true; context.querySelector("#chkThemeSong").checked = query.HasThemeSong === true;
context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo == true; context.querySelector("#chkThemeVideo").checked = query.HasThemeVideo === true;
context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature == true; context.querySelector("#chkSpecialFeature").checked = query.HasSpecialFeature === true;
context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber == 0; context.querySelector("#chkSpecialEpisode").checked = query.ParentIndexNumber === 0;
context.querySelector('#chkMissingEpisode').checked = query.IsMissing == true; context.querySelector("#chkMissingEpisode").checked = query.IsMissing === true;
context.querySelector('#chkFutureEpisode').checked = query.IsUnaired == true; context.querySelector("#chkFutureEpisode").checked = query.IsUnaired === true;
for (i = 0, length = elems.length; i < length; i++) { for (const elem of context.querySelectorAll(".chkStatus")) {
var chkStatus = elems[i]; const filters = "," + (query.SeriesStatus || "");
var filters = ',' + (query.SeriesStatus || ''); const filterName = elem.getAttribute("data-filter");
var filterName = chkStatus.getAttribute('data-filter'); elem.checked = filters.includes("," + filterName);
chkStatus.checked = filters.indexOf(',' + filterName) != -1;
} }
} }
/**
* @param instance {FilterDialog} An instance of FilterDialog
*/
function triggerChange(instance) { function triggerChange(instance) {
events.trigger(instance, 'filterchange'); events.trigger(instance, "filterchange");
} }
function setVisibility(context, options) { function setVisibility(context, options) {
if (options.mode == 'livetvchannels' || options.mode == 'albums' || options.mode == 'artists' || options.mode == 'albumartists' || options.mode == 'songs') { if (options.mode === "livetvchannels" || options.mode === "albums" || options.mode === "artists" || options.mode === "albumartists" || options.mode === "songs") {
hideByClass(context, 'videoStandard'); hideByClass(context, "videoStandard");
} }
if (enableDynamicFilters(options.mode)) { if (enableDynamicFilters(options.mode)) {
context.querySelector('.genreFilters').classList.remove('hide'); context.querySelector(".genreFilters").classList.remove("hide");
context.querySelector('.officialRatingFilters').classList.remove('hide'); context.querySelector(".officialRatingFilters").classList.remove("hide");
context.querySelector('.tagFilters').classList.remove('hide'); context.querySelector(".tagFilters").classList.remove("hide");
context.querySelector('.yearFilters').classList.remove('hide'); context.querySelector(".yearFilters").classList.remove("hide");
} }
if (options.mode == 'movies' || options.mode == 'episodes') { if (options.mode === "movies" || options.mode === "episodes") {
context.querySelector('.videoTypeFilters').classList.remove('hide'); context.querySelector(".videoTypeFilters").classList.remove("hide");
} }
if (options.mode == 'movies' || options.mode == 'series' || options.mode == 'episodes') { if (options.mode === "movies" || options.mode === "series" || options.mode === "episodes") {
context.querySelector('.features').classList.remove('hide'); context.querySelector(".features").classList.remove("hide");
} }
if (options.mode == 'series') { if (options.mode === "series") {
context.querySelector('.seriesStatus').classList.remove('hide'); context.querySelector(".seriesStatus").classList.remove("hide");
} }
if (options.mode == 'episodes') { if (options.mode === "episodes") {
showByClass(context, 'episodeFilter'); showByClass(context, "episodeFilter");
} }
} }
function showByClass(context, className) { function showByClass(context, className) {
var elems = context.querySelectorAll('.' + className); const elems = context.querySelectorAll("." + className);
for (var i = 0, length = elems.length; i < length; i++) { let i = 0;
elems[i].classList.remove('hide'); const length = elems.length;
for (; i < length; i++) {
elems[i].classList.remove("hide");
} }
} }
function hideByClass(context, className) { function hideByClass(context, className) {
var elems = context.querySelectorAll('.' + className); const elems = context.querySelectorAll("." + className);
for (var i = 0, length = elems.length; i < length; i++) { let i = 0;
elems[i].classList.add('hide'); const length = elems.length;
for (; i < length; i++) {
elems[i].classList.add("hide");
} }
} }
function enableDynamicFilters(mode) { function enableDynamicFilters(mode) {
return mode == 'movies' || mode == 'series' || mode == 'albums' || mode == 'albumartists' || mode == 'artists' || mode == 'songs' || mode == 'episodes'; return mode === "movies" || mode === "series" || mode === "albums" || mode === "albumartists" || mode === "artists" || mode === "songs" || mode === "episodes";
} }
return function (options) { class FilterDialog {
function onFavoriteChange() { constructor(options) {
var query = options.query; /**
query.StartIndex = 0; * @private
query.IsFavorite = !!this.checked || null; */
triggerChange(self); this.options = options;
} }
function onStandardFilterChange() { /**
var query = options.query; * @private
var filterName = this.getAttribute('data-filter'); */
var filters = query.Filters || ''; onFavoriteChange(elem) {
filters = (',' + filters).replace(',' + filterName, '').substring(1); const query = this.options.query;
query.StartIndex = 0;
query.IsFavorite = !!elem.checked || null;
triggerChange(this);
}
if (this.checked) { /**
filters = filters ? filters + ',' + filterName : filterName; * @private
*/
onStandardFilterChange(elem) {
const query = this.options.query;
const filterName = elem.getAttribute("data-filter");
let filters = query.Filters || "";
filters = ("," + filters).replace("," + filterName, "").substring(1);
if (elem.checked) {
filters = filters ? filters + "," + filterName : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.Filters = filters; query.Filters = filters;
triggerChange(self); triggerChange(this);
} }
function onVideoTypeFilterChange() { /**
var query = options.query; * @private
var filterName = this.getAttribute('data-filter'); */
var filters = query.VideoTypes || ''; onVideoTypeFilterChange(elem) {
filters = (',' + filters).replace(',' + filterName, '').substring(1); const query = this.options.query;
const filterName = elem.getAttribute("data-filter");
let filters = query.VideoTypes || "";
filters = ("," + filters).replace("," + filterName, "").substring(1);
if (this.checked) { if (elem.checked) {
filters = filters ? filters + ',' + filterName : filterName; filters = filters ? filters + "," + filterName : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.VideoTypes = filters; query.VideoTypes = filters;
triggerChange(self); triggerChange(this);
} }
function onStatusChange() { /**
var query = options.query; * @private
var filterName = this.getAttribute('data-filter'); */
var filters = query.SeriesStatus || ''; onStatusChange(elem) {
filters = (',' + filters).replace(',' + filterName, '').substring(1); const query = this.options.query;
const filterName = elem.getAttribute("data-filter");
let filters = query.SeriesStatus || "";
filters = ("," + filters).replace("," + filterName, "").substring(1);
if (this.checked) { if (elem.checked) {
filters = filters ? filters + ',' + filterName : filterName; filters = filters ? filters + "," + filterName : filterName;
} }
query.SeriesStatus = filters; query.SeriesStatus = filters;
query.StartIndex = 0; query.StartIndex = 0;
triggerChange(self); triggerChange(this);
} }
function bindEvents(context) { /**
var elems; * @param context {HTMLDivElement} The dialog
var i; */
var length; bindEvents(context) {
var query = options.query; const query = this.options.query;
if (options.mode == 'livetvchannels') { if (this.options.mode === "livetvchannels") {
elems = context.querySelectorAll('.chkFavorite'); for (const elem of context.querySelectorAll(".chkFavorite")) {
for (i = 0, length = elems.length; i < length; i++) { elem.addEventListener("change", () => this.onFavoriteChange(elem));
elems[i].addEventListener('change', onFavoriteChange);
} }
context.querySelector('.chkLikes').addEventListener('change', function () {
const chkLikes = context.querySelector(".chkLikes");
chkLikes.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.IsLiked = this.checked ? true : null; query.IsLiked = chkLikes.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('.chkDislikes').addEventListener('change', function () { const chkDislikes = context.querySelector(".chkDislikes");
chkDislikes.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.IsDisliked = this.checked ? true : null; query.IsDisliked = chkDislikes.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
} else { } else {
elems = context.querySelectorAll('.chkStandardFilter'); for (const elem of context.querySelectorAll(".chkStandardFilter")) {
for (i = 0, length = elems.length; i < length; i++) { elem.addEventListener("change", () => this.onStandardFilterChange(elem));
elems[i].addEventListener('change', onStandardFilterChange);
} }
} }
elems = context.querySelectorAll('.chkVideoTypeFilter');
for (i = 0, length = elems.length; i < length; i++) { for (const elem of context.querySelectorAll(".chkVideoTypeFilter")) {
elems[i].addEventListener('change', onVideoTypeFilterChange); elem.addEventListener("change", () => this.onVideoTypeFilterChange(elem));
} }
context.querySelector('.chk3DFilter').addEventListener('change', function () { const chk3DFilter = context.querySelector(".chk3DFilter");
chk3DFilter.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.Is3D = this.checked ? true : null; query.Is3D = chk3DFilter.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('.chk4KFilter').addEventListener('change', function () { const chk4KFilter = context.querySelector(".chk4KFilter");
chk4KFilter.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.Is4K = this.checked ? true : null; query.Is4K = chk4KFilter.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('.chkHDFilter').addEventListener('change', function () { const chkHDFilter = context.querySelector(".chkHDFilter");
chkHDFilter.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.IsHD = this.checked ? true : null; query.IsHD = chkHDFilter.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('.chkSDFilter').addEventListener('change', function () { const chkSDFilter = context.querySelector(".chkSDFilter");
chkSDFilter.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.IsHD = this.checked ? false : null; query.IsHD = chkSDFilter.checked ? false : null;
triggerChange(self); triggerChange(this);
}); });
elems = context.querySelectorAll('.chkStatus'); for (const elem of context.querySelectorAll(".chkStatus")) {
for (i = 0, length = elems.length; i < length; i++) { elem.addEventListener("change", () => this.onStatusChange(elem));
elems[i].addEventListener('change', onStatusChange);
} }
context.querySelector('#chkTrailer').addEventListener('change', function () { const chkTrailer = context.querySelector("#chkTrailer");
chkTrailer.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.HasTrailer = this.checked ? true : null; query.HasTrailer = chkTrailer.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkThemeSong').addEventListener('change', function () { const chkThemeSong = context.querySelector("#chkThemeSong");
chkThemeSong.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.HasThemeSong = this.checked ? true : null; query.HasThemeSong = chkThemeSong.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkSpecialFeature').addEventListener('change', function () { const chkSpecialFeature = context.querySelector("#chkSpecialFeature");
chkSpecialFeature.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.HasSpecialFeature = this.checked ? true : null; query.HasSpecialFeature = chkSpecialFeature.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkThemeVideo').addEventListener('change', function () { const chkThemeVideo = context.querySelector("#chkThemeVideo");
chkThemeVideo.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.HasThemeVideo = this.checked ? true : null; query.HasThemeVideo = chkThemeVideo.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkMissingEpisode').addEventListener('change', function () { const chkMissingEpisode = context.querySelector("#chkMissingEpisode");
chkMissingEpisode.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.IsMissing = this.checked ? true : false; query.IsMissing = !!chkMissingEpisode.checked;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkSpecialEpisode').addEventListener('change', function () { const chkSpecialEpisode = context.querySelector("#chkSpecialEpisode");
chkSpecialEpisode.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.ParentIndexNumber = this.checked ? 0 : null; query.ParentIndexNumber = chkSpecialEpisode.checked ? 0 : null;
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkFutureEpisode').addEventListener('change', function () { const chkFutureEpisode = context.querySelector("#chkFutureEpisode");
chkFutureEpisode.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
if (this.checked) { if (chkFutureEpisode.checked) {
query.IsUnaired = true; query.IsUnaired = true;
query.IsVirtualUnaired = null; query.IsVirtualUnaired = null;
} else { } else {
query.IsUnaired = null; query.IsUnaired = null;
query.IsVirtualUnaired = false; query.IsVirtualUnaired = false;
} }
triggerChange(self); triggerChange(this);
}); });
context.querySelector('#chkSubtitle').addEventListener('change', function () { const chkSubtitle = context.querySelector("#chkSubtitle");
chkSubtitle.addEventListener("change", () => {
query.StartIndex = 0; query.StartIndex = 0;
query.HasSubtitles = this.checked ? true : null; query.HasSubtitles = chkSubtitle.checked ? true : null;
triggerChange(self); triggerChange(this);
}); });
context.addEventListener('change', function (e) { context.addEventListener("change", () => {
var chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter'); const chkGenreFilter = dom.parentWithClass(context, "chkGenreFilter");
if (chkGenreFilter) { if (chkGenreFilter) {
var filterName = chkGenreFilter.getAttribute('data-filter'); const filterName = chkGenreFilter.getAttribute("data-filter");
var filters = query.Genres || ''; let filters = query.Genres || "";
var delimiter = '|'; const delimiter = "|";
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1); filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
if (chkGenreFilter.checked) { if (chkGenreFilter.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName; filters = filters ? (filters + delimiter + filterName) : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.Genres = filters; query.Genres = filters;
triggerChange(self); triggerChange(this);
return; return;
} }
var chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter'); const chkTagFilter = dom.parentWithClass(context, "chkTagFilter");
if (chkTagFilter) { if (chkTagFilter) {
var filterName = chkTagFilter.getAttribute('data-filter'); const filterName = chkTagFilter.getAttribute("data-filter");
var filters = query.Tags || ''; let filters = query.Tags || "";
var delimiter = '|'; const delimiter = "|";
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1); filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
if (chkTagFilter.checked) { if (chkTagFilter.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName; filters = filters ? (filters + delimiter + filterName) : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.Tags = filters; query.Tags = filters;
triggerChange(self); triggerChange(this);
return; return;
} }
var chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter'); const chkYearFilter = dom.parentWithClass(context, "chkYearFilter");
if (chkYearFilter) { if (chkYearFilter) {
var filterName = chkYearFilter.getAttribute('data-filter'); const filterName = chkYearFilter.getAttribute("data-filter");
var filters = query.Years || ''; let filters = query.Years || "";
var delimiter = ','; const delimiter = ",";
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1); filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
if (chkYearFilter.checked) { if (chkYearFilter.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName; filters = filters ? (filters + delimiter + filterName) : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.Years = filters; query.Years = filters;
triggerChange(self); triggerChange(this);
return; return;
} }
var chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter'); const chkOfficialRatingFilter = dom.parentWithClass(context, "chkOfficialRatingFilter");
if (chkOfficialRatingFilter) { if (chkOfficialRatingFilter) {
var filterName = chkOfficialRatingFilter.getAttribute('data-filter'); const filterName = chkOfficialRatingFilter.getAttribute("data-filter");
var filters = query.OfficialRatings || ''; let filters = query.OfficialRatings || "";
var delimiter = '|'; const delimiter = "|";
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1); filters = (delimiter + filters).replace(delimiter + filterName, "").substring(1);
if (chkOfficialRatingFilter.checked) { if (chkOfficialRatingFilter.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName; filters = filters ? (filters + delimiter + filterName) : filterName;
} }
query.StartIndex = 0; query.StartIndex = 0;
query.OfficialRatings = filters; query.OfficialRatings = filters;
triggerChange(self); triggerChange(this);
return;
} }
}); });
} }
var self = this; show() {
return import("text!./filterdialog.template.html").then((template) => {
self.show = function () { return new Promise((resolve) => {
return new Promise(function (resolve, reject) { const dlg = dialogHelper.createDialog({
require(['text!./filterdialog.template.html'], function (template) {
var dlg = dialogHelper.createDialog({
removeOnClose: true, removeOnClose: true,
modal: false modal: false
}); });
dlg.classList.add('ui-body-a'); dlg.classList.add("ui-body-a");
dlg.classList.add('background-theme-a'); dlg.classList.add("background-theme-a");
dlg.classList.add('formDialog'); dlg.classList.add("formDialog");
dlg.classList.add('filterDialog'); dlg.classList.add("filterDialog");
dlg.innerHTML = globalize.translateDocument(template); dlg.innerHTML = globalize.translateDocument(template);
setVisibility(dlg, options); setVisibility(dlg, this.options);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.addEventListener('close', resolve); dlg.addEventListener("close", resolve);
updateFilterControls(dlg, options); updateFilterControls(dlg, this.options);
bindEvents(dlg); this.bindEvents(dlg);
if (enableDynamicFilters(options.mode)) { if (enableDynamicFilters(this.options.mode)) {
dlg.classList.add('dynamicFilterDialog'); dlg.classList.add("dynamicFilterDialog");
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(this.options.serverId);
loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), options.query); loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
} }
}); });
}); });
}; }
}; }
});
/* eslint-enable indent */
export default FilterDialog;

View File

@ -1,5 +1,5 @@
define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) { define(["cardBuilder", "imageLoader", "libraryBrowser", "loading", "events", "userSettings", "emby-itemscontainer"], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData() { function getPageData() {
@ -7,7 +7,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
pageData = { pageData = {
query: { query: {
StartIndex: 0, StartIndex: 0,
Fields: 'PrimaryImageAspectRatio' Fields: "PrimaryImageAspectRatio"
} }
}; };
} }
@ -26,7 +26,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
function getChannelsHtml(channels) { function getChannelsHtml(channels) {
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: channels, items: channels,
shape: 'square', shape: "square",
showTitle: true, showTitle: true,
lazy: true, lazy: true,
cardLayout: true, cardLayout: true,
@ -60,7 +60,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
} }
var query = getQuery(); var query = getQuery();
context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({ context.querySelector(".paging").innerHTML = libraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex, startIndex: query.StartIndex,
limit: query.Limit, limit: query.Limit,
totalRecordCount: result.TotalRecordCount, totalRecordCount: result.TotalRecordCount,
@ -69,30 +69,30 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
filterButton: false filterButton: false
}); });
var html = getChannelsHtml(result.Items); var html = getChannelsHtml(result.Items);
var elem = context.querySelector('#items'); var elem = context.querySelector("#items");
elem.innerHTML = html; elem.innerHTML = html;
imageLoader.lazyChildren(elem); imageLoader.lazyChildren(elem);
var i; var i;
var length; var length;
var elems; var elems;
for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) { for (elems = context.querySelectorAll(".btnNextPage"), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) { for (elems = context.querySelectorAll(".btnPreviousPage"), i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
} }
function showFilterMenu(context) { function showFilterMenu(context) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(), query: getQuery(),
mode: 'livetvchannels', mode: "livetvchannels",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
reloadItems(context); reloadItems(context);
}); });
filterDialog.show(); filterDialog.show();
@ -110,7 +110,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(view); autoFocuser.autoFocus(view);
}); });
}); });
@ -119,7 +119,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
var pageData; var pageData;
var self = this; var self = this;
var isLoading = false; var isLoading = false;
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
showFilterMenu(tabContent); showFilterMenu(tabContent);
}); });

View File

@ -1,5 +1,5 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData(context) { function getPageData(context) {
@ -9,16 +9,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
query: { query: {
SortBy: 'SortName', SortBy: "SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
IncludeItemTypes: 'Trailer', IncludeItemTypes: "Trailer",
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo', Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb', EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
StartIndex: 0 StartIndex: 0
}, },
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || "Poster"
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
@ -37,7 +37,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
function getSavedQueryKey(context) { function getSavedQueryKey(context) {
if (!context.savedQueryKey) { if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey('trailers'); context.savedQueryKey = libraryBrowser.getSavedQueryKey("trailers");
} }
return context.savedQueryKey; return context.savedQueryKey;
@ -85,43 +85,43 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
var html; var html;
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
if (viewStyle == 'Thumb') { if (viewStyle == "Thumb") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'movies', context: "movies",
overlayPlayButton: true overlayPlayButton: true
}); });
} else if (viewStyle == 'ThumbCard') { } else if (viewStyle == "ThumbCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'movies', context: "movies",
cardLayout: true, cardLayout: true,
showTitle: true, showTitle: true,
showYear: true, showYear: true,
centerText: true centerText: true
}); });
} else if (viewStyle == 'Banner') { } else if (viewStyle == "Banner") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'banner', shape: "banner",
preferBanner: true, preferBanner: true,
context: 'movies' context: "movies"
}); });
} else if (viewStyle == 'List') { } else if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
context: 'movies', context: "movies",
sortBy: query.SortBy sortBy: query.SortBy
}); });
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == "PosterCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'portrait', shape: "portrait",
context: 'movies', context: "movies",
showTitle: true, showTitle: true,
showYear: true, showYear: true,
cardLayout: true, cardLayout: true,
@ -130,8 +130,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
} else { } else {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'portrait', shape: "portrait",
context: 'movies', context: "movies",
centerText: true, centerText: true,
overlayPlayButton: true, overlayPlayButton: true,
showTitle: true, showTitle: true,
@ -141,27 +141,27 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
var i; var i;
var length; var length;
var elems = tabContent.querySelectorAll('.paging'); var elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
if (!result.Items.length) { if (!result.Items.length) {
html = '<p style="text-align:center;">' + globalize.translate('MessageNoTrailersFound') + '</p>'; html = '<p style="text-align:center;">' + Globalize.translate("MessageNoTrailersFound") + "</p>";
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query); libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query);
@ -180,13 +180,13 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: 'movies', mode: "movies",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
reloadItems(); reloadItems();
}); });
@ -199,9 +199,9 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}; };
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
var query = getQuery(tabContent); var query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
@ -210,39 +210,39 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new alphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: "click"
}); });
tabContent.querySelector('.alphaPicker').classList.add('alphabetPicker-right'); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
alphaPickerElement.classList.add('alphaPicker-fixed-right'); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add("padded-right-withalphapicker");
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
name: globalize.translate('OptionNameSort'), name: Globalize.translate("OptionNameSort"),
id: 'SortName' id: "SortName"
}, { }, {
name: globalize.translate('OptionImdbRating'), name: Globalize.translate("OptionImdbRating"),
id: 'CommunityRating,SortName' id: "CommunityRating,SortName"
}, { }, {
name: globalize.translate('OptionDateAdded'), name: Globalize.translate("OptionDateAdded"),
id: 'DateCreated,SortName' id: "DateCreated,SortName"
}, { }, {
name: globalize.translate('OptionDatePlayed'), name: Globalize.translate("OptionDatePlayed"),
id: 'DatePlayed,SortName' id: "DatePlayed,SortName"
}, { }, {
name: globalize.translate('OptionParentalRating'), name: Globalize.translate("OptionParentalRating"),
id: 'OfficialRating,SortName' id: "OfficialRating,SortName"
}, { }, {
name: globalize.translate('OptionPlayCount'), name: Globalize.translate("OptionPlayCount"),
id: 'PlayCount,SortName' id: "PlayCount,SortName"
}, { }, {
name: globalize.translate('OptionReleaseDate'), name: Globalize.translate("OptionReleaseDate"),
id: 'PremiereDate,SortName' id: "PremiereDate,SortName"
}], }],
callback: function () { callback: function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;

View File

@ -1,5 +1,5 @@
define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function playAll() { function playAll() {
@ -23,16 +23,16 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
if (!pageData) { if (!pageData) {
pageData = { pageData = {
query: { query: {
SortBy: 'SortName', SortBy: "SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
IncludeItemTypes: 'MusicAlbum', IncludeItemTypes: "MusicAlbum",
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo', Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb', EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
StartIndex: 0 StartIndex: 0
}, },
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || "Poster"
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
@ -52,7 +52,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
function getSavedQueryKey() { function getSavedQueryKey() {
if (!savedQueryKey) { if (!savedQueryKey) {
savedQueryKey = libraryBrowser.getSavedQueryKey('musicalbums'); savedQueryKey = libraryBrowser.getSavedQueryKey("musicalbums");
} }
return savedQueryKey; return savedQueryKey;
@ -60,17 +60,17 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
function onViewStyleChange() { function onViewStyleChange() {
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
if ('List' == viewStyle) { if ("List" == viewStyle) {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add("vertical-list");
itemsContainer.classList.remove('vertical-wrap'); itemsContainer.classList.remove("vertical-wrap");
} else { } else {
itemsContainer.classList.remove('vertical-list'); itemsContainer.classList.remove("vertical-list");
itemsContainer.classList.add('vertical-wrap'); itemsContainer.classList.add("vertical-wrap");
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = "";
} }
function reloadItems(page) { function reloadItems(page) {
@ -114,18 +114,18 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
filterButton: false filterButton: false
}); });
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
if (viewStyle == 'List') { if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
context: 'music', context: "music",
sortBy: query.SortBy, sortBy: query.SortBy,
addToListButton: true addToListButton: true
}); });
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == "PosterCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'square', shape: "square",
context: 'music', context: "music",
showTitle: true, showTitle: true,
coverImage: true, coverImage: true,
showParentTitle: true, showParentTitle: true,
@ -135,8 +135,8 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
} else { } else {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'square', shape: "square",
context: 'music', context: "music",
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
lazy: true, lazy: true,
@ -146,30 +146,30 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
} }
var i; var i;
var length; var length;
var elems = tabContent.querySelectorAll('.paging'); var elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(), query); libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(tabContent); autoFocuser.autoFocus(tabContent);
}); });
}); });
@ -186,13 +186,13 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(), query: getQuery(),
mode: 'albums', mode: "albums",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
getQuery().StartIndex = 0; getQuery().StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
@ -205,10 +205,10 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
}; };
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
var query = getQuery(); var query = getQuery();
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
@ -217,39 +217,39 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new alphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: "click"
}); });
tabContent.querySelector('.alphaPicker').classList.add('alphabetPicker-right'); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
alphaPickerElement.classList.add('alphaPicker-fixed-right'); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add("padded-right-withalphapicker");
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
name: globalize.translate('OptionNameSort'), name: Globalize.translate("OptionNameSort"),
id: 'SortName' id: "SortName"
}, { }, {
name: globalize.translate('OptionAlbumArtist'), name: Globalize.translate("OptionAlbumArtist"),
id: 'AlbumArtist,SortName' id: "AlbumArtist,SortName"
}, { }, {
name: globalize.translate('OptionCommunityRating'), name: Globalize.translate("OptionCommunityRating"),
id: 'CommunityRating,SortName' id: "CommunityRating,SortName"
}, { }, {
name: globalize.translate('OptionCriticRating'), name: Globalize.translate("OptionCriticRating"),
id: 'CriticRating,SortName' id: "CriticRating,SortName"
}, { }, {
name: globalize.translate('OptionDateAdded'), name: Globalize.translate("OptionDateAdded"),
id: 'DateCreated,SortName' id: "DateCreated,SortName"
}, { }, {
name: globalize.translate('OptionReleaseDate'), name: Globalize.translate("OptionReleaseDate"),
id: 'ProductionYear,PremiereDate,SortName' id: "ProductionYear,PremiereDate,SortName"
}, { }, {
name: globalize.translate('OptionRandom'), name: Globalize.translate("OptionRandom"),
id: 'Random,SortName' id: "Random,SortName"
}], }],
callback: function () { callback: function () {
getQuery().StartIndex = 0; getQuery().StartIndex = 0;
@ -259,11 +259,11 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
button: e.target button: e.target
}); });
}); });
var btnSelectView = tabContent.querySelector('.btnSelectView'); var btnSelectView = tabContent.querySelector(".btnSelectView");
btnSelectView.addEventListener('click', function (e) { btnSelectView.addEventListener("click", function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), "List,Poster,PosterCard".split(","));
}); });
btnSelectView.addEventListener('layoutchange', function (e) { btnSelectView.addEventListener("layoutchange", function (e) {
var viewStyle = e.detail.viewStyle; var viewStyle = e.detail.viewStyle;
getPageData().view = viewStyle; getPageData().view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
@ -271,8 +271,8 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
onViewStyleChange(); onViewStyleChange();
reloadItems(tabContent); reloadItems(tabContent);
}); });
tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll); tabContent.querySelector(".btnPlayAll").addEventListener("click", playAll);
tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle); tabContent.querySelector(".btnShuffle").addEventListener("click", shuffle);
} }
initPage(tabContent); initPage(tabContent);

View File

@ -1,5 +1,5 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) { define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "apphost", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData(context) { function getPageData(context) {
@ -8,13 +8,13 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
if (!pageData) { if (!pageData) {
var queryValues = { var queryValues = {
SortBy: 'SortName', SortBy: "SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo', Fields: "PrimaryImageAspectRatio,SortName,BasicSyncInfo",
StartIndex: 0, StartIndex: 0,
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb' EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
@ -23,7 +23,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
pageData = data[key] = { pageData = data[key] = {
query: queryValues, query: queryValues,
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || "Poster"
}; };
pageData.query.ParentId = params.topParentId; pageData.query.ParentId = params.topParentId;
libraryBrowser.loadSavedQueryValues(key, pageData.query); libraryBrowser.loadSavedQueryValues(key, pageData.query);
@ -46,17 +46,17 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
function onViewStyleChange() { function onViewStyleChange() {
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
if ('List' == viewStyle) { if ("List" == viewStyle) {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add("vertical-list");
itemsContainer.classList.remove('vertical-wrap'); itemsContainer.classList.remove("vertical-wrap");
} else { } else {
itemsContainer.classList.remove('vertical-list'); itemsContainer.classList.remove("vertical-list");
itemsContainer.classList.add('vertical-wrap'); itemsContainer.classList.add("vertical-wrap");
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = "";
} }
function reloadItems(page) { function reloadItems(page) {
@ -103,16 +103,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
filterButton: false filterButton: false
}); });
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
if (viewStyle == 'List') { if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
sortBy: query.SortBy sortBy: query.SortBy
}); });
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == "PosterCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'square', shape: "square",
context: 'music', context: "music",
showTitle: true, showTitle: true,
coverImage: true, coverImage: true,
cardLayout: true cardLayout: true
@ -120,8 +120,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
} else { } else {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'square', shape: "square",
context: 'music', context: "music",
showTitle: true, showTitle: true,
coverImage: true, coverImage: true,
lazy: true, lazy: true,
@ -131,30 +131,30 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
} }
var i; var i;
var length; var length;
var elems = tabContent.querySelectorAll('.paging'); var elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(tabContent); autoFocuser.autoFocus(tabContent);
}); });
}); });
@ -170,13 +170,13 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: self.mode, mode: self.mode,
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
@ -189,10 +189,10 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}; };
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
var query = getQuery(tabContent); var query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
@ -201,21 +201,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new alphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: "click"
}); });
tabContent.querySelector('.alphaPicker').classList.add('alphabetPicker-right'); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
alphaPickerElement.classList.add('alphaPicker-fixed-right'); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add("padded-right-withalphapicker");
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
var btnSelectView = tabContent.querySelector('.btnSelectView'); var btnSelectView = tabContent.querySelector(".btnSelectView");
btnSelectView.addEventListener('click', function (e) { btnSelectView.addEventListener("click", function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), "List,Poster,PosterCard".split(","));
}); });
btnSelectView.addEventListener('layoutchange', function (e) { btnSelectView.addEventListener("layoutchange", function (e) {
var viewStyle = e.detail.viewStyle; var viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle; getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);

View File

@ -1,5 +1,5 @@
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userSettings', 'globalize', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) { define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "userSettings", "emby-itemscontainer"], function (events, libraryBrowser, imageLoader, listView, loading, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData(context) { function getPageData(context) {
@ -9,14 +9,14 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
query: { query: {
SortBy: 'Album,SortName', SortBy: "Album,SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
IncludeItemTypes: 'Audio', IncludeItemTypes: "Audio",
Recursive: true, Recursive: true,
Fields: 'AudioInfo,ParentId', Fields: "AudioInfo,ParentId",
StartIndex: 0, StartIndex: 0,
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary' EnableImageTypes: "Primary"
} }
}; };
@ -37,7 +37,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
function getSavedQueryKey(context) { function getSavedQueryKey(context) {
if (!context.savedQueryKey) { if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey('songs'); context.savedQueryKey = libraryBrowser.getSavedQueryKey("songs");
} }
return context.savedQueryKey; return context.savedQueryKey;
@ -85,35 +85,35 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
}); });
var html = listView.getListViewHtml({ var html = listView.getListViewHtml({
items: result.Items, items: result.Items,
action: 'playallfromhere', action: "playallfromhere",
smallIcon: true, smallIcon: true,
artist: true, artist: true,
addToListButton: true addToListButton: true
}); });
var elems = tabContent.querySelectorAll('.paging'); var elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
}); });
@ -124,13 +124,13 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: 'songs', mode: "songs",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
@ -143,38 +143,38 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
}; };
function initPage(tabContent) { function initPage(tabContent) {
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
name: globalize.translate('OptionTrackName'), name: Globalize.translate("OptionTrackName"),
id: 'Name' id: "Name"
}, { }, {
name: globalize.translate('OptionAlbum'), name: Globalize.translate("OptionAlbum"),
id: 'Album,SortName' id: "Album,SortName"
}, { }, {
name: globalize.translate('OptionAlbumArtist'), name: Globalize.translate("OptionAlbumArtist"),
id: 'AlbumArtist,Album,SortName' id: "AlbumArtist,Album,SortName"
}, { }, {
name: globalize.translate('OptionArtist'), name: Globalize.translate("OptionArtist"),
id: 'Artist,Album,SortName' id: "Artist,Album,SortName"
}, { }, {
name: globalize.translate('OptionDateAdded'), name: Globalize.translate("OptionDateAdded"),
id: 'DateCreated,SortName' id: "DateCreated,SortName"
}, { }, {
name: globalize.translate('OptionDatePlayed'), name: Globalize.translate("OptionDatePlayed"),
id: 'DatePlayed,SortName' id: "DatePlayed,SortName"
}, { }, {
name: globalize.translate('OptionPlayCount'), name: Globalize.translate("OptionPlayCount"),
id: 'PlayCount,SortName' id: "PlayCount,SortName"
}, { }, {
name: globalize.translate('OptionReleaseDate'), name: Globalize.translate("OptionReleaseDate"),
id: 'PremiereDate,AlbumArtist,Album,SortName' id: "PremiereDate,AlbumArtist,Album,SortName"
}, { }, {
name: globalize.translate('OptionRuntime'), name: Globalize.translate("OptionRuntime"),
id: 'Runtime,AlbumArtist,Album,SortName' id: "Runtime,AlbumArtist,Album,SortName"
}], }],
callback: function () { callback: function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;

View File

@ -1,5 +1,5 @@
define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) { define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData(context) { function getPageData(context) {
@ -9,17 +9,17 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
query: { query: {
SortBy: 'SeriesSortName,SortName', SortBy: "SeriesSortName,SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
IncludeItemTypes: 'Episode', IncludeItemTypes: "Episode",
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,UserData', Fields: "PrimaryImageAspectRatio,MediaSourceCount,UserData",
IsMissing: false, IsMissing: false,
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Thumb', EnableImageTypes: "Primary,Backdrop,Thumb",
StartIndex: 0 StartIndex: 0
}, },
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || "Poster"
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
@ -39,7 +39,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
function getSavedQueryKey(context) { function getSavedQueryKey(context) {
if (!context.savedQueryKey) { if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey('episodes'); context.savedQueryKey = libraryBrowser.getSavedQueryKey("episodes");
} }
return context.savedQueryKey; return context.savedQueryKey;
@ -47,17 +47,17 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
function onViewStyleChange() { function onViewStyleChange() {
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
if ('List' == viewStyle) { if ("List" == viewStyle) {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add("vertical-list");
itemsContainer.classList.remove('vertical-wrap'); itemsContainer.classList.remove("vertical-wrap");
} else { } else {
itemsContainer.classList.remove('vertical-list'); itemsContainer.classList.remove("vertical-list");
itemsContainer.classList.add('vertical-wrap'); itemsContainer.classList.add("vertical-wrap");
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = "";
} }
function reloadItems(page) { function reloadItems(page) {
@ -100,17 +100,17 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
filterButton: false filterButton: false
}); });
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
if (viewStyle == 'List') { if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
sortBy: query.SortBy, sortBy: query.SortBy,
showParentTitle: true showParentTitle: true
}); });
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == "PosterCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
scalable: true, scalable: true,
@ -119,7 +119,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
} else { } else {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
overlayText: false, overlayText: false,
@ -132,19 +132,19 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
var length; var length;
var elems; var elems;
elems = tabContent.querySelectorAll('.paging'); elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
@ -153,7 +153,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
}); });
@ -164,13 +164,13 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: 'episodes', mode: "episodes",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
reloadItems(tabContent); reloadItems(tabContent);
}); });
filterDialog.show(); filterDialog.show();
@ -182,35 +182,35 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
}; };
function initPage(tabContent) { function initPage(tabContent) {
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
name: globalize.translate('OptionNameSort'), name: Globalize.translate("OptionNameSort"),
id: 'SeriesSortName,SortName' id: "SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionTvdbRating'), name: Globalize.translate("OptionTvdbRating"),
id: 'CommunityRating,SeriesSortName,SortName' id: "CommunityRating,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionDateAdded'), name: Globalize.translate("OptionDateAdded"),
id: 'DateCreated,SeriesSortName,SortName' id: "DateCreated,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionPremiereDate'), name: Globalize.translate("OptionPremiereDate"),
id: 'PremiereDate,SeriesSortName,SortName' id: "PremiereDate,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionDatePlayed'), name: Globalize.translate("OptionDatePlayed"),
id: 'DatePlayed,SeriesSortName,SortName' id: "DatePlayed,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionParentalRating'), name: Globalize.translate("OptionParentalRating"),
id: 'OfficialRating,SeriesSortName,SortName' id: "OfficialRating,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionPlayCount'), name: Globalize.translate("OptionPlayCount"),
id: 'PlayCount,SeriesSortName,SortName' id: "PlayCount,SeriesSortName,SortName"
}, { }, {
name: globalize.translate('OptionRuntime'), name: Globalize.translate("OptionRuntime"),
id: 'Runtime,SeriesSortName,SortName' id: "Runtime,SeriesSortName,SortName"
}], }],
callback: function () { callback: function () {
reloadItems(tabContent); reloadItems(tabContent);
@ -219,11 +219,11 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
button: e.target button: e.target
}); });
}); });
var btnSelectView = tabContent.querySelector('.btnSelectView'); var btnSelectView = tabContent.querySelector(".btnSelectView");
btnSelectView.addEventListener('click', function (e) { btnSelectView.addEventListener("click", function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), "List,Poster,PosterCard".split(","));
}); });
btnSelectView.addEventListener('layoutchange', function (e) { btnSelectView.addEventListener("layoutchange", function (e) {
var viewStyle = e.detail.viewStyle; var viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle; getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);

View File

@ -1,5 +1,5 @@
define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) { define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "alphaPicker", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings) {
'use strict'; "use strict";
return function (view, params, tabContent) { return function (view, params, tabContent) {
function getPageData(context) { function getPageData(context) {
@ -9,16 +9,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
if (!pageData) { if (!pageData) {
pageData = data[key] = { pageData = data[key] = {
query: { query: {
SortBy: 'SortName', SortBy: "SortName",
SortOrder: 'Ascending', SortOrder: "Ascending",
IncludeItemTypes: 'Series', IncludeItemTypes: "Series",
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
ImageTypeLimit: 1, ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb', EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
StartIndex: 0 StartIndex: 0
}, },
view: libraryBrowser.getSavedView(key) || 'Poster' view: libraryBrowser.getSavedView(key) || "Poster"
}; };
if (userSettings.libraryPageSize() > 0) { if (userSettings.libraryPageSize() > 0) {
@ -38,7 +38,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
function getSavedQueryKey(context) { function getSavedQueryKey(context) {
if (!context.savedQueryKey) { if (!context.savedQueryKey) {
context.savedQueryKey = libraryBrowser.getSavedQueryKey('series'); context.savedQueryKey = libraryBrowser.getSavedQueryKey("series");
} }
return context.savedQueryKey; return context.savedQueryKey;
@ -46,17 +46,17 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
function onViewStyleChange() { function onViewStyleChange() {
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
if ('List' == viewStyle) { if ("List" == viewStyle) {
itemsContainer.classList.add('vertical-list'); itemsContainer.classList.add("vertical-list");
itemsContainer.classList.remove('vertical-wrap'); itemsContainer.classList.remove("vertical-wrap");
} else { } else {
itemsContainer.classList.remove('vertical-list'); itemsContainer.classList.remove("vertical-list");
itemsContainer.classList.add('vertical-wrap'); itemsContainer.classList.add("vertical-wrap");
} }
itemsContainer.innerHTML = ''; itemsContainer.innerHTML = "";
} }
function reloadItems(page) { function reloadItems(page) {
@ -100,45 +100,45 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
filterButton: false filterButton: false
}); });
var viewStyle = self.getCurrentViewStyle(); var viewStyle = self.getCurrentViewStyle();
if (viewStyle == 'Thumb') { if (viewStyle == "Thumb") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'tvshows', context: "tvshows",
overlayMoreButton: true, overlayMoreButton: true,
showTitle: true, showTitle: true,
centerText: true centerText: true
}); });
} else if (viewStyle == 'ThumbCard') { } else if (viewStyle == "ThumbCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'backdrop', shape: "backdrop",
preferThumb: true, preferThumb: true,
context: 'tvshows', context: "tvshows",
cardLayout: true, cardLayout: true,
showTitle: true, showTitle: true,
showYear: true, showYear: true,
centerText: true centerText: true
}); });
} else if (viewStyle == 'Banner') { } else if (viewStyle == "Banner") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'banner', shape: "banner",
preferBanner: true, preferBanner: true,
context: 'tvshows' context: "tvshows"
}); });
} else if (viewStyle == 'List') { } else if (viewStyle == "List") {
html = listView.getListViewHtml({ html = listView.getListViewHtml({
items: result.Items, items: result.Items,
context: 'tvshows', context: "tvshows",
sortBy: query.SortBy sortBy: query.SortBy
}); });
} else if (viewStyle == 'PosterCard') { } else if (viewStyle == "PosterCard") {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'portrait', shape: "portrait",
context: 'tvshows', context: "tvshows",
showTitle: true, showTitle: true,
showYear: true, showYear: true,
centerText: true, centerText: true,
@ -147,8 +147,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
} else { } else {
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'portrait', shape: "portrait",
context: 'tvshows', context: "tvshows",
centerText: true, centerText: true,
lazy: true, lazy: true,
overlayMoreButton: true, overlayMoreButton: true,
@ -158,30 +158,30 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
} }
var i; var i;
var length; var length;
var elems = tabContent.querySelectorAll('.paging'); var elems = tabContent.querySelectorAll(".paging");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml; elems[i].innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll(".btnNextPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onNextPageClick); elems[i].addEventListener("click", onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll(".btnPreviousPage");
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener('click', onPreviousPageClick); elems[i].addEventListener("click", onPreviousPageClick);
} }
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer); imageLoader.lazyChildren(itemsContainer);
libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
loading.hide(); loading.hide();
isLoading = false; isLoading = false;
require(['autoFocuser'], function (autoFocuser) { require(["autoFocuser"], function (autoFocuser) {
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
}); });
@ -197,13 +197,13 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
var isLoading = false; var isLoading = false;
self.showFilterMenu = function () { self.showFilterMenu = function () {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { require(["components/filterdialog/filterdialog"], function ({default: filterDialogFactory}) {
var filterDialog = new filterDialogFactory({ var filterDialog = new filterDialogFactory({
query: getQuery(tabContent), query: getQuery(tabContent),
mode: 'series', mode: "series",
serverId: ApiClient.serverId() serverId: ApiClient.serverId()
}); });
events.on(filterDialog, 'filterchange', function () { events.on(filterDialog, "filterchange", function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
@ -216,10 +216,10 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}; };
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector('.alphaPicker'); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector('.itemsContainer'); var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener('alphavaluechanged', function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
var query = getQuery(tabContent); var query = getQuery(tabContent);
query.NameStartsWithOrGreater = newValue; query.NameStartsWithOrGreater = newValue;
@ -228,36 +228,36 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
}); });
self.alphaPicker = new alphaPicker({ self.alphaPicker = new alphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: "click"
}); });
tabContent.querySelector('.alphaPicker').classList.add('alphabetPicker-right'); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
alphaPickerElement.classList.add('alphaPicker-fixed-right'); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.add('padded-right-withalphapicker'); itemsContainer.classList.add("padded-right-withalphapicker");
tabContent.querySelector('.btnFilter').addEventListener('click', function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
name: globalize.translate('OptionNameSort'), name: Globalize.translate("OptionNameSort"),
id: 'SortName' id: "SortName"
}, { }, {
name: globalize.translate('OptionImdbRating'), name: Globalize.translate("OptionImdbRating"),
id: 'CommunityRating,SortName' id: "CommunityRating,SortName"
}, { }, {
name: globalize.translate('OptionDateAdded'), name: Globalize.translate("OptionDateAdded"),
id: 'DateCreated,SortName' id: "DateCreated,SortName"
}, { }, {
name: globalize.translate('OptionDatePlayed'), name: Globalize.translate("OptionDatePlayed"),
id: 'DatePlayed,SortName' id: "DatePlayed,SortName"
}, { }, {
name: globalize.translate('OptionParentalRating'), name: Globalize.translate("OptionParentalRating"),
id: 'OfficialRating,SortName' id: "OfficialRating,SortName"
}, { }, {
name: globalize.translate('OptionReleaseDate'), name: Globalize.translate("OptionReleaseDate"),
id: 'PremiereDate,SortName' id: "PremiereDate,SortName"
}], }],
callback: function () { callback: function () {
getQuery(tabContent).StartIndex = 0; getQuery(tabContent).StartIndex = 0;
@ -267,11 +267,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
button: e.target button: e.target
}); });
}); });
var btnSelectView = tabContent.querySelector('.btnSelectView'); var btnSelectView = tabContent.querySelector(".btnSelectView");
btnSelectView.addEventListener('click', function (e) { btnSelectView.addEventListener("click", function (e) {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), "Banner,List,Poster,PosterCard,Thumb,ThumbCard".split(","));
}); });
btnSelectView.addEventListener('layoutchange', function (e) { btnSelectView.addEventListener("layoutchange", function (e) {
var viewStyle = e.detail.viewStyle; var viewStyle = e.detail.viewStyle;
getPageData(tabContent).view = viewStyle; getPageData(tabContent).view = viewStyle;
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);