consolidate scripts

dashboard-ui/music.html

@@ -58,29 +58,52 @@
         </div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+        </div>
+
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
+
-            <div class="listTopPaging">
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
         </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+        </div>
+
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
+
-            <div class="listTopPaging">
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
         </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
-            <div class="listTopPaging">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
         </div>
+
+        <div class="alphaPicker alphabetPicker vertical">
+        </div>
+
+        <div class="itemsContainer itemsContainerWithAlphaPicker" style="max-width: 1000px;margin: 0 auto;">
+        </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">

dashboard-ui/scripts/episodes.js

@@ -202,12 +202,13 @@
                 });
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
 
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+            btnSelectView.addEventListener('layoutchange', function (e) {
 
                 var viewStyle = e.detail.viewStyle;
                 getPageData(tabContent).view = viewStyle;

dashboard-ui/scripts/moviecollections.js

@@ -233,12 +233,13 @@
                 });
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
 
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+            btnSelectView.addEventListener('layoutchange', function (e) {
 
                 var viewStyle = e.detail.viewStyle;
 

dashboard-ui/scripts/moviegenres.js

@@ -127,12 +127,13 @@
             reloadItems(tabContent);
         };
 
-        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+        var btnSelectView = tabContent.querySelector('.btnSelectView');
+        btnSelectView.addEventListener('click', function (e) {
 
             LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
-        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+        btnSelectView.addEventListener('layoutchange', function (e) {
 
             self.setCurrentViewStyle(e.detail.viewStyle);
         });

dashboard-ui/scripts/movies.js

@@ -283,12 +283,13 @@
                 });
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
 
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+            btnSelectView.addEventListener('layoutchange', function (e) {
 
                 var viewStyle = e.detail.viewStyle;
 

dashboard-ui/scripts/musicalbums.js

@@ -224,12 +224,13 @@
                 });
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
 
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+            btnSelectView.addEventListener('layoutchange', function (e) {
 
                 var viewStyle = e.detail.viewStyle;
 

dashboard-ui/scripts/musicartists.js

@@ -1,10 +1,11 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
     return function (view, params, tabContent) {
 
         var self = this;
 
         var data = {};
+
         function getPageData(context) {
             var key = getSavedQueryKey(context);
             var pageData = data[key];
@@ -21,11 +22,11 @@
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         Limit: LibraryBrowser.getDefaultPageSize()
                     },
-                    view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
-                pageData.query.ParentId = LibraryMenu.getTopParentId();
+                pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -58,25 +59,23 @@
                 // Scroll back up so they can see the results from the beginning
                 window.scrollTo(0, 0);
 
-                var view = getPageData(page).view;
+                updateFilterControls(page);
 
-                var html = '';
                 var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
                     showLimit: false,
                     updatePageSizeSetting: false,
-                    addLayoutButton: true,
+                    addLayoutButton: false,
-                    currentLayout: view,
+                    sortButton: false,
-                    filterButton: true
+                    filterButton: false
                 });
 
-                page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
 
-                updateFilterControls(page);
+                if (viewStyle == "List") {
-
-                if (view == "List") {
 
                     html = LibraryBrowser.getListViewHtml({
                         items: result.Items,
@@ -84,19 +83,7 @@
                         sortBy: query.SortBy
                     });
                 }
-                else if (view == "Poster") {
+                else if (viewStyle == "PosterCard") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        context: 'music',
-                        showTitle: true,
-                        coverImage: true,
-                        lazy: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
-                }
-                else if (view == "PosterCard") {
 
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
@@ -109,47 +96,69 @@
                         showSongCount: true
                     });
                 }
+                else {
 
-                var elem = page.querySelector('#items');
+                    // Poster
-                elem.innerHTML = html + pagingHtml;
+                    html = LibraryBrowser.getPosterViewHtml({
-                ImageLoader.lazyChildren(elem);
+                        items: result.Items,
+                        shape: "square",
+                        context: 'music',
+                        showTitle: true,
+                        coverImage: true,
+                        lazy: true,
+                        centerText: true,
+                        overlayPlayButton: true
+                    });
+                }
 
-                $('.btnNextPage', page).on('click', function () {
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
+
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
-                    reloadItems(page);
+                    reloadItems(tabContent);
-                });
+                }
 
