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

add filters to folder browsing

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-18 22:52:22 -04:00
parent 8d53d9508c
commit 6ac9b1bd2a
9 changed files with 192 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dashboard-ui/css/librarybrowser.css
View file

@ -125,6 +125,9 @@
.itemMiscInfo {
color: #ddd;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mediaInfoStream {
@ -210,6 +213,7 @@
color: #fff;
text-align: left;
vertical-align: top;
overflow: hidden;
}
.posterDetailViewName {

76
dashboard-ui/itemlist.html
View file

@ -8,8 +8,84 @@
<div data-role="content" class="itemListContent">
<h1 id="itemName" class="listHeader" style="margin-top: .5em;"></h1>
<div class="viewSettings">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Backdrop">Backdrop</option>
<option value="Poster">Poster</option>
</select>
</div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
</div>
<div id="items"></div>
</div>
<div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
<form>
<fieldset data-role="controlgroup">
<legend>
<strong>Sort By:</strong>
</legend>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
<label for="radioSortName">Name</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
<label for="radioCommunityRating">Community Rating</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
<label for="radioDateCreated">Date Added</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed" data-mini="true">
<label for="radioDatePlayed">Date Played</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
<label for="radioPremiereDate">Date Released</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
<label for="radioRuntime">Runtime</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>
<strong>Sort Order:</strong>
</legend>
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
<label for="radioAscending">Ascending</label>
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
<label for="radioDescending">Descending</label>
</fieldset>
</form>
</div>
<div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
<form>
<fieldset data-role="controlgroup">
<legend>
<strong>Filters:</strong>
</legend>
<input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed" data-mini="true">
<label for="chkPlayed">Watched</label>
<input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed" data-mini="true">
<label for="chkUnplayed">Unwatched</label>
<input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable" data-mini="true">
<label for="chkResumable">Resumable</label>
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite" data-mini="true">
<label for="chkIsFavorite">Favorite</label>
<input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes" data-mini="true">
<label for="chkLikes">Likes</label>
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes" data-mini="true">
<label for="chkDislikes">Dislikes</label>
</fieldset>
</form>
</div>
</div>
</body>
</html>

75
dashboard-ui/scripts/itemlistpage.js
View file

@ -1,5 +1,7 @@
(function ($, document) {
var view = "Poster";
// The base query options
var query = {
@ -26,10 +28,19 @@
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
}
if (view == "Backdrop") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true,
preferBackdrop: true
});
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
});
}
if (showPaging) {
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -64,12 +75,76 @@
$(document).on('pageinit', "#itemListPage", function () {
var page = this;
$('.radioSortBy', this).on('click', function () {
query.StartIndex = 0;
query.SortBy = this.getAttribute('data-sortby');
reloadItems(page);
});
$('.radioSortOrder', this).on('click', function () {
query.StartIndex = 0;
query.SortOrder = this.getAttribute('data-sortorder');
reloadItems(page);
});
$('.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);
});
$('#selectView', this).on('change', function () {
view = this.value;
reloadItems(page);
});
}).on('pageshow', "#itemListPage", function () {
query.ParentId = getParameterByName('parentId');
query.Filters = "";
query.SortBy = "SortName";
query.SortOrder = "Ascending";
reloadItems(this);
// Reset form values using the last used query
$('.radioSortBy', this).each(function () {
this.checked = query.SortBy == this.getAttribute('data-sortby');
}).checkboxradio('refresh');
$('.radioSortOrder', this).each(function () {
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
}).checkboxradio('refresh');
$('.chkStandardFilter', this).each(function () {
var filters = "," + (query.Filters || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
}).checkboxradio('refresh');
$('#selectView', this).val(view).selectmenu('refresh');
});
})(jQuery, document);

14
dashboard-ui/scripts/librarybrowser.js
View file

@ -125,7 +125,7 @@
html += '<p class="itemMiscInfo">' + childText + '</p>';
}
else {
html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item, false) + '</p>';
html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
}
html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
@ -836,13 +836,18 @@
return html;
},
getMiscInfoHtml: function (item, includeMediaInfo) {
getMiscInfoHtml: function (item) {
var miscInfo = [];
if (item.ProductionYear) {
if (item.Status == "Continuing") {
miscInfo.push(item.ProductionYear + "-Present");
} else {
miscInfo.push(item.ProductionYear);
}
}
if (item.OfficialRating) {
miscInfo.push(item.OfficialRating);
@ -857,16 +862,13 @@
miscInfo.push(parseInt(minutes) + "min");
}
if (includeMediaInfo !== false) {
if (item.DisplayMediaType) {
if (item.MediaType && item.DisplayMediaType) {
miscInfo.push(item.DisplayMediaType);
}
if (item.VideoFormat && item.VideoFormat !== 'Standard') {
miscInfo.push(item.VideoFormat);
}
}
return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
},

9
dashboard-ui/scripts/moviepeople.js
View file

@ -127,6 +127,15 @@
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
}).checkboxradio('refresh');
$('.chkPersonTypeFilter', this).each(function () {
var filters = "," + (query.PersonTypes || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
}).checkboxradio('refresh');
});
})(jQuery, document);

1
dashboard-ui/scripts/movies.js
View file

@ -139,7 +139,6 @@
}).on('pageshow', "#moviesPage", function () {
// Reset form values using the last used query
$('.radioSortBy', this).each(function () {

9
dashboard-ui/scripts/tvpeople.js
View file

@ -136,6 +136,15 @@
this.checked = filters.indexOf(',' + filterName) != -1;
}).checkboxradio('refresh');
$('.chkPersonTypeFilter', this).each(function () {
var filters = "," + (query.PersonTypes || "");
var filterName = this.getAttribute('data-filter');
this.checked = filters.indexOf(',' + filterName) != -1;
}).checkboxradio('refresh');
});
})(jQuery, document);

1
dashboard-ui/scripts/tvseries.js
View file

@ -69,6 +69,7 @@
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderPremiereDate($('#itemPremiereDate', page), item);
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
renderUserDataIcons(page, item);

2
dashboard-ui/tvseries.html
View file

@ -35,7 +35,7 @@
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemPremiereDate"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>