Merge pull request #1883 from Camc314/hide-alphapicker

Hide alphaPicker when not sorting alphabetically
This commit is contained in:
dkanada 2020-09-18 14:10:47 +09:00 committed by GitHub
commit 73e0f34936
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 35 deletions

View file

@ -40,6 +40,7 @@
- [Andrei Oanca](https://github.com/OancaAndrei) - [Andrei Oanca](https://github.com/OancaAndrei)
- [Cromefire_](https://github.com/cromefire) - [Cromefire_](https://github.com/cromefire)
- [Orry Verducci](https://github.com/orryverducci) - [Orry Verducci](https://github.com/orryverducci)
- [Camc314](https://github.com/camc314)
# Emby Contributors # Emby Contributors

View file

@ -26,6 +26,11 @@ import 'emby-itemscontainer';
const updateFilterControls = () => { const updateFilterControls = () => {
if (this.alphaPicker) { if (this.alphaPicker) {
this.alphaPicker.value(query.NameStartsWith); this.alphaPicker.value(query.NameStartsWith);
if (query.SortBy.indexOf('SortName') === 0) {
this.alphaPicker.visible(true);
} else {
this.alphaPicker.visible(false);
}
} }
}; };

View file

@ -155,20 +155,21 @@ import 'emby-itemscontainer';
overlayPlayButton: true overlayPlayButton: true
}); });
} }
let elems = tabContent.querySelectorAll('.paging'); let elems = tabContent.querySelectorAll('.paging');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].innerHTML = pagingHtml; elem.innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll('.btnNextPage');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onNextPageClick); elem.addEventListener('click', onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll('.btnPreviousPage');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onPreviousPageClick); elem.addEventListener('click', onPreviousPageClick);
} }
const itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
@ -186,7 +187,16 @@ import 'emby-itemscontainer';
const updateFilterControls = (tabContent) => { const updateFilterControls = (tabContent) => {
const query = getQuery(); 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; let savedQueryKey;
@ -200,10 +210,12 @@ import 'emby-itemscontainer';
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);
}); });
filterDialog.show(); filterDialog.show();
}); });
}; };
@ -223,6 +235,7 @@ import 'emby-itemscontainer';
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
this.alphaPicker = new AlphaPicker({ this.alphaPicker = new AlphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
@ -235,6 +248,7 @@ import 'emby-itemscontainer';
tabContent.querySelector('.btnFilter').addEventListener('click', () => { tabContent.querySelector('.btnFilter').addEventListener('click', () => {
this.showFilterMenu(); this.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', (e) => { tabContent.querySelector('.btnSort').addEventListener('click', (e) => {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
items: [{ items: [{
@ -267,10 +281,12 @@ import 'emby-itemscontainer';
button: e.target button: e.target
}); });
}); });
const btnSelectView = tabContent.querySelector('.btnSelectView'); const btnSelectView = tabContent.querySelector('.btnSelectView');
btnSelectView.addEventListener('click', (e) => { btnSelectView.addEventListener('click', (e) => {
libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
}); });
btnSelectView.addEventListener('layoutchange', function (e) { btnSelectView.addEventListener('layoutchange', function (e) {
const viewStyle = e.detail.viewStyle; const viewStyle = e.detail.viewStyle;
getPageData().view = viewStyle; getPageData().view = viewStyle;
@ -279,6 +295,7 @@ import 'emby-itemscontainer';
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);
}; };

View file

@ -54,8 +54,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') {
@ -67,13 +67,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;
@ -109,7 +109,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,
@ -169,18 +169,18 @@ import 'emby-itemscontainer';
let elems = tabContent.querySelectorAll('.paging'); let elems = tabContent.querySelectorAll('.paging');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].innerHTML = pagingHtml; elem.innerHTML = pagingHtml;
} }
elems = tabContent.querySelectorAll('.btnNextPage'); elems = tabContent.querySelectorAll('.btnNextPage');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onNextPageClick); elem.addEventListener('click', onNextPageClick);
} }
elems = tabContent.querySelectorAll('.btnPreviousPage'); elems = tabContent.querySelectorAll('.btnPreviousPage');
for (let i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].addEventListener('click', onPreviousPageClick); elem.addEventListener('click', onPreviousPageClick);
} }
const itemsContainer = tabContent.querySelector('.itemsContainer'); const itemsContainer = tabContent.querySelector('.itemsContainer');
@ -194,18 +194,26 @@ import 'emby-itemscontainer';
autoFocuser.autoFocus(page); autoFocuser.autoFocus(page);
}); });
}); });
} };
function updateFilterControls(tabContent) { const updateFilterControls = (tabContent) => {
const query = getQuery(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 = {}; 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),
@ -220,11 +228,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');
@ -235,7 +243,7 @@ import 'emby-itemscontainer';
query.StartIndex = 0; query.StartIndex = 0;
reloadItems(tabContent); reloadItems(tabContent);
}); });
self.alphaPicker = new AlphaPicker({ this.alphaPicker = new AlphaPicker({
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: 'click' valueChangeEvent: 'click'
}); });
@ -244,8 +252,8 @@ import 'emby-itemscontainer';
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', () => {
self.showFilterMenu(); this.showFilterMenu();
}); });
tabContent.querySelector('.btnSort').addEventListener('click', function (e) { tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
libraryBrowser.showSortMenu({ libraryBrowser.showSortMenu({
@ -277,8 +285,8 @@ import 'emby-itemscontainer';
}); });
}); });
const btnSelectView = tabContent.querySelector('.btnSelectView'); const btnSelectView = tabContent.querySelector('.btnSelectView');
btnSelectView.addEventListener('click', function (e) { btnSelectView.addEventListener('click', (e) => {
libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'Banner,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;
@ -288,17 +296,17 @@ import 'emby-itemscontainer';
onViewStyleChange(); onViewStyleChange();
reloadItems(tabContent); reloadItems(tabContent);
}); });
} };
initPage(tabContent); initPage(tabContent);
onViewStyleChange(); onViewStyleChange();
self.renderTab = function () { this.renderTab = function () {
reloadItems(tabContent); reloadItems(tabContent);
updateFilterControls(tabContent); updateFilterControls(tabContent);
}; };
self.destroy = function () {}; this.destroy = function () {};
} }
/* eslint-enable indent */ /* eslint-enable indent */