From 7144ee87e4988945a47467285ade28901ff48917 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 17 Jun 2016 15:56:29 -0400
Subject: [PATCH] remove jquery from music screen

---
 dashboard-ui/music.html              |  12 ++-
 dashboard-ui/scripts/musicfolders.js | 110 ++++++++++++++++-----------
 2 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/dashboard-ui/music.html b/dashboard-ui/music.html
index 3e5cc559c..6babeb486 100644
--- a/dashboard-ui/music.html
+++ b/dashboard-ui/music.html
@@ -112,11 +112,15 @@
         <div id="items" class="itemsContainer paddedItemsContainer"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="foldersTab" data-index="6">
-        <div class="viewSettings">
-            <div class="listTopPaging">
-            </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 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"></div>
     </div>
 
     <div data-role="content">
diff --git a/dashboard-ui/scripts/musicfolders.js b/dashboard-ui/scripts/musicfolders.js
index c1d4ef3ea..1de3a8e44 100644
--- a/dashboard-ui/scripts/musicfolders.js
+++ b/dashboard-ui/scripts/musicfolders.js
@@ -1,12 +1,13 @@
-define(['jQuery'], function ($) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
     return function (view, params, tabContent) {
 
         var self = this;
 
         var data = {};
-        function getPageData() {
-            var key = getSavedQueryKey();
+
+        function getPageData(context) {
+            var key = getSavedQueryKey(context);
             var pageData = data[key];
 
             if (!pageData) {
@@ -20,88 +21,107 @@
                         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();
-                LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                pageData.query.ParentId = params.topParentId;
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
         }
 
-        function getQuery() {
+        function getQuery(context) {
 
-            return getPageData().query;
+            return getPageData(context).query;
         }
 
-        function getSavedQueryKey() {
+        function getSavedQueryKey(context) {
 
-            return LibraryBrowser.getSavedQueryKey('folders');
+            if (!context.savedQueryKey) {
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('folders');
+            }
+            return context.savedQueryKey;
         }
 
-        function reloadItems(context) {
+        function reloadItems(page) {
 
             Dashboard.showLoadingMsg();
 
-            var query = getQuery();
+            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 = '';
-                var view = getPageData().view;
                 var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
-                    viewButton: false,
                     showLimit: false,
-                    sortButton: false,
-                    addLayoutButton: false,
-                    currentLayout: view,
                     updatePageSizeSetting: false,
-                    viewIcon: 'filter-list',
-                    layouts: 'List,Poster,PosterCard,Timeline'
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
                 });
 
-                context.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                var html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "square",
+                    context: 'folders',
+                    showTitle: true,
+                    showParentTitle: true,
+                    lazy: true,
+                    centerText: true,
+                    overlayPlayButton: true
+                });
 
-                if (view == "Poster") {
-                    html = LibraryBrowser.getPosterViewHtml({
-                        items: result.Items,
-                        shape: "square",
-                        context: 'folders',
-                        showTitle: true,
-                        showParentTitle: true,
-                        lazy: true,
-                        centerText: true,
-                        overlayPlayButton: true
-                    });
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
                 }
 
-                var elem = context.querySelector('#items');
-                elem.innerHTML = html + pagingHtml;
-                ImageLoader.lazyChildren(elem);
-
-                $('.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);
 
-                LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 Dashboard.hideLoadingMsg();
             });
         }
-
        self.renderTab = function () {
+
+        self.getCurrentViewStyle = function () {
+            return getPageData(tabContent).view;
+        };
+
+        self.renderTab = function () {
 
             reloadItems(tabContent);
         };
-    };
 
+        self.destroy = function () {
+        };
+    };
 });
\ No newline at end of file