diff --git a/dashboard-ui/boxsets.html b/dashboard-ui/boxsets.html index 1b78f6cf1b..648aa68aba 100644 --- a/dashboard-ui/boxsets.html +++ b/dashboard-ui/boxsets.html @@ -16,6 +16,8 @@ Studios +
+
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index c31c3ddb36..73728f8549 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -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) { +} diff --git a/dashboard-ui/css/tileitem.css b/dashboard-ui/css/tileitem.css index 2bc6b8681e..9b8ad2d579 100644 --- a/dashboard-ui/css/tileitem.css +++ b/dashboard-ui/css/tileitem.css @@ -176,7 +176,7 @@ } .posterTileItem { - width: 31%; + width: 30.5%; } .tileItem p { diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html index ac0b4dfe35..34a8d0787b 100644 --- a/dashboard-ui/games.html +++ b/dashboard-ui/games.html @@ -12,6 +12,8 @@ Genres Studios
+
+
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index ae83682bee..91d203b959 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -16,6 +16,8 @@ Studios
+
+
diff --git a/dashboard-ui/movietrailers.html b/dashboard-ui/movietrailers.html index bd2671dffc..a115628373 100644 --- a/dashboard-ui/movietrailers.html +++ b/dashboard-ui/movietrailers.html @@ -16,6 +16,8 @@ Studios
+
+
diff --git a/dashboard-ui/musicalbums.html b/dashboard-ui/musicalbums.html index eeb5807e06..41f79a9737 100644 --- a/dashboard-ui/musicalbums.html +++ b/dashboard-ui/musicalbums.html @@ -12,6 +12,8 @@ Artists Genres
+
+
diff --git a/dashboard-ui/scripts/boxsets.js b/dashboard-ui/scripts/boxsets.js index 28c47f3dc6..31549e9c16 100644 --- a/dashboard-ui/scripts/boxsets.js +++ b/dashboard-ui/scripts/boxsets.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamespage.js b/dashboard-ui/scripts/gamespage.js index bde9a20713..cc3a1a2a85 100644 --- a/dashboard-ui/scripts/gamespage.js +++ b/dashboard-ui/scripts/gamespage.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 9b947694a4..0474fa2bb6 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -7,11 +7,11 @@ getDefaultPageSize: function () { var saved = localStorage.getItem('pagesize'); - + if (saved) { return parseInt(saved); } - + if (window.location.toString().toLowerCase().indexOf('localhost') != -1) { return 100; } @@ -777,7 +777,7 @@ if (query.Limit) { localStorage.setItem('pagesize', query.Limit); } - + var html = ''; var pageCount = Math.ceil(totalRecordCount / query.Limit); @@ -1467,7 +1467,7 @@ if (item.BackdropImageTags && item.BackdropImageTags.length) { imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, { - maxwidth: screenWidth + maxwidth: screenWidth }); $('#itemBackdrop', page).removeClass('noBackdrop').css('background-image', 'url("' + imgUrl + '")'); @@ -1608,7 +1608,7 @@ var screenWidth = Math.max(screen.height, screen.width); screenWidth = Math.min(screenWidth, 1280); - + var html = ''; if (typeof (index) == "undefined") index = 0; @@ -1726,4 +1726,98 @@ } }); +})(window, document, jQuery); + +(function (window, document, $) { + + function getPickerHtml() { + + var html = ''; + + html += '#'; + html += 'A'; + html += 'B'; + html += 'C'; + html += 'D'; + html += 'E'; + html += 'F'; + html += 'G'; + html += 'H'; + html += 'I'; + html += 'J'; + html += 'K'; + html += 'L'; + html += 'M'; + html += 'N'; + html += 'O'; + html += 'P'; + html += 'Q'; + html += 'R'; + html += 'S'; + html += 'T'; + html += 'U'; + html += 'V'; + html += 'W'; + html += 'X'; + html += 'Y'; + html += 'Z'; + + 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); \ No newline at end of file diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js index f98e4071cf..66183f2cb1 100644 --- a/dashboard-ui/scripts/medialibrarypage.js +++ b/dashboard-ui/scripts/medialibrarypage.js @@ -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"); diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 555e43c342..fbbdc15bdb 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js index be165c99a6..0425f592b8 100644 --- a/dashboard-ui/scripts/movietrailers.js +++ b/dashboard-ui/scripts/movietrailers.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js index 0a2a235dd5..e02d0a2ec2 100644 --- a/dashboard-ui/scripts/musicalbums.js +++ b/dashboard-ui/scripts/musicalbums.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js index 5c2a5172b7..70a214803c 100644 --- a/dashboard-ui/scripts/tvshows.js +++ b/dashboard-ui/scripts/tvshows.js @@ -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); \ No newline at end of file diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html index 049ffca5f6..980508aad8 100644 --- a/dashboard-ui/tvshows.html +++ b/dashboard-ui/tvshows.html @@ -13,6 +13,8 @@ Actors Networks
+
+