added an alphabet picker to some screens

dashboard-ui/boxsets.html

@@ -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">

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) {
+}

dashboard-ui/css/tileitem.css

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

dashboard-ui/games.html

@@ -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">

dashboard-ui/movies.html

@@ -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">

dashboard-ui/movietrailers.html

@@ -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">

dashboard-ui/musicalbums.html

@@ -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">

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);

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);

dashboard-ui/scripts/librarybrowser.js

@@ -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);

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");
 

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);

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);

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);

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);

dashboard-ui/tvshows.html

@@ -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">