mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fixes #506 - Song list - make columns headers clickable for sorting
This commit is contained in:
Luke Pulverenti
parent
b7d236b9e4
commit
029f458651
5 changed files with 133 additions and 35 deletions
|
|
@ -90,4 +90,9 @@
|
|||
return this;
|
||||
};
|
||||
|
||||
$.fn.alphaClear = function (val) {
|
||||
|
||||
return this.alphaValue('');
|
||||
};
|
||||
|
||||
})(window, document, jQuery);
|
||||
|
|
@ -236,6 +236,35 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getSongHeaderCellHtml: function (text, cssClass, enableSorting, sortField, selectedSortField, sortDirection) {
|
||||
|
||||
var html = cssClass ? '<th class="' + cssClass + '">' : '<th>';
|
||||
|
||||
if (text && enableSorting) {
|
||||
html += '<a class="lnkColumnSort" data-sortfield="' + sortField + '" href="#" style="text-decoration:underline;">';
|
||||
}
|
||||
|
||||
html += text;
|
||||
|
||||
if (text && enableSorting) {
|
||||
|
||||
html += '</a>';
|
||||
|
||||
if (sortField == selectedSortField) {
|
||||
|
||||
if (sortDirection == "Descending") {
|
||||
html += '<span style="font-weight:bold;margin-left:3px;">↓</span>';
|
||||
} else {
|
||||
html += '<span style="font-weight:bold;margin-left:3px;">↑</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html += '</th>';
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
getSongTableHtml: function (items, options) {
|
||||
|
||||
options = options || {};
|
||||
|
|
@ -248,24 +277,21 @@
|
|||
|
||||
html += '<tr>';
|
||||
|
||||
html += '<th></th>';
|
||||
html += '<th></th>';
|
||||
|
||||
html += '<th>Track</th>';
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Track', '', options.enableColumnSorting, 'Name', options.sortBy, options.sortOrder);
|
||||
|
||||
if (options.showAlbum) {
|
||||
html += '<th>Album</th>';
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Album', '', options.enableColumnSorting, 'Album,SortName', options.sortBy, options.sortOrder);
|
||||
}
|
||||
if (options.showArtist) {
|
||||
html += '<th>Album Artist</th>';
|
||||
}
|
||||
if (options.showArtist) {
|
||||
html += '<th>Artist</th>';
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Album Artist', '', options.enableColumnSorting, 'AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Artist', '', options.enableColumnSorting, 'Artist,Album,SortName', options.sortBy, options.sortOrder);
|
||||
}
|
||||
|
||||
html += '<th class="tabletColumn">Runtime</th>';
|
||||
html += '<th class="tabletColumn">Play Count</th>';
|
||||
html += '<th class="tabletColumn userDataCell"></th>';
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Runtime', 'tabletColumn', options.enableColumnSorting, 'Runtime,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('Play Count', 'tabletColumn', options.enableColumnSorting, 'PlayCount,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
|
||||
html += LibraryBrowser.getSongHeaderCellHtml('', 'tabletColumn userDataCell', options.enableColumnSorting);
|
||||
|
||||
html += '</tr>';
|
||||
|
||||
|
|
|
|||
|
|
@ -77,19 +77,31 @@
|
|||
|
||||
var page = this;
|
||||
|
||||
$('.radioSortBy', this).on('click', function () {
|
||||
$('.radioSortBy', page).on('click', function () {
|
||||
query.SortBy = this.getAttribute('data-sortby');
|
||||
query.StartIndex = 0;
|
||||
|
||||
// Clear this
|
||||
$('.alphabetPicker', page).alphaClear();
|
||||
query.NameStartsWithOrGreater = '';
|
||||
query.AlbumArtistStartsWithOrGreater = '';
|
||||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.radioSortOrder', this).on('click', function () {
|
||||
$('.radioSortOrder', page).on('click', function () {
|
||||
query.SortOrder = this.getAttribute('data-sortorder');
|
||||
query.StartIndex = 0;
|
||||
|
||||
// Clear this
|
||||
$('.alphabetPicker', page).alphaClear();
|
||||
query.NameStartsWithOrGreater = '';
|
||||
query.AlbumArtistStartsWithOrGreater = '';
|
||||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.chkStandardFilter', this).on('change', function () {
|
||||
$('.chkStandardFilter', page).on('change', function () {
|
||||
|
||||
var filterName = this.getAttribute('data-filter');
|
||||
var filters = query.Filters || "";
|
||||
|
|
@ -106,7 +118,7 @@
|
|||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('#selectView', this).on('change', function () {
|
||||
$('#selectView', page).on('change', function () {
|
||||
|
||||
view = this.value;
|
||||
|
||||
|
|
@ -121,9 +133,16 @@
|
|||
}
|
||||
});
|
||||
|
||||
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
|
||||
$('.alphabetPicker', page).on('alphaselect', function (e, character) {
|
||||
|
||||
if (query.SortBy.indexOf('AlbumArtist') == -1) {
|
||||
query.NameStartsWithOrGreater = character;
|
||||
query.AlbumArtistStartsWithOrGreater = '';
|
||||
} else {
|
||||
query.AlbumArtistStartsWithOrGreater = character;
|
||||
query.NameStartsWithOrGreater = '';
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
|
||||
reloadItems(page);
|
||||
|
|
@ -131,6 +150,7 @@
|
|||
}).on('alphaclear', function (e) {
|
||||
|
||||
query.NameStartsWithOrGreater = '';
|
||||
query.AlbumArtistStartsWithOrGreater = '';
|
||||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
(function ($, document) {
|
||||
|
||||
var defaultSortBy = "Album,SortName";
|
||||
|
||||
// The base query options
|
||||
var query = {
|
||||
|
||||
SortBy: "Album,SortName",
|
||||
SortBy: defaultSortBy,
|
||||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Recursive: true,
|
||||
|
|
@ -12,6 +14,22 @@
|
|||
StartIndex: 0
|
||||
};
|
||||
|
||||
function updateFilterControls(page) {
|
||||
|
||||
// Reset form values using the last used query
|
||||
$('.radioSortBy', page).each(function () {
|
||||
|
||||
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
|
||||
$('.radioSortOrder', page).each(function () {
|
||||
|
||||
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
|
@ -27,7 +45,10 @@
|
|||
|
||||
html += LibraryBrowser.getSongTableHtml(result.Items, {
|
||||
showAlbum: true,
|
||||
showArtist: true
|
||||
showArtist: true,
|
||||
enableColumnSorting: true,
|
||||
sortBy: query.SortBy,
|
||||
sortOrder: query.SortOrder
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
@ -55,7 +76,37 @@
|
|||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('.lnkColumnSort', page).on('click', function () {
|
||||
|
||||
var order = this.getAttribute('data-sortfield');
|
||||
|
||||
if (query.SortBy == order) {
|
||||
|
||||
if (query.SortOrder == "Descending") {
|
||||
|
||||
query.SortOrder = "Ascending";
|
||||
query.SortBy = defaultSortBy;
|
||||
|
||||
} else {
|
||||
|
||||
query.SortOrder = "Descending";
|
||||
query.SortBy = order;
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
query.SortOrder = "Ascending";
|
||||
query.SortBy = order;
|
||||
}
|
||||
|
||||
query.StartIndex = 0;
|
||||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
$(page).trigger('itemsreloaded');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -98,18 +149,11 @@
|
|||
|
||||
}).on('pageshow', "#songsPage", function () {
|
||||
|
||||
// Reset form values using the last used query
|
||||
$('.radioSortBy', this).each(function () {
|
||||
updateFilterControls(this);
|
||||
|
||||
this.checked = query.SortBy == this.getAttribute('data-sortby');
|
||||
}).on('itemsreloaded', "#songsPage", function () {
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
|
||||
$('.radioSortOrder', this).each(function () {
|
||||
|
||||
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
|
||||
|
||||
}).checkboxradio('refresh');
|
||||
updateFilterControls(this);
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
||||
|
|
@ -32,6 +32,9 @@
|
|||
<strong>Sort By:</strong>
|
||||
</legend>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioName" value="on" checked="checked" data-sortby="Name" data-mini="true">
|
||||
<label for="radioName">Track Name</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioAlbum" value="on" checked="checked" data-sortby="Album,SortName" data-mini="true">
|
||||
<label for="radioAlbum">Album</label>
|
||||
|
||||
|
|
@ -41,19 +44,19 @@
|
|||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioArtist" value="on" data-sortby="Artist,Album,SortName" data-mini="true">
|
||||
<label for="radioArtist">Artist</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,Artist,Album,SortName" data-mini="true">
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,AlbumArtist,Album,SortName" 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,Artist,Album,SortName" data-mini="true">
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,AlbumArtist,Album,SortName" 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,Artist,Album,SortName" data-mini="true">
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,AlbumArtist,Album,SortName" data-mini="true">
|
||||
<label for="radioPremiereDate">Date Released</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,Artist,Album,SortName" data-mini="true">
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,AlbumArtist,Album,SortName" data-mini="true">
|
||||
<label for="radioPlayCount">Play Count</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime,AlbumArtist,Album,SortName" data-mini="true">
|
||||
<label for="radioRuntime">Runtime</label>
|
||||
</fieldset>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue