From c4c34ba3143562cbae7782823f58223d9143320f Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 14 Jun 2016 16:59:30 -0400
Subject: [PATCH] continue jquery removal

---
 dashboard-ui/movies.html         |  2 +-
 dashboard-ui/scripts/movies.js   | 53 ++++++++++++++++++++++---------
 dashboard-ui/scripts/sections.js | 54 ++++++++++++++++++++++++++++----
 dashboard-ui/scripts/site.js     | 11 +++++++
 dashboard-ui/scripts/tvshows.js  | 26 ++++++++++-----
 5 files changed, 117 insertions(+), 29 deletions(-)

diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html
index 86b595e07c..725949f1d3 100644
--- a/dashboard-ui/movies.html
+++ b/dashboard-ui/movies.html
@@ -62,7 +62,7 @@
                 &nbsp;
             </div>
 
-            <button type="button" is="paper-icon-button-light" class="btnNewCollection"><iron-icon icon="add"></iron-icon></button>
+            <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
         </div>
         <div class="itemsContainer" style="text-align:center;"></div>
         <div class="noItemsMessage" style="display: none; text-align: center;">
diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js
index 467e821a23..4b21b72b77 100644
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@@ -1,4 +1,4 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['alphaPicker'], function (alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -155,18 +155,29 @@
                 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);
+                }
 
-                $('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
+                var elems, i, length;
+                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);
+                }
+
+                function onChangeLayout(e) {
+                    var layout = e.detail.viewStyle;
                     if (layout == 'Timeline') {
                         getQuery(context).SortBy = 'ProductionYear,PremiereDate,SortName';
                         getQuery(context).SortOrder = 'Descending';
@@ -175,14 +186,23 @@
                     getPageData(context).view = layout;
                     LibraryBrowser.saveViewSetting(getSavedQueryKey(context), layout);
                     reloadItems(context);
-                });
+                }
 
-                $('.btnFilter', context).on('click', function () {
+                elems = tabContent.querySelectorAll('.btnChangeLayout');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('layoutchange', onChangeLayout);
+                }
+
+                function onFilterClick() {
                     showFilterMenu(context);
-                });
+                }
 
-                // On callback make sure to set StartIndex = 0
-                $('.btnSort', context).on('click', function () {
+                elems = tabContent.querySelectorAll('.btnFilter');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onFilterClick);
+                }
+
+                function onSortClick() {
                     LibraryBrowser.showSortMenu({
                         items: [{
                             name: Globalize.translate('OptionNameSort'),
@@ -241,7 +261,12 @@
                         },
                         query: query
                     });
-                });
+                }
+
+                elems = tabContent.querySelectorAll('.btnSort');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onSortClick);
+                }
 
                 LibraryBrowser.saveQueryValues(getSavedQueryKey(context), query);
 
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 20e795667a..053022af07 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -190,15 +190,38 @@
                 infos.push(getTheaterInfo);
             }
 
+            if (!AppInfo.enableAppLayouts && browserInfo.mobile) {
+                infos.push(getUpgradeMobileLayoutsInfo);
+            }
+
             appSettings.set(cacheKey, new Date().getTime());
 
-            return infos[getRandomInt(0, 1)]();
+            return infos[getRandomInt(0, infos.length - 1)]();
         });
     }
 
-    function getCard(img, target) {
+    function getCard(img, target, shape) {
 
-        return '<div class="card backdropCard"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div><a class="cardContent" href="' + target + '" target="_blank"><div class="cardImage lazy" data-src="' + img + '"></div></a></div></div></div>';
+        shape = shape || 'backdropCard';
+        var html = '<div class="card ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>';
+
+        if (target) {
+            html += '<a class="cardContent" href="' + target + '" target="_blank">';
+        } else {
+            html += '<div class="cardContent">';
+        }
+
+        html += '<div class="cardImage lazy" data-src="' + img + '"></div>';
+
+        if (target) {
+            html += '</a>';
+        } else {
+            html += '</div>';
+        }
+
+        html += '</div></div></div>';
+
+        return html;
     }
 
     function getTheaterInfo() {
@@ -225,13 +248,32 @@
         html += '<div>';
         html += '<h1>Try Emby Premiere<button is="paper-icon-button-light" style="margin-left:1em;" onclick="this.parentNode.parentNode.remove();"><iron-icon icon="close"></iron-icon></button></h1>';
 
+        var cardTarget = AppInfo.isNativeApp ? '' : 'https://emby.media/premiere';
         var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
 
         html += '<p>Design beautiful Cover Art, enjoy free access to Emby apps, and more. ' + learnMoreText + '</p>';
         html += '<div class="itemsContainer">';
-        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', 'https://emby.media/premiere');
-        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', 'https://emby.media/premiere');
-        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', 'https://emby.media/premiere');
+        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', cardTarget);
+        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', cardTarget);
+        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', cardTarget);
+        html += '</div>';
+        html += '<br/>';
+        html += '</div>';
+        return html;
+    }
+
+    function getUpgradeMobileLayoutsInfo() {
+        var html = '';
+        html += '<div>';
+        html += '<h1>Unlock Improved Layouts with Emby Premiere<button is="paper-icon-button-light" style="margin-left:1em;" onclick="this.parentNode.parentNode.remove();"><iron-icon icon="close"></iron-icon></button></h1>';
+
+        var cardTarget = AppInfo.isNativeApp ? '' : 'https://emby.media/premiere';
+        var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
+
+        html += '<p>Combined horizontal and vertical swiping, better detail layouts, and more. ' + learnMoreText + '</p>';
+        html += '<div class="itemsContainer">';
+        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms1.png', cardTarget, 'portraitCard');
+        html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms2.png', cardTarget, 'portraitCard');
         html += '</div>';
         html += '<br/>';
         html += '</div>';
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 38624867ea..64d4a3c2fd 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -3242,9 +3242,20 @@ var AppInfo = {};
             }
 
             require(postInitDependencies);
+            upgradeLayouts();
         });
     }
 
+    function upgradeLayouts() {
+        if (!AppInfo.enableAppLayouts && browserInfo.mobile) {
+            Dashboard.getPluginSecurityInfo().then(function (info) {
+                if (info.IsMBSupporter) {
+                    AppInfo.enableAppLayouts = true;
+                }
+            });
+        }
+    }
+
     initRequire();
 
     function onWebComponentsReady() {
diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js
index 91f56dccd6..ae170ad40d 100644
--- a/dashboard-ui/scripts/tvshows.js
+++ b/dashboard-ui/scripts/tvshows.js
@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'jQuery', 'alphaPicker'], function (events, libraryBrowser, imageLoader, $, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -141,20 +141,30 @@
                 }
 
                 var i, length;
-                var pagingElems = tabContent.querySelectorAll('.paging');
-                for (i = 0, length = pagingElems.length; i < length; i++) {
-                    pagingElems[i].innerHTML = pagingHtml;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
                 }
 
-                $('.btnNextPage', tabContent).on('click', function () {
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
                     reloadItems(tabContent);
-                });
+                }
 
-                $('.btnPreviousPage', tabContent).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
                     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;