mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Apply suggestions
This commit is contained in:
parent
ba3418450e
commit
f1b2a86c7d
4 changed files with 41 additions and 45 deletions
|
@ -53,8 +53,8 @@ import 'emby-itemscontainer';
|
||||||
return context.savedQueryKey;
|
return context.savedQueryKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onViewStyleChange() {
|
const onViewStyleChange = () => {
|
||||||
const viewStyle = self.getCurrentViewStyle();
|
const viewStyle = this.getCurrentViewStyle();
|
||||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
|
|
||||||
if (viewStyle == 'List') {
|
if (viewStyle == 'List') {
|
||||||
|
@ -66,13 +66,13 @@ import 'emby-itemscontainer';
|
||||||
}
|
}
|
||||||
|
|
||||||
itemsContainer.innerHTML = '';
|
itemsContainer.innerHTML = '';
|
||||||
}
|
};
|
||||||
|
|
||||||
function reloadItems(page) {
|
const reloadItems = (page) => {
|
||||||
loading.show();
|
loading.show();
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
const query = getQuery(page);
|
const query = getQuery(page);
|
||||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||||
function onNextPageClick() {
|
function onNextPageClick() {
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return;
|
return;
|
||||||
|
@ -107,7 +107,7 @@ import 'emby-itemscontainer';
|
||||||
sortButton: false,
|
sortButton: false,
|
||||||
filterButton: false
|
filterButton: false
|
||||||
});
|
});
|
||||||
const viewStyle = self.getCurrentViewStyle();
|
const viewStyle = this.getCurrentViewStyle();
|
||||||
if (viewStyle == 'Thumb') {
|
if (viewStyle == 'Thumb') {
|
||||||
html = cardBuilder.getCardsHtml({
|
html = cardBuilder.getCardsHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
|
@ -198,17 +198,16 @@ import 'emby-itemscontainer';
|
||||||
autoFocuser.autoFocus(page);
|
autoFocuser.autoFocus(page);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const self = this;
|
|
||||||
const data = {};
|
const data = {};
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
|
|
||||||
self.getCurrentViewStyle = function () {
|
this.getCurrentViewStyle = function () {
|
||||||
return getPageData(tabContent).view;
|
return getPageData(tabContent).view;
|
||||||
};
|
};
|
||||||
|
|
||||||
function initPage(tabContent) {
|
const initPage = (tabContent) => {
|
||||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||||
libraryBrowser.showSortMenu({
|
libraryBrowser.showSortMenu({
|
||||||
items: [{
|
items: [{
|
||||||
|
@ -237,7 +236,7 @@ import 'emby-itemscontainer';
|
||||||
});
|
});
|
||||||
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||||
btnSelectView.addEventListener('click', function (e) {
|
btnSelectView.addEventListener('click', function (e) {
|
||||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||||
});
|
});
|
||||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||||
const viewStyle = e.detail.viewStyle;
|
const viewStyle = e.detail.viewStyle;
|
||||||
|
@ -256,16 +255,16 @@ import 'emby-itemscontainer';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
initPage(tabContent);
|
initPage(tabContent);
|
||||||
onViewStyleChange();
|
onViewStyleChange();
|
||||||
|
|
||||||
self.renderTab = function () {
|
this.renderTab = function () {
|
||||||
reloadItems(tabContent);
|
reloadItems(tabContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
self.destroy = function () {};
|
this.destroy = function () {};
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-enable indent */
|
/* eslint-enable indent */
|
||||||
|
|
|
@ -60,10 +60,10 @@ import 'emby-button';
|
||||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||||
}
|
}
|
||||||
|
|
||||||
function fillItemsContainer(entry) {
|
const fillItemsContainer = (entry) => {
|
||||||
const elem = entry.target;
|
const elem = entry.target;
|
||||||
const id = elem.getAttribute('data-id');
|
const id = elem.getAttribute('data-id');
|
||||||
const viewStyle = self.getCurrentViewStyle();
|
const viewStyle = this.getCurrentViewStyle();
|
||||||
let limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
|
let limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9;
|
||||||
|
|
||||||
if (enableScrollX()) {
|
if (enableScrollX()) {
|
||||||
|
@ -133,7 +133,7 @@ import 'emby-button';
|
||||||
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
|
tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
function reloadItems(context, promise) {
|
function reloadItems(context, promise) {
|
||||||
const query = getQuery();
|
const query = getQuery();
|
||||||
|
@ -189,36 +189,35 @@ import 'emby-button';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function fullyReload() {
|
const fullyReload = () => {
|
||||||
self.preRender();
|
this.preRender();
|
||||||
self.renderTab();
|
this.renderTab();
|
||||||
}
|
};
|
||||||
|
|
||||||
const self = this;
|
|
||||||
const data = {};
|
const data = {};
|
||||||
|
|
||||||
self.getViewStyles = function () {
|
this.getViewStyles = function () {
|
||||||
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
|
||||||
};
|
};
|
||||||
|
|
||||||
self.getCurrentViewStyle = function () {
|
this.getCurrentViewStyle = function () {
|
||||||
return getPageData().view;
|
return getPageData().view;
|
||||||
};
|
};
|
||||||
|
|
||||||
self.setCurrentViewStyle = function (viewStyle) {
|
this.setCurrentViewStyle = function (viewStyle) {
|
||||||
getPageData().view = viewStyle;
|
getPageData().view = viewStyle;
|
||||||
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle);
|
||||||
fullyReload();
|
fullyReload();
|
||||||
};
|
};
|
||||||
|
|
||||||
self.enableViewSelection = true;
|
this.enableViewSelection = true;
|
||||||
let promise;
|
let promise;
|
||||||
|
|
||||||
self.preRender = function () {
|
this.preRender = function () {
|
||||||
promise = getPromise();
|
promise = getPromise();
|
||||||
};
|
};
|
||||||
|
|
||||||
self.renderTab = function () {
|
this.renderTab = function () {
|
||||||
reloadItems(tabContent, promise);
|
reloadItems(tabContent, promise);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -297,7 +297,6 @@ import 'emby-itemscontainer';
|
||||||
onViewStyleChange();
|
onViewStyleChange();
|
||||||
};
|
};
|
||||||
|
|
||||||
//function renderTab () {
|
|
||||||
this.renderTab = function () {
|
this.renderTab = function () {
|
||||||
itemsContainer.refreshItems();
|
itemsContainer.refreshItems();
|
||||||
updateFilterControls();
|
updateFilterControls();
|
||||||
|
|
|
@ -54,11 +54,11 @@ import 'emby-itemscontainer';
|
||||||
return context.savedQueryKey;
|
return context.savedQueryKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
function reloadItems() {
|
const reloadItems = () => {
|
||||||
loading.show();
|
loading.show();
|
||||||
isLoading = true;
|
isLoading = true;
|
||||||
const query = getQuery(tabContent);
|
const query = getQuery(tabContent);
|
||||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||||
function onNextPageClick() {
|
function onNextPageClick() {
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return;
|
return;
|
||||||
|
@ -94,7 +94,7 @@ import 'emby-itemscontainer';
|
||||||
filterButton: false
|
filterButton: false
|
||||||
});
|
});
|
||||||
let html;
|
let html;
|
||||||
const viewStyle = self.getCurrentViewStyle();
|
const viewStyle = this.getCurrentViewStyle();
|
||||||
|
|
||||||
if (viewStyle == 'Thumb') {
|
if (viewStyle == 'Thumb') {
|
||||||
html = cardBuilder.getCardsHtml({
|
html = cardBuilder.getCardsHtml({
|
||||||
|
@ -182,18 +182,17 @@ import 'emby-itemscontainer';
|
||||||
loading.hide();
|
loading.hide();
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
function updateFilterControls(tabContent) {
|
const updateFilterControls = (tabContent) => {
|
||||||
const query = getQuery(tabContent);
|
const query = getQuery(tabContent);
|
||||||
self.alphaPicker.value(query.NameStartsWithOrGreater);
|
this.alphaPicker.value(query.NameStartsWithOrGreater);
|
||||||
}
|
};
|
||||||
|
|
||||||
const self = this;
|
|
||||||
const data = {};
|
const data = {};
|
||||||
let isLoading = false;
|
let isLoading = false;
|
||||||
|
|
||||||
self.showFilterMenu = function () {
|
this.showFilterMenu = function () {
|
||||||
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
|
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
|
||||||
const filterDialog = new filterDialogFactory({
|
const filterDialog = new filterDialogFactory({
|
||||||
query: getQuery(tabContent),
|
query: getQuery(tabContent),
|
||||||
|
@ -208,11 +207,11 @@ import 'emby-itemscontainer';
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
self.getCurrentViewStyle = function () {
|
this.getCurrentViewStyle = function () {
|
||||||
return getPageData(tabContent).view;
|
return getPageData(tabContent).view;
|
||||||
};
|
};
|
||||||
|
|
||||||
function initPage(tabContent) {
|
const initPage = (tabContent) => {
|
||||||
const alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
const alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||||
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
|
||||||
|
@ -222,7 +221,7 @@ import 'emby-itemscontainer';
|
||||||
query.StartIndex = 0;
|
query.StartIndex = 0;
|
||||||
reloadItems();
|
reloadItems();
|
||||||
});
|
});
|
||||||
self.alphaPicker = new AlphaPicker({
|
this.alphaPicker = new AlphaPicker({
|
||||||
element: alphaPickerElement,
|
element: alphaPickerElement,
|
||||||
valueChangeEvent: 'click'
|
valueChangeEvent: 'click'
|
||||||
});
|
});
|
||||||
|
@ -232,7 +231,7 @@ import 'emby-itemscontainer';
|
||||||
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();
|
this.showFilterMenu();
|
||||||
});
|
});
|
||||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||||
libraryBrowser.showSortMenu({
|
libraryBrowser.showSortMenu({
|
||||||
|
@ -266,16 +265,16 @@ import 'emby-itemscontainer';
|
||||||
button: e.target
|
button: e.target
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
initPage(tabContent);
|
initPage(tabContent);
|
||||||
|
|
||||||
self.renderTab = function () {
|
this.renderTab = function () {
|
||||||
reloadItems();
|
reloadItems();
|
||||||
updateFilterControls(tabContent);
|
updateFilterControls(tabContent);
|
||||||
};
|
};
|
||||||
|
|
||||||
self.destroy = function () {};
|
this.destroy = function () {};
|
||||||
}
|
}
|
||||||
|
|
||||||
/* eslint-enable indent */
|
/* eslint-enable indent */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue