From 0d4419098fc4219aa6336a38d3fb21f8cc9b512f Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 27 May 2016 13:18:22 -0400
Subject: [PATCH] remove jquery from playlists page

---
 dashboard-ui/playlists.html            |  2 +-
 dashboard-ui/scripts/librarybrowser.js | 18 +++----
 dashboard-ui/scripts/playlists.js      | 72 +++++++++++++++-----------
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/dashboard-ui/playlists.html b/dashboard-ui/playlists.html
index 21bfb74da0..5c64dda43d 100644
--- a/dashboard-ui/playlists.html
+++ b/dashboard-ui/playlists.html
@@ -8,7 +8,7 @@
             </div>
         </div>
         <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
-        <div class="noItemsMessage" style="display: none; text-align: center;">
+        <div class="noItemsMessage hide" style="text-align: center;">
             <p>${MessageNoPlaylistsAvailable}</p>
         </div>
     </div>
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index b359ead742..18b7950124 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2842,15 +2842,15 @@
                         positionTo: button,
                         callback: function (id) {
 
-                            if (dispatchEvent) {
-                                button.dispatchEvent(new CustomEvent('layoutchange', {
-                                    detail: {
-                                        viewStyle: id
-                                    },
-                                    bubbles: true,
-                                    cancelable: false
-                                }));
-                            } else {
+                            button.dispatchEvent(new CustomEvent('layoutchange', {
+                                detail: {
+                                    viewStyle: id
+                                },
+                                bubbles: true,
+                                cancelable: false
+                            }));
+
+                            if (!dispatchEvent) {
                                 // TODO: remove jQuery
                                 require(['jQuery'], function ($) {
                                     $(button).trigger('layoutchange', [id]);
diff --git a/dashboard-ui/scripts/playlists.js b/dashboard-ui/scripts/playlists.js
index d16f9bf0a6..b193fba51a 100644
--- a/dashboard-ui/scripts/playlists.js
+++ b/dashboard-ui/scripts/playlists.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var data = {};
     function getPageData() {
@@ -63,7 +63,7 @@
             var html = '';
             var view = getPageData().view;
 
-            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
+            page.querySelector('.listTopPaging').innerHTML = LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
@@ -71,9 +71,10 @@
                 showLimit: false,
                 updatePageSizeSetting: false,
                 addLayoutButton: true,
+                layouts: 'List,Poster,PosterCard,Thumb,ThumbCard',
                 currentLayout: view
 
-            }));
+            });
 
             if (result.TotalRecordCount) {
 
@@ -95,18 +96,6 @@
                         cardLayout: true
                     });
                 }
-                else if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        showTitle: true,
-                        lazy: true,
-                        coverImage: true,
-                        showItemCounts: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
-                }
                 else if (view == "Thumb") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
@@ -128,33 +117,56 @@
                         showItemCounts: true
                     });
                 }
+                else {
+                    // Poster
+                    html = LibraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "square",
+                        showTitle: true,
+                        lazy: true,
+                        coverImage: true,
+                        showItemCounts: true,
+                        centerText: true,
+                        overlayPlayButton: true
+                    });
+                }
 
-                $('.noItemsMessage', page).hide();
+                page.querySelector('.noItemsMessage').classList.add('hide');
 
             } else {
 
-                $('.noItemsMessage', page).show();
+                page.querySelector('.noItemsMessage').classList.remove('hide');
             }
 
             var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
-                query.StartIndex += query.Limit;
-                reloadItems(page);
-            });
+            var btnNextPage = page.querySelector('.btnNextPage');
+            if (btnNextPage) {
+                btnNextPage.addEventListener('click', function () {
+                    query.StartIndex += query.Limit;
+                    reloadItems(page);
+                });
+            }
 
-            $('.btnPreviousPage', page).on('click', function () {
-                query.StartIndex -= query.Limit;
-                reloadItems(page);
-            });
+            var btnPreviousPage = page.querySelector('.btnPreviousPage');
+            if (btnPreviousPage) {
+                btnPreviousPage.addEventListener('click', function () {
+                    query.StartIndex -= query.Limit;
+                    reloadItems(page);
+                });
+            }
 
-            $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
-                getPageData().view = layout;
-                LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                reloadItems(page);
-            });
+            var btnChangeLayout = page.querySelector('.btnChangeLayout');
+            if (btnChangeLayout) {
+                btnChangeLayout.addEventListener('layoutchange', function (e) {
+                    var layout = e.detail.viewStyle;
+                    getPageData().view = layout;
+                    LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
+                    reloadItems(page);
+                });
+            }
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);