mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-15 18:08:17 -07:00
Added filters to the item list page
This commit is contained in:
Luke Pulverenti
parent
a42f547c00
commit
70187c1434
@ -91,6 +91,10 @@ pre, textarea.pre {
|
||||
background-attachment: fixed!important;
|
||||
}
|
||||
|
||||
.ui-btn-icon-notext .ui-btn-inner .ui-icon {
|
||||
margin: -10px -9px 0 0!important;
|
||||
}
|
||||
|
||||
/*
|
||||
Header
|
||||
*/
|
||||
@ -756,9 +760,9 @@ progress {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imgUserItemRating:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
.imgUserItemRating:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
.itemImageBlock {
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
<body>
|
||||
<div id="indexPage" data-role="page" class="page type-home libraryPage" data-theme="a">
|
||||
<div data-role="content">
|
||||
<h1>What's New <a href="#" class="imageLink">
|
||||
<h1>What's New <a href="itemlist.html?IsRecentlyAdded=true&Recursive=true&Title=Recently Added Items" class="imageLink">
|
||||
<img src="css/images/rightarrow.png" /></a></h1>
|
||||
|
||||
<div id="divWhatsNew"></div>
|
||||
|
||||
<div id="divResumable" style="display: none;">
|
||||
<h1>Resume <a href="#" class="imageLink">
|
||||
<h1>Resume <a href="itemlist.html?IsResumable=true&Recursive=true&Title=Resumable Items" class="imageLink">
|
||||
<img src="css/images/rightarrow.png" /></a></h1>
|
||||
|
||||
<div id="divResumableItems"></div>
|
||||
|
||||
@ -9,57 +9,99 @@
|
||||
|
||||
|
||||
<h1 class="listHeader" style="margin-top: 0;">
|
||||
|
||||
<span id="itemName"></span>
|
||||
|
||||
<div style="display: inline-block; margin-left: 50px;">
|
||||
<button id="btnOptions" type="button" data-icon="table" data-mini="true" data-inline="true" onclick="$('#optionsPanel', $.mobile.activePage).panel( 'toggle' );">Change View</button>
|
||||
</div>
|
||||
<span id="itemName" style="margin-right: 30px;"></span>
|
||||
</h1>
|
||||
<div style="float: right; margin-top: -60px;">
|
||||
<button id="btnOptions" type="button" data-mini="true" data-inline="true" data-icon="grid" onclick="$('#optionsPanel', $.mobile.activePage).panel( 'toggle' );">View</button>
|
||||
</div>
|
||||
|
||||
<div id="listItems"></div>
|
||||
<div id="listItems" style="clear: both;"></div>
|
||||
|
||||
<div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a id="btnViewPanel" href="#" data-role="button" data-theme="a" data-mini="true" onclick="ItemListPage.showViewPanel();">View</a>
|
||||
<a id="btnSortPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showSortPanel();">Sort</a>
|
||||
<a id="btnFilterPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showFilterPanel();">Filter</a>
|
||||
<a id="btnIndexPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showIndexPanel();">Index</a>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort By:</h3>
|
||||
</legend>
|
||||
<div id="viewpanel" style="display: none;"></div>
|
||||
<div id="sortpanel" style="display: none;">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort By:</h3>
|
||||
</legend>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radio-choice-v-2a" value="on" checked="checked">
|
||||
<label for="radio-choice-v-2a" onclick="ItemListPage.sortBy('SortName');">Name</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioName" value="on" checked="checked">
|
||||
<label for="radioName" onclick="ItemListPage.sortBy('SortName');">Name</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="other">
|
||||
<label for="radioCommunityRating" onclick="ItemListPage.sortBy('CommunityRating');">Community Rating</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="other">
|
||||
<label for="radioCommunityRating" onclick="ItemListPage.sortBy('CommunityRating');">Community Rating</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radio-choice-v-2c" value="other">
|
||||
<label for="radio-choice-v-2c" onclick="ItemListPage.sortBy('DateCreated');">Date Added</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioDateAdded" value="other">
|
||||
<label for="radioDateAdded" onclick="ItemListPage.sortBy('DateCreated');">Date Added</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="other">
|
||||
<label for="radioDatePlayed" onclick="ItemListPage.sortBy('DatePlayed');">Date Played</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="other">
|
||||
<label for="radioDatePlayed" onclick="ItemListPage.sortBy('DatePlayed');">Date Played</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="other">
|
||||
<label for="radioPremiereDate" onclick="ItemListPage.sortBy('PremiereDate');">Date Released</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="other">
|
||||
<label for="radioPremiereDate" onclick="ItemListPage.sortBy('PremiereDate');">Date Released</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radio-choice-v-2b" value="off">
|
||||
<label for="radio-choice-v-2b" onclick="ItemListPage.sortBy('Random');">Random</label>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off">
|
||||
<label for="radioPlayCount" onclick="ItemListPage.sortBy('PlayCount');">Play Count</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off">
|
||||
<label for="radioRuntime" onclick="ItemListPage.sortBy('Runtime');">Runtime</label>
|
||||
</fieldset>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioRandom" value="off">
|
||||
<label for="radioRandom" onclick="ItemListPage.sortBy('Random');">Random</label>
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort Order:</h3>
|
||||
</legend>
|
||||
<input data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off">
|
||||
<label for="radioRuntime" onclick="ItemListPage.sortBy('Runtime');">Runtime</label>
|
||||
</fieldset>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked">
|
||||
<label for="radioAscending" onclick="ItemListPage.sortOrder('Ascending');">Ascending</label>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort Order:</h3>
|
||||
</legend>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked">
|
||||
<label for="radioAscending" onclick="ItemListPage.sortOrder('Ascending');">Ascending</label>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="other">
|
||||
<label for="radioDescending" onclick="ItemListPage.sortOrder('Descending');">Descending</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="filterpanel" style="display: none;">
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Filters:</h3>
|
||||
</legend>
|
||||
<input type="checkbox" name="chkPlayed" id="chkPlayed" onchange="ItemListPage.filter('IsPlayed', this.checked);" data-theme="c">
|
||||
<label for="chkPlayed">Played</label>
|
||||
|
||||
<input type="checkbox" name="chkUnplayed" id="chkUnplayed" onchange="ItemListPage.filter('IsUnplayed', this.checked);" data-theme="c">
|
||||
<label for="chkUnplayed">Unplayed</label>
|
||||
|
||||
<input type="checkbox" name="chkIsFavorite" id="chkIsFavorite" onchange="ItemListPage.filter('IsFavorite', this.checked);" data-theme="c">
|
||||
<label for="chkIsFavorite">Favorites</label>
|
||||
|
||||
<input type="checkbox" name="chkLikes" id="chkLikes" onchange="ItemListPage.filter('Likes', this.checked);" data-theme="c">
|
||||
<label for="chkLikes">Likes</label>
|
||||
|
||||
<input type="checkbox" name="chkDislikes" id="chkDislikes" onchange="ItemListPage.filter('Dislikes', this.checked);" data-theme="c">
|
||||
<label for="chkDislikes">Dislikes</label>
|
||||
|
||||
<input type="checkbox" name="chkRecentlyAdded" id="chkRecentlyAdded" onchange="ItemListPage.filter('IsRecentlyAdded', this.checked);" data-theme="c">
|
||||
<label for="chkRecentlyAdded">Recently added</label>
|
||||
|
||||
<input type="checkbox" name="chkResumable" id="chkResumable" onchange="ItemListPage.filter('IsResumable', this.checked);" data-theme="c">
|
||||
<label for="chkResumable">Resumable</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
<div id="indexpanel" style="display: none;"></div>
|
||||
|
||||
<input data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="other">
|
||||
<label for="radioDescending" onclick="ItemListPage.sortOrder('Descending');">Descending</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -81,7 +81,8 @@
|
||||
IsFolder: true
|
||||
}, {
|
||||
Name: "Favorites",
|
||||
IsFolder: true
|
||||
IsFolder: true,
|
||||
url: "itemlist.html?IsFavorite=true&Recursive=true&Title=Favorites"
|
||||
}, {
|
||||
Name: "Genres",
|
||||
IsFolder: true
|
||||
|
||||
@ -7,19 +7,42 @@
|
||||
|
||||
reload: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
var parentId = getParameterByName('parentId');
|
||||
|
||||
var query = {
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
SortBy: "SortName"
|
||||
SortBy: "SortName",
|
||||
Recursive: getParameterByName('Recursive') == 'true'
|
||||
};
|
||||
|
||||
var filters = [];
|
||||
|
||||
if (getParameterByName('IsResumable') == 'true') {
|
||||
filters.push("IsResumable");
|
||||
$('#chkResumable', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
if (getParameterByName('IsFavorite') == 'true') {
|
||||
filters.push("IsFavorite");
|
||||
$('#chkIsFavorite', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
if (getParameterByName('IsRecentlyAdded') == 'true') {
|
||||
filters.push("IsRecentlyAdded");
|
||||
$('#chkRecentlyAdded', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
query.Filters = filters.join(',');
|
||||
|
||||
if (parentId) {
|
||||
query.parentId = parentId;
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).done(ItemListPage.renderTitle);
|
||||
} else {
|
||||
$('#itemName', $.mobile.activePage).html("Media Library");
|
||||
}
|
||||
else {
|
||||
$('#itemName', page).html(getParameterByName('Title') || "Media Library");
|
||||
}
|
||||
|
||||
ItemListPage.refreshItems(query);
|
||||
@ -27,6 +50,8 @@
|
||||
|
||||
refreshItems: function (query) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
page.itemQuery = query;
|
||||
@ -38,15 +63,20 @@
|
||||
|
||||
var items = result.Items;
|
||||
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
|
||||
var renderOptions = {
|
||||
|
||||
items: items,
|
||||
useAverageAspectRatio: true
|
||||
useAverageAspectRatio: query.Recursive !== true,
|
||||
showTitle: query.Recursive
|
||||
};
|
||||
|
||||
var html = Dashboard.getPosterViewHtml(renderOptions);
|
||||
|
||||
$('#listItems', $.mobile.activePage).html(html);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
},
|
||||
|
||||
renderTitle: function (item) {
|
||||
@ -67,6 +97,84 @@
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
query.SortOrder = order;
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
filter: function(name, add)
|
||||
{
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
var filters = query.Filters || "";
|
||||
|
||||
filters = (',' + filters).replace(',' + name, '').substring(1);
|
||||
|
||||
if (add) {
|
||||
filters = filters ? (filters + ',' + name) : name;
|
||||
}
|
||||
|
||||
query.Filters = filters;
|
||||
|
||||
query.Recursive = filters.length ? true : false;
|
||||
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
showSortPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).show();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showViewPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).show();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showIndexPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).show();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showFilterPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).show();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "a" });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -311,11 +311,11 @@ var Dashboard = {
|
||||
},
|
||||
|
||||
showLoadingMsg: function () {
|
||||
$.mobile.showPageLoadingMsg();
|
||||
$.mobile.loading("show");
|
||||
},
|
||||
|
||||
hideLoadingMsg: function () {
|
||||
$.mobile.hidePageLoadingMsg();
|
||||
$.mobile.loading("hide");
|
||||
},
|
||||
|
||||
processPluginConfigurationUpdateResult: function () {
|
||||
@ -434,7 +434,7 @@ var Dashboard = {
|
||||
|
||||
var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
|
||||
|
||||
var href = item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id;
|
||||
var href = item.url || (item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id);
|
||||
|
||||
var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user