From ddb3bd5b3b34c6aa39f47cd1647be8f3b9133e7a Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Thu, 9 Jul 2015 01:52:25 -0400 Subject: [PATCH] update favorites page --- .../iron-menu-behavior/.bower.json | 4 +- dashboard-ui/css/librarymenu.css | 2 +- dashboard-ui/scripts/favorites.js | 14 +- dashboard-ui/scripts/itemdetailpage.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 12 +- dashboard-ui/scripts/librarymenu.js | 106 ++++++----- dashboard-ui/scripts/secondaryitems.js | 169 ++++++++++++++++++ dashboard-ui/scripts/site.js | 2 +- dashboard-ui/secondaryitems.html | 19 ++ 9 files changed, 265 insertions(+), 65 deletions(-) create mode 100644 dashboard-ui/scripts/secondaryitems.js create mode 100644 dashboard-ui/secondaryitems.html diff --git a/dashboard-ui/bower_components/iron-menu-behavior/.bower.json b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json index 052cd1c2bb..7ca24d4128 100644 --- a/dashboard-ui/bower_components/iron-menu-behavior/.bower.json +++ b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json @@ -35,7 +35,7 @@ "tag": "v1.0.1", "commit": "3809f0eb7461c8ca63640aaa238775b3a25aa578" }, - "_source": "git://github.com/polymerelements/iron-menu-behavior.git", + "_source": "git://github.com/PolymerElements/iron-menu-behavior.git", "_target": "^1.0.0", - "_originalSource": "polymerelements/iron-menu-behavior" + "_originalSource": "PolymerElements/iron-menu-behavior" } \ No newline at end of file diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 9688c6a124..50dd003694 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -288,7 +288,7 @@ color: #2ad; } -@media all and (max-width: 500px) { +@media all and (max-width: 440px) { .libraryMenuButtonText { display: none; diff --git a/dashboard-ui/scripts/favorites.js b/dashboard-ui/scripts/favorites.js index 2039cf1acc..9f4632a0e7 100644 --- a/dashboard-ui/scripts/favorites.js +++ b/dashboard-ui/scripts/favorites.js @@ -3,11 +3,11 @@ function getSections() { return [ - { name: Globalize.translate('HeaderFavoriteMovies'), types: "Movie", id: "favoriteMovies", shape: 'backdrop', preferThumb: true, showTitle: false }, - { name: Globalize.translate('HeaderFavoriteShows'), types: "Series", id: "favoriteShows", shape: 'backdrop', preferThumb: true, showTitle: false }, - { name: Globalize.translate('HeaderFavoriteEpisodes'), types: "Episode", id: "favoriteEpisode", shape: 'backdrop', preferThumb: false, showTitle: true, showParentTitle: true }, - { name: Globalize.translate('HeaderFavoriteGames'), types: "Game", id: "favoriteGames", shape: 'autohome', preferThumb: false, showTitle: true }, - { name: Globalize.translate('HeaderFavoriteAlbums'), types: "MusicAlbum", id: "favoriteAlbums", shape: 'square', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true } + { name: 'HeaderFavoriteMovies', types: "Movie", id: "favoriteMovies", shape: 'backdrop', preferThumb: true, showTitle: false }, + { name: 'HeaderFavoriteShows', types: "Series", id: "favoriteShows", shape: 'backdrop', preferThumb: true, showTitle: false }, + { name: 'HeaderFavoriteEpisodes', types: "Episode", id: "favoriteEpisode", shape: 'backdrop', preferThumb: false, showTitle: true, showParentTitle: true }, + { name: 'HeaderFavoriteGames', types: "Game", id: "favoriteGames", shape: 'autohome', preferThumb: false, showTitle: true }, + { name: 'HeaderFavoriteAlbums', types: "MusicAlbum", id: "favoriteAlbums", shape: 'square', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true, centerText: true, overlayPlayButton: true } ]; } @@ -37,7 +37,7 @@ var html = ''; if (result.Items.length) { - html += '

' + section.name + '

'; + html += '

' + Globalize.translate(section.name) + '