-                $('.btnPreviousPage', page).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
-                    reloadItems(page);
+                    reloadItems(tabContent);
-                });
+                }
 
-                $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
+                elems = tabContent.querySelectorAll('.btnNextPage');
-                    getPageData(page).view = layout;
+                for (i = 0, length = elems.length; i < length; i++) {
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(page), layout);
+                    elems[i].addEventListener('click', onNextPageClick);
-                    reloadItems(page);
+                }
-                });
 
-                $('.btnFilter', page).on('click', function () {
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
-                    showFilterMenu(page);
+                for (i = 0, length = elems.length; i < length; i++) {
-                });
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
                 Dashboard.hideLoadingMsg();
             });
         }
 
-        function showFilterMenu(page) {
+        self.showFilterMenu = function () {
 
             require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
 
                 var filterDialog = new filterDialogFactory({
-                    query: getQuery(page),
+                    query: getQuery(tabContent),
                     mode: self.mode
                 });
 
                 Events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(page);
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
                 });
 
                 filterDialog.show();
@@ -159,10 +168,11 @@
         function updateFilterControls(tabContent) {
 
             var query = getQuery(tabContent);
-
             self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
+        function initPage(tabContent) {
+
             var alphaPickerElement = tabContent.querySelector('.alphaPicker');
             alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
                 var newValue = e.detail.value;
@@ -177,9 +187,40 @@
                 valueChangeEvent: 'click'
             });
 
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
+
+                libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(','));
+            });
+
+            btnSelectView.addEventListener('layoutchange', function (e) {
+
+                var viewStyle = e.detail.viewStyle;
+
+                getPageData(tabContent).view = viewStyle;
+                libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+                getQuery(tabContent).StartIndex = 0;
+                reloadItems(tabContent);
+            });
+        }
+
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
+
+        initPage(tabContent);
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
+            updateFilterControls(tabContent);
+        };
+
+        self.destroy = function () {
         };
     };
 });

dashboard-ui/scripts/musicgenres.js

@@ -127,12 +127,13 @@
             reloadItems(tabContent);
         };
 
