1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update music filters

This commit is contained in:
Luke Pulverenti 2016-02-15 11:57:51 -05:00
parent d42d6c123a
commit 1bd86570be
11 changed files with 128 additions and 553 deletions

View file

@ -106,8 +106,6 @@
LibraryBrowser.loadSavedQueryValues(viewkey, query);
QueryFilters.onPageShow(page, query);
reloadItems(page);
});

View file

@ -36,7 +36,7 @@
return LibraryBrowser.getSavedQueryKey('albumartists');
}
function reloadItems(page, viewPanel) {
function reloadItems(page) {
Dashboard.showLoadingMsg();
@ -55,17 +55,15 @@
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
viewPanelClass: 'albumArtistsViewPanel',
updatePageSizeSetting: false,
addLayoutButton: true,
currentLayout: view,
viewButton: true,
viewIcon: 'filter-list'
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
updateFilterControls(page, viewPanel);
updateFilterControls(page);
if (view == "List") {
@ -107,18 +105,22 @@
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnPreviousPage', page).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
getPageData().view = layout;
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@ -127,60 +129,31 @@
});
}
function updateFilterControls(tabContent, viewPanel) {
function showFilterMenu(page) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'albumartists'
});
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
filterDialog.show();
});
}
function updateFilterControls(tabContent) {
var query = getQuery();
$('.chkStandardFilter', viewPanel).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
});
$('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
}
function reloadFiltersIfNeeded(page, viewPanel) {
if (!getPageData().filtersLoaded) {
getPageData().filtersLoaded = true;
var query = getQuery();
QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
reloadItems(page, viewPanel);
});
}
}
function initPage(tabContent, viewPanel) {
$(viewPanel).on('panelopen', function () {
reloadFiltersIfNeeded(tabContent, viewPanel);
});
$('.chkStandardFilter', viewPanel).on('change', function () {
var query = getQuery();
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
query.StartIndex = 0;
query.Filters = filters;
reloadItems(tabContent, viewPanel);
});
function initPage(tabContent) {
$('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
@ -189,7 +162,7 @@
query.NameStartsWithOrGreater = character;
query.StartIndex = 0;
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}).on('alphaclear', function (e) {
@ -197,21 +170,19 @@
query.NameStartsWithOrGreater = '';
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
});
}
window.MusicPage.initAlbumArtistsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.albumArtistsViewPanel');
initPage(tabContent, viewPanel);
initPage(tabContent);
};
window.MusicPage.renderAlbumArtistsTab = function (page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
var viewPanel = page.querySelector('.albumArtistsViewPanel');
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}
};

View file

@ -37,7 +37,7 @@
return LibraryBrowser.getSavedQueryKey('albums');
}
function reloadItems(page, viewPanel) {
function reloadItems(page) {
Dashboard.showLoadingMsg();
@ -54,20 +54,18 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false,
sortButton: true,
viewPanelClass: 'albumsViewPanel',
addLayoutButton: true,
currentLayout: view,
updatePageSizeSetting: false,
viewIcon: 'filter-list',
layouts: 'List,Poster,PosterCard,Timeline'
layouts: 'List,Poster,PosterCard,Timeline',
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
updateFilterControls(page, viewPanel);
updateFilterControls(page);
if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
@ -120,12 +118,16 @@
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnPreviousPage', page).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
@ -137,7 +139,7 @@
getPageData().view = layout;
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
reloadItems(page, viewPanel);
reloadItems(page);
});
// On callback make sure to set StartIndex = 0
@ -168,7 +170,7 @@
id: 'ProductionYear,PremiereDate,SortName'
}],
callback: function () {
reloadItems(page, viewPanel);
reloadItems(page);
},
query: query
});
@ -180,51 +182,31 @@
});
}
function updateFilterControls(page, viewPanel) {
function showFilterMenu(page) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'albums'
});
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
filterDialog.show();
});
}
function updateFilterControls(page) {
var query = getQuery();
$('.alphabetPicker', page).alphaValue(query.NameStartsWith);
}
function reloadFiltersIfNeeded(page, viewPanel) {
if (!getPageData().filtersLoaded) {
getPageData().filtersLoaded = true;
var query = getQuery();
QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
reloadItems(page, viewPanel);
});
}
}
function initPage(tabContent, viewPanel) {
$(viewPanel).on('panelopen', function () {
reloadFiltersIfNeeded(tabContent, viewPanel);
});
$('.chkStandardFilter', viewPanel).on('change', function () {
var query = getQuery();
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
query.StartIndex = 0;
query.Filters = filters;
reloadItems(tabContent, viewPanel);
});
function initPage(tabContent) {
$('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
@ -240,7 +222,7 @@
query.StartIndex = 0;
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}).on('alphaclear', function (e) {
@ -249,21 +231,19 @@
query.NameStartsWithOrGreater = '';
query.AlbumArtistStartsWithOrGreater = '';
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
});
}
window.MusicPage.initAlbumsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.albumsViewPanel');
initPage(tabContent, viewPanel);
initPage(tabContent);
};
window.MusicPage.renderAlbumsTab = function (page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
var viewPanel = page.querySelector('.albumsViewPanel');
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}
};

View file

@ -36,7 +36,7 @@
return LibraryBrowser.getSavedQueryKey('artists');
}
function reloadItems(page, viewPanel) {
function reloadItems(page) {
Dashboard.showLoadingMsg();
@ -55,17 +55,15 @@
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
showLimit: false,
viewPanelClass: 'artistsViewPanel',
updatePageSizeSetting: false,
addLayoutButton: true,
currentLayout: view,
viewButton: true,
viewIcon: 'filter-list'
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
updateFilterControls(page, viewPanel);
updateFilterControls(page);
if (view == "List") {
@ -107,18 +105,22 @@
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnPreviousPage', page).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
getPageData().view = layout;
LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@ -127,60 +129,31 @@
});
}
function updateFilterControls(tabContent, viewPanel) {
function showFilterMenu(page) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'artists'
});
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
filterDialog.show();
});
}
function updateFilterControls(tabContent) {
var query = getQuery();
$('.chkStandardFilter', viewPanel).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
});
$('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
}
function reloadFiltersIfNeeded(page, viewPanel) {
if (!getPageData().filtersLoaded) {
getPageData().filtersLoaded = true;
var query = getQuery();
QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
reloadItems(page, viewPanel);
});
}
}
function initPage(tabContent, viewPanel) {
$(viewPanel).on('panelopen', function () {
reloadFiltersIfNeeded(tabContent, viewPanel);
});
$('.chkStandardFilter', viewPanel).on('change', function () {
var query = getQuery();
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
query.StartIndex = 0;
query.Filters = filters;
reloadItems(tabContent, viewPanel);
});
function initPage(tabContent) {
$('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
@ -189,7 +162,7 @@
query.NameStartsWithOrGreater = character;
query.StartIndex = 0;
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}).on('alphaclear', function (e) {
@ -197,21 +170,19 @@
query.NameStartsWithOrGreater = '';
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
});
}
window.MusicPage.initArtistsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.artistsViewPanel');
initPage(tabContent, viewPanel);
initPage(tabContent);
};
window.MusicPage.renderArtistsTab = function (page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
var viewPanel = page.querySelector('.artistsViewPanel');
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}
};

View file

@ -233,25 +233,20 @@
depends.push('scripts/musicalbums');
renderMethod = 'renderAlbumsTab';
initMethod = 'initAlbumsTab';
depends.push('scripts/queryfilters');
break;
case 2:
depends.push('scripts/musicalbumartists');
renderMethod = 'renderAlbumArtistsTab';
initMethod = 'initAlbumArtistsTab';
depends.push('scripts/queryfilters');
break;
case 3:
depends.push('scripts/musicartists');
renderMethod = 'renderArtistsTab';
initMethod = 'initArtistsTab';
depends.push('scripts/queryfilters');
break;
case 4:
depends.push('scripts/songs');
renderMethod = 'renderSongsTab';
initMethod = 'initSongsTab';
depends.push('scripts/queryfilters');
depends.push('paper-icon-item');
depends.push('paper-item-body');
break;

View file

@ -1,162 +0,0 @@
(function (window) {
function renderOptions(page, selector, cssClass, items) {
var elem;
if (items.length) {
elem = $(selector, page).show()[0];
} else {
elem = $(selector, page).hide()[0];
}
var html = '';
// style="margin: -.2em -.8em;"
html += '<div>';
var index = 0;
var idPrefix = 'chk' + selector.substring(1);
html += items.map(function (filter) {
var itemHtml = '';
var id = idPrefix + index;
itemHtml += '<div class="checkboxContainer">';
itemHtml += '<input id="' + id + '" type="checkbox" data-filter="' + filter + '" data-role="none" class="' + cssClass + '" />';
itemHtml += '<label for="' + id + '">' + filter + '</label>';
itemHtml += '</div>';
//itemHtml += '<paper-checkbox id="' + id + '" data-filter="' + filter + '" class="' + cssClass + '">' + filter + '</paper-checkbox>';
index++;
return itemHtml;
}).join('');
html += '</div>';
elem.querySelector('.filterOptions').innerHTML = html;
}
function renderFilters(page, result) {
// If there's a huge number of these they will be really show to render
if (result.Tags) {
result.Tags.length = Math.min(result.Tags.length, 50);
}
renderOptions(page, '.genreFilters', 'chkGenreFilter', result.Genres);
renderOptions(page, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings);
renderOptions(page, '.tagFilters', 'chkTagFilter', result.Tags);
renderOptions(page, '.yearFilters', 'chkYearFilter', result.Years);
}
function onFiltersLoaded(page, query, reloadItemsFn) {
$('.chkGenreFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Genres || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Genres = filters;
reloadItemsFn();
});
$('.chkTagFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Tags || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Tags = filters;
reloadItemsFn();
});
$('.chkYearFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Years || "";
var delimiter = ',';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Years = filters;
reloadItemsFn();
});
$('.chkOfficialRatingFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.OfficialRatings || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.OfficialRatings = filters;
reloadItemsFn();
});
}
function loadFilters(page, userId, itemQuery, reloadItemsFn) {
return ApiClient.getJSON(ApiClient.getUrl('Items/Filters', {
UserId: userId,
ParentId: itemQuery.ParentId,
IncludeItemTypes: itemQuery.IncludeItemTypes
})).then(function (result) {
renderFilters(page, result);
onFiltersLoaded(page, itemQuery, reloadItemsFn);
});
}
function onPageShow(page, query) {
query.Genres = null;
query.Years = null;
query.OfficialRatings = null;
query.Tags = null;
}
window.QueryFilters = {
loadFilters: loadFilters,
onPageShow: onPageShow
};
})(window);

View file

@ -38,7 +38,7 @@
return LibraryBrowser.getSavedQueryKey('songs');
}
function reloadItems(page, viewPanel) {
function reloadItems(page) {
Dashboard.showLoadingMsg();
@ -53,12 +53,10 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false,
sortButton: true,
viewPanelClass: 'songsViewPanel',
updatePageSizeSetting: false,
viewIcon: 'filter-list'
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
@ -76,12 +74,16 @@
$('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnPreviousPage', page).on('click', function () {
query.StartIndex -= query.Limit;
reloadItems(page, viewPanel);
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
// On callback make sure to set StartIndex = 0
@ -124,7 +126,7 @@
id: 'Runtime,AlbumArtist,Album,SortName'
}],
callback: function () {
reloadItems(page, viewPanel);
reloadItems(page);
},
query: query
});
@ -136,57 +138,27 @@
});
}
function reloadFiltersIfNeeded(page, viewPanel) {
function showFilterMenu(page) {
if (!getPageData().filtersLoaded) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
getPageData().filtersLoaded = true;
var query = getQuery();
QueryFilters.loadFilters(viewPanel, Dashboard.getCurrentUserId(), query, function () {
reloadItems(page, viewPanel);
var filterDialog = new filterDialogFactory({
query: getQuery(),
mode: 'songs'
});
}
}
function initPage(tabContent, viewPanel) {
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
$(viewPanel).on('panelopen', function () {
reloadFiltersIfNeeded(tabContent, viewPanel);
});
$('.chkStandardFilter', viewPanel).on('change', function () {
var query = getQuery();
var filterName = this.getAttribute('data-filter');
var filters = query.Filters || "";
filters = (',' + filters).replace(',' + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + ',' + filterName) : filterName;
}
query.StartIndex = 0;
query.Filters = filters;
reloadItems(tabContent, viewPanel);
filterDialog.show();
});
}
window.MusicPage.initSongsTab = function (page, tabContent) {
var viewPanel = page.querySelector('.songsViewPanel');
initPage(tabContent, viewPanel);
};
window.MusicPage.renderSongsTab = function (page, tabContent) {
if (LibraryBrowser.needsRefresh(tabContent)) {
var viewPanel = page.querySelector('.songsViewPanel');
reloadItems(tabContent, viewPanel);
reloadItems(tabContent);
}
};