mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-15 18:08:17 -07:00
Merge pull request #1883 from Camc314/hide-alphapicker
Hide alphaPicker when not sorting alphabetically
This commit is contained in:
commit
73e0f34936
@ -40,6 +40,7 @@
|
||||
- [Andrei Oanca](https://github.com/OancaAndrei)
|
||||
- [Cromefire_](https://github.com/cromefire)
|
||||
- [Orry Verducci](https://github.com/orryverducci)
|
||||
- [Camc314](https://github.com/camc314)
|
||||
|
||||
# Emby Contributors
|
||||
|
||||
|
@ -26,6 +26,11 @@ import 'emby-itemscontainer';
|
||||
const updateFilterControls = () => {
|
||||
if (this.alphaPicker) {
|
||||
this.alphaPicker.value(query.NameStartsWith);
|
||||
if (query.SortBy.indexOf('SortName') === 0) {
|
||||
this.alphaPicker.visible(true);
|
||||
} else {
|
||||
this.alphaPicker.visible(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -155,20 +155,21 @@ import 'emby-itemscontainer';
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
@ -186,7 +187,16 @@ import 'emby-itemscontainer';
|
||||
|
||||
const updateFilterControls = (tabContent) => {
|
||||
const query = getQuery();
|
||||
this.alphaPicker.value(query.NameStartsWith);
|
||||
|
||||
if (this.alphaPicker) {
|
||||
this.alphaPicker.value(query.NameStartsWith);
|
||||
|
||||
if (query.SortBy.indexOf('SortName') === 0) {
|
||||
this.alphaPicker.visible(true);
|
||||
} else {
|
||||
this.alphaPicker.visible(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let savedQueryKey;
|
||||
@ -200,10 +210,12 @@ import 'emby-itemscontainer';
|
||||
mode: 'albums',
|
||||
serverId: ApiClient.serverId()
|
||||
});
|
||||
|
||||
events.on(filterDialog, 'filterchange', function () {
|
||||
getQuery().StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
filterDialog.show();
|
||||
});
|
||||
};
|
||||
@ -223,6 +235,7 @@ import 'emby-itemscontainer';
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
@ -235,6 +248,7 @@ import 'emby-itemscontainer';
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', () => {
|
||||
this.showFilterMenu();
|
||||
});
|
||||
|
||||
tabContent.querySelector('.btnSort').addEventListener('click', (e) => {
|
||||
libraryBrowser.showSortMenu({
|
||||
items: [{
|
||||
@ -267,10 +281,12 @@ import 'emby-itemscontainer';
|
||||
button: e.target
|
||||
});
|
||||
});
|
||||
|
||||
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', (e) => {
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
|
||||
});
|
||||
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
getPageData().view = viewStyle;
|
||||
@ -279,6 +295,7 @@ import 'emby-itemscontainer';
|
||||
onViewStyleChange();
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
|
||||
tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll);
|
||||
tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle);
|
||||
};
|
||||
|
@ -54,8 +54,8 @@ import 'emby-itemscontainer';
|
||||
return context.savedQueryKey;
|
||||
}
|
||||
|
||||
function onViewStyleChange() {
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const onViewStyleChange = () => {
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
if (viewStyle == 'List') {
|
||||
@ -67,13 +67,13 @@ import 'emby-itemscontainer';
|
||||
}
|
||||
|
||||
itemsContainer.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
function reloadItems(page) {
|
||||
const reloadItems = (page) => {
|
||||
loading.show();
|
||||
isLoading = true;
|
||||
const query = getQuery(page);
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) {
|
||||
ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
function onNextPageClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
@ -109,7 +109,7 @@ import 'emby-itemscontainer';
|
||||
sortButton: false,
|
||||
filterButton: false
|
||||
});
|
||||
const viewStyle = self.getCurrentViewStyle();
|
||||
const viewStyle = this.getCurrentViewStyle();
|
||||
if (viewStyle == 'Thumb') {
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
@ -169,18 +169,18 @@ import 'emby-itemscontainer';
|
||||
|
||||
let elems = tabContent.querySelectorAll('.paging');
|
||||
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].innerHTML = pagingHtml;
|
||||
for (const elem of elems) {
|
||||
elem.innerHTML = pagingHtml;
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnNextPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onNextPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onNextPageClick);
|
||||
}
|
||||
|
||||
elems = tabContent.querySelectorAll('.btnPreviousPage');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
elems[i].addEventListener('click', onPreviousPageClick);
|
||||
for (const elem of elems) {
|
||||
elem.addEventListener('click', onPreviousPageClick);
|
||||
}
|
||||
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
@ -194,18 +194,26 @@ import 'emby-itemscontainer';
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function updateFilterControls(tabContent) {
|
||||
const updateFilterControls = (tabContent) => {
|
||||
const query = getQuery(tabContent);
|
||||
self.alphaPicker.value(query.NameStartsWith);
|
||||
}
|
||||
|
||||
const self = this;
|
||||
if (this.alphaPicker) {
|
||||
this.alphaPicker.value(query.NameStartsWith);
|
||||
|
||||
if (query.SortBy.indexOf('SortName') === 0) {
|
||||
this.alphaPicker.visible(true);
|
||||
} else {
|
||||
this.alphaPicker.visible(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const data = {};
|
||||
let isLoading = false;
|
||||
|
||||
self.showFilterMenu = function () {
|
||||
this.showFilterMenu = function () {
|
||||
import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
|
||||
const filterDialog = new filterDialogFactory({
|
||||
query: getQuery(tabContent),
|
||||
@ -220,11 +228,11 @@ import 'emby-itemscontainer';
|
||||
});
|
||||
};
|
||||
|
||||
self.getCurrentViewStyle = function () {
|
||||
this.getCurrentViewStyle = function () {
|
||||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
function initPage(tabContent) {
|
||||
const initPage = (tabContent) => {
|
||||
const alphaPickerElement = tabContent.querySelector('.alphaPicker');
|
||||
const itemsContainer = tabContent.querySelector('.itemsContainer');
|
||||
|
||||
@ -235,7 +243,7 @@ import 'emby-itemscontainer';
|
||||
query.StartIndex = 0;
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
self.alphaPicker = new AlphaPicker({
|
||||
this.alphaPicker = new AlphaPicker({
|
||||
element: alphaPickerElement,
|
||||
valueChangeEvent: 'click'
|
||||
});
|
||||
@ -244,8 +252,8 @@ import 'emby-itemscontainer';
|
||||
alphaPickerElement.classList.add('alphaPicker-fixed-right');
|
||||
itemsContainer.classList.add('padded-right-withalphapicker');
|
||||
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', function () {
|
||||
self.showFilterMenu();
|
||||
tabContent.querySelector('.btnFilter').addEventListener('click', () => {
|
||||
this.showFilterMenu();
|
||||
});
|
||||
tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
|
||||
libraryBrowser.showSortMenu({
|
||||
@ -277,8 +285,8 @@ import 'emby-itemscontainer';
|
||||
});
|
||||
});
|
||||
const btnSelectView = tabContent.querySelector('.btnSelectView');
|
||||
btnSelectView.addEventListener('click', function (e) {
|
||||
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
btnSelectView.addEventListener('click', (e) => {
|
||||
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
|
||||
});
|
||||
btnSelectView.addEventListener('layoutchange', function (e) {
|
||||
const viewStyle = e.detail.viewStyle;
|
||||
@ -288,17 +296,17 @@ import 'emby-itemscontainer';
|
||||
onViewStyleChange();
|
||||
reloadItems(tabContent);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
initPage(tabContent);
|
||||
onViewStyleChange();
|
||||
|
||||
self.renderTab = function () {
|
||||
this.renderTab = function () {
|
||||
reloadItems(tabContent);
|
||||
updateFilterControls(tabContent);
|
||||
};
|
||||
|
||||
self.destroy = function () {};
|
||||
this.destroy = function () {};
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
|
Loading…
Reference in New Issue
Block a user