'; html += '
'; html += LibraryBrowser.getPosterViewHtml({ items: result.Items, @@ -56,7 +56,7 @@ html += '
'; if (result.TotalRecordCount > result.Items.length) { - var href = "index.html?tab=2§ionid=" + section.id; + var href = "secondaryitems.html?type=" + section.types + "&filters=IsFavorite&titlekey=" + section.name; html += '' + Globalize.translate('ButtonMoreItems') + ''; } diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 0466b067f5..16d65074da 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -32,7 +32,7 @@ setInitialCollapsibleState(page, item, context, user); renderDetails(page, item, context); - if (item.Type == 'MusicAlbum1' || item.Type == 'Season1') { + if (item.Type == 'MusicAlbum' || item.Type == 'Season1') { Backdrops.setBackdrops(page, [item]); $('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none'); } else { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 62a259c33a..505f77d31f 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2364,16 +2364,18 @@ html += '
'; - html += ''; + if (showControls) { + html += ''; - var startAtDisplay = totalRecordCount ? startIndex + 1 : 0; - html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount; + var startAtDisplay = totalRecordCount ? startIndex + 1 : 0; + html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount; - html += ''; + html += ''; + } if (showControls || options.viewButton || options.addSelectionButton || options.additionalButtonsHtml) { - html += '
'; + html += '
'; if (showControls) { diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 9fe400e84f..62ba1e6f1b 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -1,18 +1,12 @@ (function (window, document, $, devicePixelRatio) { - var backStack = []; - var addNextToBackStack = true; - function renderHeader() { var html = '
'; - if (AppInfo.enableBackButton) { + var backIcon = $.browser.safari ? 'chevron-left' : 'arrow-back'; - var icon = $.browser.safari ? 'chevron-left' : 'arrow-back'; - - html += ''; - } + html += ''; html += ''; @@ -61,9 +55,6 @@ Dashboard.exit(); } else { - addNextToBackStack = false; - - backStack.length = Math.max(0, backStack.length - 1); history.back(); } } @@ -74,28 +65,32 @@ if (user.localUser) { $('.btnCast', header).visible(true); - $('.headerSearchButton', header).visible(true); + document.querySelector('.headerSearchButton').classList.remove('hide'); requirejs(['voice/voice'], function () { if (VoiceInputManager.isSupported()) { - $('.headerVoiceButton', header).visible(true); + document.querySelector('.headerVoiceButton').classList.remove('hide'); } else { - $('.headerVoiceButton', header).visible(false); + document.querySelector('.headerVoiceButton').classList.add('hide'); } }); } else { $('.btnCast', header).visible(false); - $('.headerVoiceButton', header).visible(false); - $('.headerSearchButton', header).visible(false); + document.querySelector('.headerVoiceButton').classList.add('hide'); + document.querySelector('.headerSearchButton').classList.add('hide'); } - if (user.canManageServer) { - $('.dashboardEntryHeaderButton', header).visible(true); - } else { - $('.dashboardEntryHeaderButton', header).visible(false); + var dashboardEntryHeaderButton = document.querySelector('.dashboardEntryHeaderButton'); + + if (dashboardEntryHeaderButton) { + if (user.canManageServer) { + dashboardEntryHeaderButton.classList.remove('hide'); + } else { + dashboardEntryHeaderButton.classList.add('hide'); + } } var userButtonHtml = ''; @@ -136,14 +131,6 @@ $('.headerBackButton').on('click', onBackClick); - // Have to wait for document ready here because otherwise - // we may see the jQM redirect back and forth problem - $(initViewMenuBarHeadroom); - } - - function initViewMenuBarHeadroom() { - - // grab an element var viewMenuBar = document.getElementsByClassName("viewMenuBar")[0]; initHeadRoom(viewMenuBar); } @@ -159,7 +146,11 @@ } function reEnableHeadroom() { - $('.headroomDisabled').removeClass('headroomDisabled'); + + var headroomDisabled = document.querySelectorAll('.headroomDisabled'); + for (var i = 0, length = headroomDisabled.length; i < length; i++) { + headroomDisabled[i].classList.remove('headroomDisabled'); + } } function getItemHref(item, context) { @@ -685,16 +676,18 @@ function buildViewMenuBar(page) { + var viewMenuBar = document.querySelector('.viewMenuBar'); + if (page.classList.contains('standalonePage')) { - $('.viewMenuBar').visible(false); + if (viewMenuBar) { + viewMenuBar.classList.add('hide'); + } return; } - var viewMenuBar = document.querySelector('.viewMenuBar'); - if (requiresViewMenuRefresh) { if (viewMenuBar) { - $(viewMenuBar).remove(); + viewMenuBar.parentNode.removeChild(viewMenuBar); viewMenuBar = null; } } @@ -713,7 +706,7 @@ ConnectionManager.user(window.ApiClient).done(addUserToHeader); } else { - $(viewMenuBar).visible(true); + viewMenuBar.classList.remove('hide'); updateContextText(page); updateLibraryNavLinks(page); updateViewMenuBarHeadroom(page, viewMenuBar); @@ -737,15 +730,10 @@ }).on('pagebeforehide', ".page", function () { - if (addNextToBackStack) { - var text = $('.libraryMenuButtonText').text() || document.title; - - backStack.push(text); + var headroomEnabled = document.querySelectorAll('.headroomEnabled'); + for (var i = 0, length = headroomEnabled.length; i < length; i++) { + headroomEnabled[i].classList.add('headroomDisabled'); } - - addNextToBackStack = true; - - $('.headroomEnabled').addClass('headroomDisabled'); }); function onPageBeforeShowDocumentReady(page) { @@ -755,6 +743,18 @@ var isLibraryPage = page.classList.contains('libraryPage'); var darkDrawer = false; + var titleKey = getParameterByName('titlekey'); + + if (titleKey) { + document.querySelector('.libraryMenuButtonText').innerHTML = Globalize.translate(titleKey); + } + + if (page.getAttribute('data-menubutton') == 'false') { + document.querySelector('.mainDrawerButton').classList.add('hide'); + } else { + document.querySelector('.mainDrawerButton').classList.remove('hide'); + } + if (isLibraryPage) { document.body.classList.add('libraryDocument'); @@ -797,18 +797,28 @@ document.querySelector('.mainDrawerPanel #drawer').classList.remove('darkDrawer'); } - if (AppInfo.enableBackButton) { - updateBackButton(page); - } + updateBackButton(page); } function updateBackButton(page) { - var canGoBack = backStack.length > 0 && !page.classList.contains('homePage'); + var canGoBack = !page.classList.contains('homePage'); - $('.headerBackButton').visible(canGoBack); + var backButton = document.querySelector('.headerBackButton'); - Events.off(page, 'swiperight', onPageSwipeLeft); + var showBackButton = AppInfo.enableBackButton; + + if (!showBackButton) { + showBackButton = page.getAttribute('data-backbutton') == 'true'; + } + + if (canGoBack && showBackButton) { + backButton.classList.remove('hide'); + } else { + backButton.classList.add('hide'); + } + + //Events.off(page, 'swiperight', onPageSwipeLeft); if (canGoBack) { //Events.on(page, 'swiperight', onPageSwipeLeft); diff --git a/dashboard-ui/scripts/secondaryitems.js b/dashboard-ui/scripts/secondaryitems.js new file mode 100644 index 0000000000..e2e459809c --- /dev/null +++ b/dashboard-ui/scripts/secondaryitems.js @@ -0,0 +1,169 @@ +(function ($, document) { + + var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster'); + + var data = {}; + + function getQuery() { + + var key = getSavedQueryKey(); + var pageData = data[key]; + + if (!pageData) { + pageData = data[key] = { + query: { + SortBy: "SortName", + SortOrder: "Ascending", + Recursive: true, + Fields: "PrimaryImageAspectRatio,SortName,SyncInfo", + ImageTypeLimit: 1, + EnableImageTypes: "Primary,Backdrop,Banner,Thumb", + StartIndex: 0, + Limit: LibraryBrowser.getDefaultPageSize() + } + }; + + var type = getParameterByName('type'); + if (type) { + pageData.query.IncludeItemTypes = type; + } + + var filters = getParameterByName('filters'); + if (type) { + pageData.query.Filters = filters; + } + + pageData.query.ParentId = LibraryMenu.getTopParentId(); + LibraryBrowser.loadSavedQueryValues(key, pageData.query); + } + return pageData.query; + } + + function getSavedQueryKey() { + + return getWindowUrl(); + } + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + var query = getQuery(); + + ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { + + // Scroll back up so they can see the results from the beginning + window.scrollTo(0, 0); + + var html = ''; + var trigger = false; + var pagingHtml = LibraryBrowser.getQueryPagingHtml({ + startIndex: query.StartIndex, + limit: query.Limit, + totalRecordCount: result.TotalRecordCount, + showLimit: false + }); + + page.querySelector('.listTopPaging').innerHTML = pagingHtml; + + if (view == "Thumb") { + + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "backdrop", + preferThumb: true, + context: 'tv', + lazy: true, + overlayText: true + }); + + } + else if (view == "ThumbCard") { + + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "backdrop", + preferThumb: true, + context: 'tv', + lazy: true, + cardLayout: true, + showTitle: true, + showSeriesYear: true + }); + } + else if (view == "Banner") { + + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "banner", + preferBanner: true, + context: 'tv', + lazy: true + }); + } + else if (view == "List") { + + html = LibraryBrowser.getListViewHtml({ + items: result.Items, + context: 'tv', + sortBy: query.SortBy + }); + trigger = true; + } + else if (view == "PosterCard") { + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "portrait", + context: 'tv', + showTitle: true, + showYear: true, + lazy: true, + cardLayout: true + }); + } + else { + + // Poster + html = LibraryBrowser.getPosterViewHtml({ + items: result.Items, + shape: "portrait", + context: 'tv', + centerText: true, + lazy: true, + overlayText: true + }); + } + + var elem = page.querySelector('#items'); + elem.innerHTML = html + pagingHtml; + ImageLoader.lazyChildren(elem); + + if (trigger) { + Events.trigger(elem, 'create'); + } + + $('.btnNextPage', page).on('click', function () { + query.StartIndex += query.Limit; + reloadItems(page); + }); + + $('.btnPreviousPage', page).on('click', function () { + query.StartIndex -= query.Limit; + reloadItems(page); + }); + + LibraryBrowser.setLastRefreshed(page); + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pagebeforeshowready', "#secondaryItemsPage", function () { + + var page = this; + + if (LibraryBrowser.needsRefresh(page)) { + reloadItems(page); + } + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 678c1a5da1..3f1f71c271 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1907,7 +1907,7 @@ var AppInfo = {}; } if ($.browser.safari) { - require(['cordova/remotecontrols', 'cordova/ios/orientation']); + require(['cordova/ios/orientation']); } } else { diff --git a/dashboard-ui/secondaryitems.html b/dashboard-ui/secondaryitems.html new file mode 100644 index 0000000000..c751cba7cc --- /dev/null +++ b/dashboard-ui/secondaryitems.html @@ -0,0 +1,19 @@ + + + + Emby + + +
+ +
+
+
+
+
+
+
+ +
+ +