continue jquery removal

dashboard-ui/movies.html

@@ -70,18 +70,17 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="genresTab" data-index="4">
-        <div class="viewSettings">
+        <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
-            <div class="listTopPaging">
+            <button is="paper-icon-button-light" class="btnSelectView" title="${ButtonSelectView}"><iron-icon icon="view-comfy"></iron-icon></button>
         </div>
-        </div>
+        <div id="items" class="itemsContainer paddedItemsContainer"></div>
-        <div class="itemsContainer"></div>
     </div>
     <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div class="itemsContainer" style="text-align:center;"></div>
+        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
     </div>
 
     <div data-role="content">

dashboard-ui/scripts/moviegenres.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     return function (view, params, tabContent) {
 
@@ -17,8 +17,7 @@
                         IncludeItemTypes: "Movie",
                         Recursive: true,
                         Fields: "DateCreated,SyncInfo,ItemCounts",
-                        StartIndex: 0,
+                        StartIndex: 0
-                        Limit: LibraryBrowser.getDefaultPageSize()
                     },
                     view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
@@ -46,34 +45,20 @@
 
             ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-                // Scroll back up so they can see the results from the beginning
-                window.scrollTo(0, 0);
-
                 var html = '';
 
-                var viewStyle = getPageData().view;
+                var viewStyle = self.getCurrentViewStyle();
-
-                $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
-                    startIndex: query.StartIndex,
-                    limit: query.Limit,
-                    totalRecordCount: result.TotalRecordCount,
-                    viewButton: false,
-                    showLimit: false,
-                    updatePageSizeSetting: false,
-                    addLayoutButton: true,
-                    currentLayout: viewStyle
-                }));
 
                 if (viewStyle == "Thumb") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
+                        context: 'movies',
                         showItemCounts: true,
                         centerText: true,
                         lazy: true,
-                        overlayPlayButton: true,
+                        overlayPlayButton: true
-                        context: 'movies'
                     });
                 }
                 else if (viewStyle == "ThumbCard") {
@@ -82,64 +67,74 @@
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
+                        context: 'movies',
                         showItemCounts: true,
                         cardLayout: true,
                         showTitle: true,
-                        lazy: true,
+                        lazy: true
-                        context: 'movies'
                     });
                 }
                 else if (viewStyle == "PosterCard") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
+                        context: 'movies',
                         showItemCounts: true,
                         lazy: true,
                         cardLayout: true,
-                        showTitle: true,
+                        showTitle: true
-                        context: 'movies'
                     });
                 }
                 else if (viewStyle == "Poster") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
+                        context: 'movies',
                         centerText: true,
                         showItemCounts: true,
                         lazy: true,
-                        overlayPlayButton: true,
+                        overlayPlayButton: true
-                        context: 'movies'
                     });
                 }
 
-                var elem = context.querySelector('.itemsContainer');
+                var elem = context.querySelector('#items');
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-                $('.btnNextPage', context).on('click', function () {
-                    query.StartIndex += query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnPreviousPage', context).on('click', function () {
-                    query.StartIndex -= query.Limit;
-                    reloadItems(context);
-                });
-
-                $('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
-                    getPageData().view = layout;
-                    LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                    reloadItems(context);
-                });
-
                 LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
                 Dashboard.hideLoadingMsg();
             });
         }
+
        self.getViewStyles = function () {
+            return 'Poster,PosterCard,Thumb,ThumbCard'.split(',');
+        };
+
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
+
+        self.setCurrentViewStyle = function (viewStyle) {
+            getPageData(tabContent).view = viewStyle;
+            LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
+            reloadItems(tabContent);
+        };
+
+        self.enableViewSelection = true;
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
         };
+
+        tabContent.querySelector('.btnSelectView').addEventListener('click', function (e) {
+
+            LibraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), self.getViewStyles());
+        });
+
+        tabContent.querySelector('.btnSelectView').addEventListener('layoutchange', function (e) {
+
+            self.setCurrentViewStyle(e.detail.viewStyle);
+        });
     };
 });

dashboard-ui/scripts/moviestudios.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     // The base query options
     var data = {};
@@ -16,8 +16,7 @@
                     IncludeItemTypes: "Movie",
                     Recursive: true,
                     Fields: "DateCreated,ItemCounts",
-                    StartIndex: 0,
+                    StartIndex: 0
-                    Limit: LibraryBrowser.getDefaultPageSize()
                 }
             };
 
@@ -40,18 +39,8 @@
 
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
 
-            // Scroll back up so they can see the results from the beginning
-            window.scrollTo(0, 0);
-
             var html = '';
 
-            $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
-                startIndex: query.StartIndex,
-                limit: query.Limit,
-                totalRecordCount: result.TotalRecordCount,
-                showLimit: false
-            }));
-
             html += LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "backdrop",
@@ -64,20 +53,10 @@
 
             });
 
-            var elem = context.querySelector('.itemsContainer');
+            var elem = context.querySelector('#items');
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', context).on('click', function () {
-                query.StartIndex += query.Limit;
-                reloadItems(context, params);
-            });
-
-            $('.btnPreviousPage', context).on('click', function () {
-                query.StartIndex -= query.Limit;
-                reloadItems(context, params);
-            });
-
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
             Dashboard.hideLoadingMsg();
         });