-        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+        var btnSelectView = tabContent.querySelector('.btnSelectView');
+        btnSelectView.addEventListener('click', function (e) {
 
             LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
-        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+        btnSelectView.addEventListener('layoutchange', function (e) {
 
             self.setCurrentViewStyle(e.detail.viewStyle);
         });

dashboard-ui/scripts/songs.js

@@ -1,13 +1,11 @@
-define(['jQuery'], function ($) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
-
 
     return function (view, params, tabContent) {
 
         var self = this;
 
-        var defaultSortBy = "Album,SortName";
-
         var data = {};
+
         function getPageData(context) {
             var key = getSavedQueryKey(context);
             var pageData = data[key];
@@ -15,7 +13,7 @@
             if (!pageData) {
                 pageData = data[key] = {
                     query: {
-                        SortBy: defaultSortBy,
+                        SortBy: "Album,SortName",
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Audio",
                         Recursive: true,
@@ -27,8 +25,8 @@
                     }
                 };
 
-                pageData.query.ParentId = LibraryMenu.getTopParentId();
+                pageData.query.ParentId = params.topParentId;
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
@@ -41,62 +39,124 @@
         function getSavedQueryKey(context) {
 
             if (!context.savedQueryKey) {
-                context.savedQueryKey = LibraryBrowser.getSavedQueryKey('songs');
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('songs');
             }
             return context.savedQueryKey;
         }
 
-        function reloadItems(context) {
+        function reloadItems(page) {
 
             Dashboard.showLoadingMsg();
 
-            var query = getQuery(context);
+            var query = getQuery(page);
+
             ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
                 // Scroll back up so they can see the results from the beginning
                 window.scrollTo(0, 0);
 
-                var html = '';
+                updateFilterControls(page);
+
                 var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
                     showLimit: false,
-                    sortButton: true,
                     updatePageSizeSetting: false,
-                    filterButton: true
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
                 });
 
-                context.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                var html = LibraryBrowser.getListViewHtml({
-
-                html += LibraryBrowser.getListViewHtml({
                     items: result.Items,
                     showIndex: true,
                     defaultAction: 'play',
                     smallIcon: true
                 });
 
-                var elem = context.querySelector('#items');
+                var i, length;
-                elem.innerHTML = html + pagingHtml;
+                var elems = tabContent.querySelectorAll('.paging');
-                ImageLoader.lazyChildren(elem);
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
 
-                $('.btnNextPage', context).on('click', function () {
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
-                    reloadItems(context);
+                    reloadItems(tabContent);
-                });
+                }
 
-                $('.btnPreviousPage', context).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
-                    reloadItems(context);
+                    reloadItems(tabContent);
+                }
+
+                elems = tabContent.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
+
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+
+                Dashboard.hideLoadingMsg();
+            });
+        }
+
+        self.showFilterMenu = function () {
+
+            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+                var filterDialog = new filterDialogFactory({
+                    query: getQuery(tabContent),
+                    mode: 'songs'
                 });
 
-                $('.btnFilter', context).on('click', function () {
+                Events.on(filterDialog, 'filterchange', function () {
-                    showFilterMenu(context);
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
                 });
 
-                // On callback make sure to set StartIndex = 0
+                filterDialog.show();
-                $('.btnSort', context).on('click', function () {
+            });
-                    LibraryBrowser.showSortMenu({
+        }
+
+        function updateFilterControls(tabContent) {
+
+            var query = getQuery(tabContent);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
+
+        function initPage(tabContent) {
+
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
+                var query = getQuery(tabContent);
+                query.NameStartsWithOrGreater = newValue;
+                query.StartIndex = 0;
+                reloadItems(tabContent);
+            });
+
+            self.alphaPicker = new alphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
+            });
+
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
+                libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionTrackName'),
                         id: 'Name'
@@ -134,38 +194,28 @@
                             id: 'Runtime,AlbumArtist,Album,SortName'
                         }],
                     callback: function () {
-                            reloadItems(context);
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
                     },
-                        query: query
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
-
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
-
-                Dashboard.hideLoadingMsg();
-            });
         }
 
-        function showFilterMenu(context) {
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
 
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+        initPage(tabContent);
 
-                var filterDialog = new filterDialogFactory({
-                    query: getQuery(context),
-                    mode: 'songs'
-                });
-
-                Events.on(filterDialog, 'filterchange', function () {
-                    reloadItems(context);
-                });
-
-                filterDialog.show();
-            });
-        }
         self.renderTab = function () {
 
             reloadItems(tabContent);
-        };
+            updateFilterControls(tabContent);
         };
 
+        self.destroy = function () {
+        };
+    };
 });

dashboard-ui/scripts/tvgenres.js

@@ -127,12 +127,13 @@
             reloadItems(tabContent);
         };
 
-        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+        var btnSelectView = tabContent.querySelector('.btnSelectView');
+        btnSelectView.addEventListener('click', function (e) {
 
             LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
         });
 
-        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+        btnSelectView.addEventListener('layoutchange', function (e) {
 
             self.setCurrentViewStyle(e.detail.viewStyle);
         });

dashboard-ui/scripts/tvshows.js

@@ -263,12 +263,13 @@
                 });
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+            var btnSelectView = tabContent.querySelector('.btnSelectView');
+            btnSelectView.addEventListener('click', function (e) {
 
                 libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
             });
 
-            tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+            btnSelectView.addEventListener('layoutchange', function (e) {
 
                 var viewStyle = e.detail.viewStyle;