mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
librarybrowser.js
This commit is contained in:
parent
40e4f6a27a
commit
f7c8d7b044
1 changed files with 148 additions and 50 deletions
|
@ -1,101 +1,199 @@
|
||||||
define(["userSettings"], function(userSettings) {
|
define(["userSettings"], function (userSettings) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var libraryBrowser = {
|
var libraryBrowser = {
|
||||||
getSavedQueryKey: function(modifier) {
|
getSavedQueryKey: function (modifier) {
|
||||||
return window.location.href.split("#")[0] + (modifier || "")
|
return window.location.href.split("#")[0] + (modifier || "");
|
||||||
},
|
},
|
||||||
loadSavedQueryValues: function(key, query) {
|
loadSavedQueryValues: function (key, query) {
|
||||||
var values = userSettings.get(key);
|
var values = userSettings.get(key);
|
||||||
return values ? (values = JSON.parse(values), Object.assign(query, values)) : query
|
|
||||||
|
if (values) {
|
||||||
|
values = JSON.parse(values);
|
||||||
|
return Object.assign(query, values);
|
||||||
|
}
|
||||||
|
|
||||||
|
return query;
|
||||||
},
|
},
|
||||||
saveQueryValues: function(key, query) {
|
saveQueryValues: function (key, query) {
|
||||||
var values = {};
|
var values = {};
|
||||||
query.SortBy && (values.SortBy = query.SortBy), query.SortOrder && (values.SortOrder = query.SortOrder), userSettings.set(key, JSON.stringify(values))
|
|
||||||
|
if (query.SortBy) {
|
||||||
|
values.SortBy = query.SortBy;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query.SortOrder) {
|
||||||
|
values.SortOrder = query.SortOrder;
|
||||||
|
}
|
||||||
|
|
||||||
|
userSettings.set(key, JSON.stringify(values));
|
||||||
},
|
},
|
||||||
saveViewSetting: function(key, value) {
|
saveViewSetting: function (key, value) {
|
||||||
userSettings.set(key + "-_view", value)
|
userSettings.set(key + "-_view", value);
|
||||||
},
|
},
|
||||||
getSavedView: function(key) {
|
getSavedView: function (key) {
|
||||||
return userSettings.get(key + "-_view")
|
return userSettings.get(key + "-_view");
|
||||||
},
|
},
|
||||||
showLayoutMenu: function(button, currentLayout, views) {
|
showLayoutMenu: function (button, currentLayout, views) {
|
||||||
var dispatchEvent = !0;
|
var dispatchEvent = true;
|
||||||
views || (dispatchEvent = !1, views = button.getAttribute("data-layouts"), views = views ? views.split(",") : ["List", "Poster", "PosterCard", "Thumb", "ThumbCard"]);
|
|
||||||
var menuItems = views.map(function(v) {
|
if (!views) {
|
||||||
|
dispatchEvent = false;
|
||||||
|
views = button.getAttribute("data-layouts");
|
||||||
|
views = views ? views.split(",") : ["List", "Poster", "PosterCard", "Thumb", "ThumbCard"];
|
||||||
|
}
|
||||||
|
|
||||||
|
var menuItems = views.map(function (v) {
|
||||||
return {
|
return {
|
||||||
name: Globalize.translate("Option" + v),
|
name: Globalize.translate("Option" + v),
|
||||||
id: v,
|
id: v,
|
||||||
selected: currentLayout == v
|
selected: currentLayout == v
|
||||||
}
|
};
|
||||||
});
|
});
|
||||||
require(["actionsheet"], function(actionsheet) {
|
|
||||||
|
require(["actionsheet"], function (actionsheet) {
|
||||||
actionsheet.show({
|
actionsheet.show({
|
||||||
items: menuItems,
|
items: menuItems,
|
||||||
positionTo: button,
|
positionTo: button,
|
||||||
callback: function(id) {
|
callback: function (id) {
|
||||||
button.dispatchEvent(new CustomEvent("layoutchange", {
|
button.dispatchEvent(new CustomEvent("layoutchange", {
|
||||||
detail: {
|
detail: {
|
||||||
viewStyle: id
|
viewStyle: id
|
||||||
},
|
},
|
||||||
bubbles: !0,
|
bubbles: true,
|
||||||
cancelable: !1
|
cancelable: false
|
||||||
})), dispatchEvent || window.$ && $(button).trigger("layoutchange", [id])
|
}));
|
||||||
|
|
||||||
|
if (!dispatchEvent) {
|
||||||
|
if (window.$) {
|
||||||
|
$(button).trigger("layoutchange", [id]);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getQueryPagingHtml: function(options) {
|
getQueryPagingHtml: function (options) {
|
||||||
var startIndex = options.startIndex,
|
var startIndex = options.startIndex;
|
||||||
limit = options.limit,
|
var limit = options.limit;
|
||||||
totalRecordCount = options.totalRecordCount,
|
var totalRecordCount = options.totalRecordCount;
|
||||||
html = "",
|
var html = "";
|
||||||
recordsEnd = Math.min(startIndex + limit, totalRecordCount),
|
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
|
||||||
showControls = limit < totalRecordCount;
|
var showControls = limit < totalRecordCount;
|
||||||
|
|
||||||
if (html += '<div class="listPaging">', showControls) {
|
if (html += '<div class="listPaging">', showControls) {
|
||||||
html += '<span style="vertical-align:middle;">';
|
html += '<span style="vertical-align:middle;">';
|
||||||
html += (totalRecordCount ? startIndex + 1 : 0) + "-" + recordsEnd + " of " + totalRecordCount, html += "</span>"
|
html += (totalRecordCount ? startIndex + 1 : 0) + "-" + recordsEnd + " of " + totalRecordCount;
|
||||||
|
html += "</span>";
|
||||||
}
|
}
|
||||||
return (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) && (html += '<div style="display:inline-block;">', showControls && (html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="md-icon"></i></button>', html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="md-icon"></i></button>'), options.addLayoutButton && (html += '<button is="paper-icon-button-light" title="' + Globalize.translate("ButtonSelectView") + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || "") + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || "") + '\');"><i class="md-icon"></i></button>'), options.sortButton && (html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="md-icon"></i></button>'), options.filterButton && (html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="md-icon"></i></button>'), html += "</div>"), html += "</div>"
|
|
||||||
|
if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
|
||||||
|
html += '<div style="display:inline-block;">';
|
||||||
|
|
||||||
|
if (showControls) {
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnPreviousPage autoSize" ' + (startIndex ? "" : "disabled") + '><i class="md-icon"></i></button>';
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnNextPage autoSize" ' + (startIndex + limit >= totalRecordCount ? "disabled" : "") + '><i class="md-icon"></i></button>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.addLayoutButton) {
|
||||||
|
html += '<button is="paper-icon-button-light" title="' + Globalize.translate("ButtonSelectView") + '" class="btnChangeLayout autoSize" data-layouts="' + (options.layouts || "") + '" onclick="LibraryBrowser.showLayoutMenu(this, \'' + (options.currentLayout || "") + '\');"><i class="md-icon"></i></button>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.sortButton) {
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnSort autoSize" title="' + Globalize.translate("ButtonSort") + '"><i class="md-icon"></i></button>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.filterButton) {
|
||||||
|
html += '<button is="paper-icon-button-light" class="btnFilter autoSize" title="' + Globalize.translate("ButtonFilter") + '"><i class="md-icon"></i></button>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
return html += "</div>";
|
||||||
},
|
},
|
||||||
showSortMenu: function(options) {
|
showSortMenu: function (options) {
|
||||||
require(["dialogHelper", "emby-radio"], function(dialogHelper) {
|
require(["dialogHelper", "emby-radio"], function (dialogHelper) {
|
||||||
function onSortByChange() {
|
function onSortByChange() {
|
||||||
var newValue = this.value;
|
var newValue = this.value;
|
||||||
|
|
||||||
if (this.checked) {
|
if (this.checked) {
|
||||||
var changed = options.query.SortBy != newValue;
|
var changed = options.query.SortBy != newValue;
|
||||||
options.query.SortBy = newValue.replace("_", ","), options.query.StartIndex = 0, options.callback && changed && options.callback()
|
options.query.SortBy = newValue.replace("_", ",");
|
||||||
|
options.query.StartIndex = 0;
|
||||||
|
|
||||||
|
if (options.callback && changed) {
|
||||||
|
options.callback();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSortOrderChange() {
|
function onSortOrderChange() {
|
||||||
var newValue = this.value;
|
var newValue = this.value;
|
||||||
|
|
||||||
if (this.checked) {
|
if (this.checked) {
|
||||||
var changed = options.query.SortOrder != newValue;
|
var changed = options.query.SortOrder != newValue;
|
||||||
options.query.SortOrder = newValue, options.query.StartIndex = 0, options.callback && changed && options.callback()
|
options.query.SortOrder = newValue;
|
||||||
|
options.query.StartIndex = 0;
|
||||||
|
|
||||||
|
if (options.callback && changed) {
|
||||||
|
options.callback();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var dlg = dialogHelper.createDialog({
|
var dlg = dialogHelper.createDialog({
|
||||||
removeOnClose: !0,
|
removeOnClose: true,
|
||||||
modal: !1,
|
modal: false,
|
||||||
entryAnimationDuration: 160,
|
entryAnimationDuration: 160,
|
||||||
exitAnimationDuration: 200
|
exitAnimationDuration: 200
|
||||||
});
|
});
|
||||||
dlg.classList.add("ui-body-a"), dlg.classList.add("background-theme-a"), dlg.classList.add("formDialog");
|
dlg.classList.add("ui-body-a");
|
||||||
|
dlg.classList.add("background-theme-a");
|
||||||
|
dlg.classList.add("formDialog");
|
||||||
var html = "";
|
var html = "";
|
||||||
html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">', html += '<h2 style="margin:0 0 .5em;">', html += Globalize.translate("HeaderSortBy"), html += "</h2>";
|
html += '<div style="margin:0;padding:1.25em 1.5em 1.5em;">';
|
||||||
var i, length, isChecked;
|
html += '<h2 style="margin:0 0 .5em;">';
|
||||||
|
html += Globalize.translate("HeaderSortBy");
|
||||||
|
html += "</h2>";
|
||||||
|
var i;
|
||||||
|
var length;
|
||||||
|
var isChecked;
|
||||||
|
|
||||||
for (html += "<div>", i = 0, length = options.items.length; i < length; i++) {
|
for (html += "<div>", i = 0, length = options.items.length; i < length; i++) {
|
||||||
var option = options.items[i],
|
var option = options.items[i];
|
||||||
radioValue = option.id.replace(",", "_");
|
var radioValue = option.id.replace(",", "_");
|
||||||
isChecked = (options.query.SortBy || "").replace(",", "_") == radioValue ? " checked" : "", html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + " /><span>" + option.name + "</span></label>"
|
isChecked = (options.query.SortBy || "").replace(",", "_") == radioValue ? " checked" : "";
|
||||||
|
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortBy" data-id="' + option.id + '" value="' + radioValue + '" class="menuSortBy" ' + isChecked + " /><span>" + option.name + "</span></label>";
|
||||||
}
|
}
|
||||||
html += "</div>", html += '<h2 style="margin: 1em 0 .5em;">', html += Globalize.translate("HeaderSortOrder"), html += "</h2>", html += "<div>", isChecked = "Ascending" == options.query.SortOrder ? " checked" : "", html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + " /><span>" + Globalize.translate("OptionAscending") + "</span></label>", isChecked = "Descending" == options.query.SortOrder ? " checked" : "", html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + " /><span>" + Globalize.translate("OptionDescending") + "</span></label>", html += "</div>", html += "</div>", dlg.innerHTML = html, dialogHelper.open(dlg);
|
|
||||||
|
html += "</div>";
|
||||||
|
html += '<h2 style="margin: 1em 0 .5em;">';
|
||||||
|
html += Globalize.translate("HeaderSortOrder");
|
||||||
|
html += "</h2>";
|
||||||
|
html += "<div>";
|
||||||
|
isChecked = "Ascending" == options.query.SortOrder ? " checked" : "";
|
||||||
|
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Ascending" class="menuSortOrder" ' + isChecked + " /><span>" + Globalize.translate("OptionAscending") + "</span></label>";
|
||||||
|
isChecked = "Descending" == options.query.SortOrder ? " checked" : "";
|
||||||
|
html += '<label class="radio-label-block"><input type="radio" is="emby-radio" name="SortOrder" value="Descending" class="menuSortOrder" ' + isChecked + " /><span>" + Globalize.translate("OptionDescending") + "</span></label>";
|
||||||
|
html += "</div>";
|
||||||
|
html += "</div>";
|
||||||
|
dlg.innerHTML = html;
|
||||||
|
dialogHelper.open(dlg);
|
||||||
var sortBys = dlg.querySelectorAll(".menuSortBy");
|
var sortBys = dlg.querySelectorAll(".menuSortBy");
|
||||||
for (i = 0, length = sortBys.length; i < length; i++) sortBys[i].addEventListener("change", onSortByChange);
|
|
||||||
|
for (i = 0, length = sortBys.length; i < length; i++) {
|
||||||
|
sortBys[i].addEventListener("change", onSortByChange);
|
||||||
|
}
|
||||||
|
|
||||||
var sortOrders = dlg.querySelectorAll(".menuSortOrder");
|
var sortOrders = dlg.querySelectorAll(".menuSortOrder");
|
||||||
for (i = 0, length = sortOrders.length; i < length; i++) sortOrders[i].addEventListener("change", onSortOrderChange)
|
|
||||||
})
|
for (i = 0, length = sortOrders.length; i < length; i++) {
|
||||||
|
sortOrders[i].addEventListener("change", onSortOrderChange);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return window.LibraryBrowser = libraryBrowser, libraryBrowser
|
window.LibraryBrowser = libraryBrowser;
|
||||||
});
|
return libraryBrowser;
|
||||||
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue