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

update channel filters

This commit is contained in:
Luke Pulverenti 2016-02-14 15:34:54 -05:00
parent 413a255477
commit d4504e80a2
12 changed files with 248 additions and 326 deletions

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="jqmpanel,scripts/channelitems,paper-checkbox" data-backbutton="true" data-menubutton="false">
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox" data-backbutton="true" data-menubutton="false">
<div data-role="content">
<div class="viewSettings">
@ -14,29 +14,6 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<div data-role="panel" class="viewPanel" data-theme="b" data-position="right" data-display="overlay" data-position-fixed="true">
<div class="ui-panel-inner">
<form>
<div class="filterControls">
<h1>
${HeaderFilters}
</h1>
<div class="paperCheckboxList">
<paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,85 @@
define(['paperdialoghelper', 'events', 'paper-checkbox'], function (paperDialogHelper, events) {
function updateFilterControls(context, query) {
$('.chkStandardFilter', context).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
});
}
function triggerChange(instance) {
events.trigger(instance, 'filterchange');
}
function bindEvents(instance, context, query) {
$('.chkStandardFilter', context).on('change', function () {
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;
triggerChange(instance);
});
}
return function (options) {
var self = this;
self.show = function () {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/filterdialog/filterdialog.template.html', true);
xhr.onload = function (e) {
var template = this.response;
var dlg = paperDialogHelper.createDialog({
removeOnClose: true,
modal: false,
enableHistory: false,
entryAnimationDuration: 160,
exitAnimationDuration: 200
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
dlg.classList.add('formDialog');
var html = '';
html += Globalize.translateDocument(template);
dlg.innerHTML = html;
document.body.appendChild(dlg);
paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', resolve);
updateFilterControls(dlg, options.query);
bindEvents(self, dlg, options.query);
}
xhr.send();
});
};
};
});

View file

@ -0,0 +1,14 @@
<div style="margin: 0;padding:1.5em 2em;">
<h1>
${HeaderFilters}
</h1>
<div class="paperCheckboxList">
<paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
<paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
</div>
</div>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="gameGenresPage" data-role="page" class="page libraryPage listPage" data-require="jqmcheckbox,jqmcontrolgroup,jqmpanel,scripts/gamegenrepage">
<div id="gameGenresPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamegenrepage">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="gamesrecommended.html">${TabSuggestions}</a>
<a href="games.html">${TabGames}</a>
@ -20,41 +20,6 @@
<div id="items" class="itemsContainer"></div>
</div>
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
<form>
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
<a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
<a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
</div>
<div class="tabView viewTab">
<div>
<label for="selectPageSize">${LabelPageSize}</label>
<select id="selectPageSize" class="selectPageSize"></select>
</div>
</div>
<div class="tabFilter viewTab">
<fieldset data-role="controlgroup">
<legend>
${HeaderFilters}
</legend>
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
<label for="chkIsFavorite">${OptionFavorite}</label>
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
<label for="chkLikes">${OptionLikes}</label>
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
<label for="chkDislikes">${OptionDislikes}</label>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="gameStudiosPage" data-role="page" class="page libraryPage listPage" data-require="jqmcheckbox,jqmcontrolgroup,jqmpanel,scripts/gamestudiospage">
<div id="gameStudiosPage" data-role="page" class="page libraryPage listPage" data-require="jqmcontrolgroup,scripts/gamestudiospage">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="gamesrecommended.html">${TabSuggestions}</a>
<a href="games.html">${TabGames}</a>
@ -19,41 +19,6 @@
</div>
<div id="items" class="itemsContainer"></div>
</div>
<div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
<form>
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="viewPanelTabs">
<a href="#" data-role="button" class="viewTabButton" data-tab="tabView">${TabView}</a>
<a href="#" data-role="button" class="viewTabButton" data-tab="tabFilter">${TabFilter}</a>
</div>
<div class="tabView viewTab">
<div>
<label for="selectPageSize">${LabelPageSize}</label>
<select id="selectPageSize" class="selectPageSize"></select>
</div>
</div>
<div class="tabFilter viewTab">
<fieldset data-role="controlgroup">
<legend>
${HeaderFilters}
</legend>
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true">
<label for="chkIsFavorite">${OptionFavorite}</label>
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true">
<label for="chkLikes">${OptionLikes}</label>
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
<label for="chkDislikes">${OptionDislikes}</label>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>

View file

@ -103,11 +103,10 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false,
updatePageSizeSetting: false,
viewIcon: 'filter-list',
sortButton: true
sortButton: true,
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
@ -140,6 +139,10 @@
reloadItems(page);
});
$('.btnFilter', page).on('click', function () {
showFilterMenu(page);
});
// On callback make sure to set StartIndex = 0
$('.btnSort', page).on('click', function () {
showSortMenu(page);
@ -153,6 +156,22 @@
});
}
function showFilterMenu(page) {
require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
var filterDialog = new filterDialogFactory({
query: getQuery()
});
Events.on(filterDialog, 'filterchange', function () {
reloadItems(page);
});
filterDialog.show();
});
}
function showSortMenu(page) {
var sortFields = getPageData().sortFields;
@ -213,15 +232,6 @@
function updateFilterControls(page) {
var query = getQuery();
$('.chkStandardFilter', page).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
});
$('.alphabetPicker', page).alphaValue(query.NameStartsWith);
}
@ -229,24 +239,6 @@
var page = this;
$('.chkStandardFilter', this).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(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
var query = getQuery();

View file

@ -30,12 +30,9 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false
}));
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
@ -66,39 +63,7 @@
});
}
function updateFilterControls(page) {
$('#selectPageSize', page).val(query.Limit);
}
$(document).on('pageinit', "#gameGenresPage", function () {
var page = this;
$('.chkStandardFilter', this).on('change', function () {
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(page);
});
$('#selectPageSize', page).on('change', function () {
query.Limit = parseInt(this.value);
query.StartIndex = 0;
reloadItems(page);
});
}).on('pagebeforeshow', "#gameGenresPage", function () {
$(document).on('pagebeforeshow', "#gameGenresPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -113,8 +78,6 @@
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
reloadItems(this);
updateFilterControls(this);
});
})(jQuery, document);

View file

@ -31,12 +31,9 @@
startIndex: query.StartIndex,
limit: query.Limit,
totalRecordCount: result.TotalRecordCount,
viewButton: true,
showLimit: false
}));
updateFilterControls(page);
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
@ -45,7 +42,6 @@
showItemCounts: true,
centerText: true,
lazy: true
});
var elem = page.querySelector('#items');
@ -68,39 +64,7 @@
});
}
function updateFilterControls(page) {
$('#selectPageSize', page).val(query.Limit);
}
$(document).on('pageinit', "#gameStudiosPage", function () {
var page = this;
$('.chkStandardFilter', this).on('change', function () {
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(page);
});
$('#selectPageSize', page).on('change', function () {
query.Limit = parseInt(this.value);
query.StartIndex = 0;
reloadItems(page);
});
}).on('pagebeforeshow', "#gameStudiosPage", function () {
$(document).on('pagebeforeshow', "#gameStudiosPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -115,8 +79,6 @@
LibraryBrowser.loadSavedQueryValues(getSavedQueryKey(), query);
reloadItems(this);
updateFilterControls(this);
});
})(jQuery, document);

View file

@ -2821,7 +2821,7 @@
html += '</span>';
}
if (showControls || options.viewButton || options.sortButton || options.addLayoutButton) {
if (showControls || options.viewButton || options.filterButton || options.sortButton || options.addLayoutButton) {
html += '<div style="display:inline-block;margin-left:10px;">';
@ -2849,6 +2849,11 @@
html += '<paper-icon-button title="' + title + '" icon="' + (options.viewIcon || AppInfo.moreIcon) + '" onclick="LibraryBrowser.openViewPanel(this, \'' + viewPanelClass + '\');"></paper-icon-button>';
}
if (options.filterButton) {
html += '<paper-icon-button class="btnFilter" title="' + Globalize.translate('ButtonFilter') + '" icon="filter-list"></paper-icon-button>';
}
html += '</div>';
if (showControls && options.showLimit) {

View file

@ -652,7 +652,7 @@
self.createStreamInfo = function (type, item, mediaSource, startPosition) {
var deferred = $.Deferred();
return new Promise(function (resolve, reject) {
var mediaUrl;
var contentType;
@ -779,16 +779,15 @@
resultInfo.url = path;
console.log('LocalAssetManager.translateFilePath: path: ' + resultInfo.url + ' result: ' + path);
deferred.resolveWith(null, [resultInfo]);
resolve(resultInfo);
});
});
}
else {
deferred.resolveWith(null, [resultInfo]);
resolve(resultInfo);
}
return deferred.promise();
});
};
self.lastBitrateDetections = {};

View file

@ -2142,8 +2142,6 @@ var AppInfo = {};
deps.push('scripts/mediacontroller');
deps.push('scripts/globalize');
deps.push('jQuery');
deps.push('paper-drawer-panel');
require(deps, function (events) {
@ -2197,26 +2195,14 @@ var AppInfo = {};
MediaBrowser[i] = connectionManagerExports[i];
}
// TODO: This needs to be deprecated, but it's used heavily
$.fn.checked = function (value) {
if (value === true || value === false) {
// Set the value of the checkbox
return $(this).each(function () {
this.checked = value;
});
} else {
// Return check state
return this.length && this[0].checked;
}
};
var promises = [];
deps = [];
deps.push('scripts/mediaplayer');
deps.push('emby-icons');
deps.push('paper-icon-button');
deps.push('paper-button');
deps.push('jqm');
deps.push('jQuery');
promises.push(getRequirePromise(deps));
promises.push(Globalize.ensure());
@ -2256,6 +2242,19 @@ var AppInfo = {};
require(depends, function () {
// TODO: This needs to be deprecated, but it's used heavily
$.fn.checked = function (value) {
if (value === true || value === false) {
// Set the value of the checkbox
return $(this).each(function () {
this.checked = value;
});
} else {
// Return check state
return this.length && this[0].checked;
}
};
// Don't like having to use jQuery here, but it takes care of making sure that embedded script executes
$(mainDrawerPanelContent).html(Globalize.translateDocument(newHtml, 'html'));
onAppReady();
@ -2317,6 +2316,7 @@ var AppInfo = {};
deps.push('scripts/backdrops');
deps.push('scripts/librarymenu');
deps.push('scripts/librarybrowser');
deps.push('jqm');
deps.push('css!css/card.css');

View file

@ -1,8 +1,4 @@
(function () {
if (jQuery.widget) {
return;
}
define(['jqm'], function () {
/*!
* jQuery UI Widget c0ab71056b936627e8a7821f03c044aec6280a40
@ -498,7 +494,7 @@
(function ($, undefined) {
var originalWidget = $.widget
var originalWidget = $.widget;
$.widget = (function (orig) {
return function () {
@ -519,5 +515,4 @@
})(jQuery);
})();
});