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

added an alphabet picker to some screens

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-16 15:00:42 -04:00
parent a46c0b8a2d
commit 3e88762620
16 changed files with 271 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/boxsets.html
View file

@ -16,6 +16,8 @@
<a href="moviestudios.html">Studios</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">

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

@ -426,8 +426,6 @@ a.itemTag:hover {
}
@media all and (min-width: 1200px) {
}
@media all and (min-width: 650px) {
@ -677,3 +675,72 @@ a.itemTag:hover {
.timelineHeader {
margin-bottom: .25em;
}
.alphabetPicker {
position: fixed;
right: 0;
bottom: 0;
top: 100px;
width: 25px;
z-index: 1000;
text-align: center;
font-size: 13px;
display: none;
line-height: 1;
}
.alphabetPicker a {
display: block;
text-decoration: none;
padding: 1px 0;
color: #eee!important;
}
.alphabetPicker a:hover:not(.selectedCharacter) {
background: #666!important;
color: #fff!important;
}
.selectedCharacter {
color: #fff!important;
background: #4d90fe;
}
@media all and (min-height: 500px) {
.alphabetPicker {
display: block;
}
.itemsContainerWithAlphaPicker {
margin-right: 25px;
}
}
@media all and (min-height: 600px) {
.alphabetPicker a {
padding: 2px 0;
}
}
@media all and (min-height: 720px) {
.alphabetPicker {
top: 135px;
}
.alphabetPicker a {
padding: 4px 0;
}
}
@media all and (min-height: 850px) {
.alphabetPicker a {
padding: 6px 0;
}
}
@media all and (min-height: 1000px) {
}

2
dashboard-ui/css/tileitem.css
View file

@ -176,7 +176,7 @@
}
.posterTileItem {
width: 31%;
width: 30.5%;
}
.tileItem p {

2
dashboard-ui/games.html
View file

@ -12,6 +12,8 @@
<a href="gamegenres.html">Genres</a>
<a href="gamestudios.html">Studios</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">

2
dashboard-ui/movies.html
View file

@ -16,6 +16,8 @@
<a href="moviestudios.html">Studios</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">

2
dashboard-ui/movietrailers.html
View file

@ -16,6 +16,8 @@
<a href="moviestudios.html">Studios</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">

2
dashboard-ui/musicalbums.html
View file

@ -12,6 +12,8 @@
<a href="musicartists.html">Artists</a>
<a href="musicgenres.html">Genres</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">

15
dashboard-ui/scripts/boxsets.js
View file

@ -111,6 +111,19 @@
reloadItems(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#boxsetsPage", function () {
var limit = LibraryBrowser.getDefaultPageSize();
@ -150,6 +163,8 @@
$('#chkTrailer', this).checked(query.HasTrailer == true).checkboxradio('refresh');
$('#chkThemeSong', this).checked(query.HasThemeSong == true).checkboxradio('refresh');
$('#chkThemeVideo', this).checked(query.HasThemeVideo == true).checkboxradio('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

15
dashboard-ui/scripts/gamespage.js
View file

@ -152,6 +152,19 @@
reloadItems(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#gamesPage", function () {
var limit = LibraryBrowser.getDefaultPageSize();
@ -195,6 +208,8 @@
$('#chkTrailer', this).checked(query.HasTrailer == true).checkboxradio('refresh');
$('#chkThemeSong', this).checked(query.HasThemeSong == true).checkboxradio('refresh');
$('#chkThemeVideo', this).checked(query.HasThemeVideo == true).checkboxradio('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

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

@ -1727,3 +1727,97 @@
});
})(window, document, jQuery);
(function (window, document, $) {
function getPickerHtml() {
var html = '';
html += '<a href="#">#</a>';
html += '<a href="#">A</a>';
html += '<a href="#">B</a>';
html += '<a href="#">C</a>';
html += '<a href="#">D</a>';
html += '<a href="#">E</a>';
html += '<a href="#">F</a>';
html += '<a href="#">G</a>';
html += '<a href="#">H</a>';
html += '<a href="#">I</a>';
html += '<a href="#">J</a>';
html += '<a href="#">K</a>';
html += '<a href="#">L</a>';
html += '<a href="#">M</a>';
html += '<a href="#">N</a>';
html += '<a href="#">O</a>';
html += '<a href="#">P</a>';
html += '<a href="#">Q</a>';
html += '<a href="#">R</a>';
html += '<a href="#">S</a>';
html += '<a href="#">T</a>';
html += '<a href="#">U</a>';
html += '<a href="#">V</a>';
html += '<a href="#">W</a>';
html += '<a href="#">X</a>';
html += '<a href="#">Y</a>';
html += '<a href="#">Z</a>';
return html;
}
$(document).on('pageinit', ".libraryPage", function () {
var page = this;
var picker = $('.alphabetPicker', page);
if (!picker.length) {
return;
}
$('.itemsContainer', page).addClass('itemsContainerWithAlphaPicker');
picker.html(getPickerHtml()).trigger('create').on('click', 'a', function () {
var elem = $(this);
var isSelected = elem.hasClass('selectedCharacter');
$('.selectedCharacter', picker).removeClass('selectedCharacter');
if (!isSelected) {
elem.addClass('selectedCharacter');
picker.trigger('alphaselect', [this.innerHTML]);
} else {
picker.trigger('alphaclear');
}
});
});
$.fn.alphaValue = function (val) {
if (val == null) {
return $('.selectedCharacter', this).html();
}
val = val.toLowerCase();
$('.selectedCharacter', this).removeClass('selectedCharacter');
$('a', this).each(function () {
if (this.innerHTML.toLowerCase() == val) {
$(this).addClass('selectedCharacter');
} else {
$(this).removeClass('selectedCharacter');
}
});
return this;
};
})(window, document, jQuery);

2
dashboard-ui/scripts/medialibrarypage.js
View file

@ -130,7 +130,7 @@
addVirtualFolder: function () {
MediaLibraryPage.getTextValue("Add Media Collection", "Name:", "", function (name) {
MediaLibraryPage.getTextValue("Add Media Collection", "Name (Movies, Music, TV, etc):", "", function (name) {
var userId = getParameterByName("userId");

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

@ -194,6 +194,18 @@
reloadItems(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#moviesPage", function () {
@ -250,6 +262,8 @@
$('#chkThemeSong', this).checked(query.HasThemeSong == true).checkboxradio('refresh');
$('#chkThemeVideo', this).checked(query.HasThemeVideo == true).checkboxradio('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

15
dashboard-ui/scripts/movietrailers.js
View file

@ -106,6 +106,19 @@
reloadItems(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#movieTrailersPage", function () {
var limit = LibraryBrowser.getDefaultPageSize();
@ -144,6 +157,8 @@
}).checkboxradio('refresh');
$('#selectView', this).val(view).selectmenu('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

15
dashboard-ui/scripts/musicalbums.js
View file

@ -118,6 +118,19 @@
}
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#musicAlbumsPage", function () {
var limit = LibraryBrowser.getDefaultPageSize();
@ -146,6 +159,8 @@
this.checked = query.SortOrder == this.getAttribute('data-sortorder');
}).checkboxradio('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

15
dashboard-ui/scripts/tvshows.js
View file

@ -179,6 +179,19 @@
reloadItems(page);
});
$('.alphabetPicker', this).on('alphaselect', function (e, character) {
query.NameStartsWith = character;
reloadItems(page);
}).on('alphaclear', function (e) {
query.NameStartsWith = '';
reloadItems(page);
});
}).on('pagebeforeshow', "#tvShowsPage", function () {
var limit = LibraryBrowser.getDefaultPageSize();
@ -238,6 +251,8 @@
$('#chkTrailer', this).checked(query.HasTrailer == true).checkboxradio('refresh');
$('#chkThemeSong', this).checked(query.HasThemeSong == true).checkboxradio('refresh');
$('#chkThemeVideo', this).checked(query.HasThemeVideo == true).checkboxradio('refresh');
$('.alphabetPicker', this).alphaValue(query.NameStartsWith);
});
})(jQuery, document);

2
dashboard-ui/tvshows.html
View file

@ -13,6 +13,8 @@
<a href="tvpeople.html">Actors</a>
<a href="tvstudios.html">Networks</a>
</div>
<div class="alphabetPicker">
</div>
<div data-role="content">
<div class="viewSettings">
<div class="viewControls">