mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-24 14:11:03 -04:00
parent 5738507576
commit e488108c2f
17 changed files with 430 additions and 562 deletions
Download patch file Download diff file Expand all files Collapse all files

14
dashboard-ui/channels.html
View file

@ -1,4 +1,4 @@
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,paper-tabs,neon-animated-pages">
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,paper-tabs">
<div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
@ -10,21 +10,15 @@
<a href="channels.html?tab=1">${TabChannels}</a>
</div>
</div>
<div class="ehsContent fullWidth">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent latestContent">
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent latestContent hide">
<div class="latestItems"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent channelsContent">
<div class="pageTabContent channelsContent hide">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">

20
dashboard-ui/home.html
View file

@ -15,10 +15,8 @@
</div>
</div>
<div class="ehsContent fullWidth">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent homeTabContent" data-index="0">
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent homeTabContent hide" data-index="0">
<div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
<h1 style="margin-top: 0;" class="tourHeader"></h1>
<p>
@ -28,9 +26,7 @@
<div class="sections"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent homeNextUpTabContent" data-index="1">
<div class="pageTabContent homeNextUpTabContent hide" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
@ -41,14 +37,10 @@
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent homeFavoritesTabContent" data-index="2">
<div class="pageTabContent homeFavoritesTabContent hide" data-index="2">
<div class="favoriteSections"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent homeUpcomingTabContent" data-index="3">
<div class="pageTabContent homeUpcomingTabContent hide" data-index="3">
<div id="upcomingItems" class="itemsContainer">
</div>
<div class="noItemsMessage" style="display: none;">
@ -58,8 +50,6 @@
</p>
</div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">

30
dashboard-ui/livetv.html
View file

@ -1,4 +1,4 @@
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,neon-animated-pages,paper-checkbox">
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-tabs,paper-checkbox">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
@ -19,10 +19,8 @@
</div>
</div>
<div class="ehsContent fullWidth">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent suggestedTabContent" data-index="0">
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent suggestedTabContent hide" data-index="0">
<div id="activePrograms" class="homePageSection">
<h1 class="listHeader">${HeaderWhatsOnTV}</h1>
<div class="activeProgramItems itemsContainer noautoinit"></div>
@ -58,22 +56,16 @@
<br />
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent guideTabContent" style="width: auto;" data-index="1">
<div class="pageTabContent guideTabContent hide" style="width: auto;" data-index="1">
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent channelsTabContent" data-index="2">
<div class="pageTabContent channelsTabContent hide" data-index="2">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent recordingsTabContent" data-index="3">
<div class="pageTabContent recordingsTabContent hide" data-index="3">
<div id="activeRecordings" class="homePageSection hide">
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
<div class="recordingItems itemsContainer"></div>
@ -94,20 +86,14 @@
<div id="recordingGroupItems"></div>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent timersTabContent" data-index="4">
<div class="pageTabContent timersTabContent hide" data-index="4">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent seriesTimersTabContent" data-index="5">
<div class="pageTabContent seriesTimersTabContent hide" data-index="5">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">

30
dashboard-ui/movies.html
View file

@ -1,4 +1,4 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,neon-animated-pages,paper-checkbox,paper-fab,scripts/alphapicker">
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,paper-checkbox,paper-fab,scripts/alphapicker">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
@ -19,10 +19,8 @@
</div>
</div>
<div class="ehsContent fullWidth">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent" data-index="0">
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent hide" data-index="0">
<div id="resumableSection" style="display: none;" class="homePageSection">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
@ -50,9 +48,7 @@
<p>${MessageNoMovieSuggestionsAvailable}</p>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="1">
<div class="pageTabContent hide" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -61,9 +57,7 @@
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="2">
<div class="pageTabContent hide" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -73,9 +67,7 @@
<div class="itemsContainer" style="text-align:center;"></div>
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="3">
<div class="pageTabContent hide" data-index="3">
<div class="viewSettings">
<div class="listTopPaging">
@ -89,26 +81,20 @@
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="4">
<div class="pageTabContent hide" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="5">
<div class="pageTabContent hide" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">

34
dashboard-ui/music.html
View file

@ -1,4 +1,4 @@
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-tabs,neon-animated-pages,paper-checkbox,scripts/alphapicker">
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-tabs,paper-checkbox,scripts/alphapicker">
<div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab>
@ -20,11 +20,9 @@
</div>
</div>
<div class="ehsContent fullWidth">
<div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent" data-index="0">
<div class="pageTabContent hide" data-index="0">
<div class="homePageSection">
<h1 class="listHeader">${HeaderLatestMusic}</h1>
@ -55,9 +53,7 @@
<div class="favoriteSections homePageSection"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="1">
<div class="pageTabContent hide" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -66,9 +62,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="2">
<div class="pageTabContent hide" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -77,9 +71,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="3">
<div class="pageTabContent hide" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -88,35 +80,27 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="4">
<div class="pageTabContent hide" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="5">
<div class="pageTabContent hide" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="6">
<div class="pageTabContent hide" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">

18
dashboard-ui/photos.html
View file

@ -1,4 +1,4 @@
<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage pageWithAbsoluteTabs" data-require="scripts/photos,paper-tabs,neon-animated-pages">
<div id="photosPage" data-role="page" data-dom-cache="true" class="page libraryPage pageWithAbsoluteTabs" data-require="scripts/photos,paper-tabs">
<div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink>
@ -13,35 +13,29 @@
</div>
</div>
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent albumTabContent">
<div class="pageTabsContainer">
<div class="pageTabContent albumTabContent hide">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
<div class="pageTabContent photoTabContent">
<div class="pageTabContent photoTabContent hide">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<neon-animatable>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent videoTabContent">
<div class="pageTabContent videoTabContent hide">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">
</div>

8
dashboard-ui/scripts/channels.js
View file

@ -75,12 +75,12 @@
var page = this;
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, 'channels.html');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'channels.html');
pages.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});

6
dashboard-ui/scripts/channelslatest.js
View file

@ -26,10 +26,10 @@
pageIdOn('pageinit', "channelsPage", function () {
var page = this;
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
pages.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});

16
dashboard-ui/scripts/indexpage.js
View file

@ -276,9 +276,13 @@
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var page = $.mobile.activePage;
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
pages.dispatchEvent(new CustomEvent("tabchange", {}));
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
}
}));
}
}
@ -295,12 +299,12 @@
var self = this;
var pages = view.querySelector('neon-animated-pages');
var pageTabsContainer = view.querySelector('.pageTabsContainer');
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pages, 'home.html');
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, 'home.html');
pages.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});
view.querySelector('.btnTakeTour').addEventListener('click', function () {

140
dashboard-ui/scripts/librarybrowser.js
View file

@ -180,23 +180,6 @@
return AppInfo.isNativeApp;
},
animatePaperTabs: function () {
if (!LibraryBrowser.enableFullPaperTabs()) {
return false;
}
if (!browserInfo.animate) {
return false;
}
if (browserInfo.mobile) {
return false;
}
return true;
},
allowSwipe: function (target) {
function allowSwipeOn(elem) {
@ -246,39 +229,42 @@
},
configureSwipeTabs: function (ownerpage, tabs, pages) {
selectedTab: function (pageTabsContainer, selected) {
if (LibraryBrowser.animatePaperTabs()) {
if (browserInfo.mobile) {
if (selected == null) {
require(['slide-left-animation', 'slide-from-right-animation'], function () {
pages.entryAnimation = 'slide-from-right-animation';
pages.exitAnimation = 'slide-left-animation';
});
return pageTabsContainer.selectedTabIndex;
}
var tabs = pageTabsContainer.querySelectorAll('.pageTabContent');
for (var i = 0, length = tabs.length; i < length; i++) {
if (i == selected) {
tabs[i].classList.remove('hide');
} else {
require(['fade-in-animation', 'fade-out-animation'], function () {
pages.entryAnimation = 'fade-in-animation';
pages.exitAnimation = 'fade-out-animation';
});
tabs[i].classList.add('hide');
}
}
pageTabsContainer.selectedTabIndex = selected;
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: selected
}
}));
},
var pageCount = pages.querySelectorAll('neon-animatable').length;
configureSwipeTabs: function (ownerpage, tabs, pageTabsContainer) {
var pageCount = pageTabsContainer.querySelectorAll('.pageTabContent').length;
require(['hammer'], function (Hammer) {
var hammertime = new Hammer(pages);
var hammertime = new Hammer(pageTabsContainer);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.on('swipeleft', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(pages.selected || '0');
var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
if (selected < (pageCount - 1)) {
if (LibraryBrowser.animatePaperTabs()) {
pages.entryAnimation = 'slide-from-right-animation';
pages.exitAnimation = 'slide-left-animation';
}
tabs.selectNext();
}
}
@ -286,12 +272,8 @@
hammertime.on('swiperight', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(pages.selected || '0');
var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
if (selected > 0) {
if (LibraryBrowser.animatePaperTabs()) {
pages.entryAnimation = 'slide-from-left-animation';
pages.exitAnimation = 'slide-right-animation';
}
tabs.selectPrevious();
}
}
@ -303,7 +285,7 @@
return !LibraryBrowser.enableFullPaperTabs();
},
configurePaperLibraryTabs: function (ownerpage, tabs, pages) {
configurePaperLibraryTabs: function (ownerpage, tabs, pageTabsContainer) {
// Causing iron-select to not fire in IE and safari
if (browserInfo.chrome) {
@ -317,7 +299,7 @@
tabs.noSlide = true;
tabs.noBar = true;
} else {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pages);
LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pageTabsContainer);
}
if (libraryViewNav) {
@ -333,9 +315,9 @@
var legacyTabs = ownerpage.querySelector('.legacyTabs');
if (legacyTabs) {
pages.addEventListener('iron-select', function (e) {
pageTabsContainer.addEventListener('tabchange', function (e) {
var selected = pages.selected;
var selected = e.detail.selectedTabIndex;
var anchors = legacyTabs.querySelectorAll('a');
for (var i = 0, length = anchors.length; i < length; i++) {
if (i == selected) {
@ -354,41 +336,10 @@
ownerpage.addEventListener('viewbeforeshow', LibraryBrowser.onTabbedpagebeforeshow);
pages.addEventListener('iron-select', function () {
// When transition animations are used, add a content loading delay to allow the animations to finish
// Otherwise with both operations happening at the same time, it can cause the animation to not run at full speed.
var pgs = this;
var delay = LibraryBrowser.animatePaperTabs() || !tabs.noSlide ? 300 : 0;
setTimeout(function () {
pgs.dispatchEvent(new CustomEvent("tabchange", {}));
}, delay);
});
function fadeOutLeft(elem, iterations) {
var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
{ opacity: '0', transform: 'translate3d(-100%, 0, 0)', offset: 1 }];
var timing = { duration: 300, iterations: iterations };
return elem.animate(keyframes, timing);
}
if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
tabs.addEventListener('iron-select', function () {
var animateTab = !browserInfo.safari;
animateTab = false;
var selected = pages.selected;
if (selected != null && animateTab) {
var newValue = this.selected;
var currentTab = pages.querySelectorAll('.pageTabContent')[selected];
fadeOutLeft(currentTab, 1).onfinish = function () {
pages.selected = newValue;
};
}
else {
pages.selected = this.selected;
}
LibraryBrowser.selectedTab(pageTabsContainer, this.selected);
});
}
},
@ -417,7 +368,7 @@
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
if (isFirstLoad) {
@ -437,29 +388,24 @@
tabs.selected = selected;
} else {
pages.selected = selected;
LibraryBrowser.selectedTab(pageTabsContainer, selected);
}
} else {
// Go back to the first tab
if (LibraryBrowser.enableFullPaperTabs() && !e.detail.isRestored) {
if (pages.selected) {
var entryAnimation = pages.entryAnimation;
var exitAnimation = pages.exitAnimation;
pages.entryAnimation = null;
pages.exitAnimation = null;
if (LibraryBrowser.selectedTab(pageTabsContainer)) {
page.querySelector('paper-tabs').selected = 0;
pages.entryAnimation = entryAnimation;
pages.exitAnimation = exitAnimation;
return;
}
}
pages.dispatchEvent(new CustomEvent("tabchange", {}));
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: 0
}
}));
}
},
@ -479,14 +425,9 @@
document.removeEventListener('pagebeforeshow', afterNavigate);
if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) != -1) {
var pages = this.querySelector('neon-animated-pages');
var pageTabsContainer = this.querySelector('.pageTabsContainer');
if (pages) {
var entryAnimation = pages.entryAnimation;
var exitAnimation = pages.exitAnimation;
pages.entryAnimation = null;
pages.exitAnimation = null;
if (pageTabsContainer) {
var tabs = this.querySelector('paper-tabs');
@ -497,9 +438,6 @@
var noSlide = tabs.noSlide;
tabs.noSlide = true;
tabs.selected = index;
pages.entryAnimation = entryAnimation;
pages.exitAnimation = exitAnimation;
tabs.noSlide = noSlide;
}, delay);
@ -3196,7 +3134,7 @@
markDislike: function (link) {
// TODO: remove jQuery
require(['jQuery'], function($) {
require(['jQuery'], function ($) {
var id = link.getAttribute('data-itemid');
var $link = $(link);

8
dashboard-ui/scripts/livetvsuggested.js
View file

@ -197,12 +197,12 @@
var page = this;
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, 'livetv.html');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, 'livetv.html');
pages.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});

16
dashboard-ui/scripts/moviesrecommended.js
View file

@ -333,7 +333,7 @@
$('.recommendations', page).createCardMenus();
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var baseUrl = 'movies.html';
var topParentId = LibraryMenu.getTopParentId();
@ -341,10 +341,10 @@
baseUrl += '?topParentId=' + topParentId;
}
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, baseUrl);
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
pages.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});
@ -384,9 +384,13 @@
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var page = $($.mobile.activePage)[0];
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
pages.dispatchEvent(new CustomEvent("tabchange", {}));
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
}
}));
}
}

8
dashboard-ui/scripts/musicrecommended.js
View file

@ -286,7 +286,7 @@
$('.recommendations', page).createCardMenus();
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
var pageTabsContainer = page.querySelector('.pageTabsContainer');
var baseUrl = 'music.html';
var topParentId = LibraryMenu.getTopParentId();
@ -294,10 +294,10 @@
baseUrl += '?topParentId=' + topParentId;
}
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages, baseUrl);
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
pages.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
});

9
dashboard-ui/scripts/photos.js
View file

@ -155,8 +155,7 @@
var info = LibraryBrowser.getListItemInfo(this);
if (info.mediaType == 'Photo') {
var tab = page.querySelector('neon-animated-pages').selected;
var query = getQuery(tab);
var query = getQuery(LibraryBrowser.selectedTabIndex(page.querySelector('.pageTabsContainer')));
Photos.startSlideshow(page, query, info.id);
return false;
@ -199,10 +198,10 @@
baseUrl += '?topParentId=' + topParentId;
}
LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('neon-animated-pages'), baseUrl);
LibraryBrowser.configurePaperLibraryTabs(page, tabs, page.querySelector('.pageTabsContainer'), baseUrl);
page.querySelector('neon-animated-pages').addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected));
page.querySelector('.pageTabsContainer').addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));
});
$(page).on('click', '.mediaItem', onListItemClick);

4
dashboard-ui/scripts/site.js
View file

@ -2426,7 +2426,7 @@ var AppInfo = {};
defineRoute({
path: '/home.html',
dependencies: ['paper-tabs', 'neon-animated-pages'],
dependencies: ['paper-tabs'],
autoFocus: false,
controller: 'scripts/indexpage'
});
@ -2813,7 +2813,7 @@ var AppInfo = {};
defineRoute({
path: '/tv.html',
dependencies: ['paper-tabs', 'neon-animated-pages', 'paper-checkbox'],
dependencies: ['paper-tabs', 'paper-checkbox'],
autoFocus: false,
controller: 'scripts/tvrecommended'
});

17
dashboard-ui/scripts/tvrecommended.js
View file

@ -234,13 +234,18 @@
function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var pages = view.querySelector('neon-animated-pages');
pages.dispatchEvent(new CustomEvent("tabchange", {}));
var pageTabsContainer = view.querySelector('.pageTabsContainer');
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: libraryBrowser.selectedTabIndex(pageTabsContainer)
}
}));
}
}
var pages = view.querySelector('neon-animated-pages');
var pageTabsContainer = view.querySelector('.pageTabsContainer');
var baseUrl = 'tv.html';
var topParentId = params.topParentId;
@ -255,10 +260,10 @@
}
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pages, baseUrl);
libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
pages.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(this.selected));
pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));
});
view.addEventListener('viewbeforeshow', function (e) {

32
dashboard-ui/tv.html
View file

@ -21,10 +21,8 @@
</div>
</div>
<div class="ehsContent fullWidth">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent" data-index="0">
<div class="ehsContent fullWidth pageTabsContainer">
<div class="pageTabContent hide" data-index="0">
<div id="resumableSection" class="homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1>
@ -45,9 +43,7 @@
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="1">
<div class="pageTabContent hide" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
@ -57,9 +53,7 @@
</div>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="2">
<div class="pageTabContent hide" data-index="2">
<div id="upcomingItems">
</div>
<div class="noItemsMessage" style="display: none;">
@ -69,9 +63,7 @@
</p>
</div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="3">
<div class="pageTabContent hide" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -80,35 +72,27 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="4">
<div class="pageTabContent hide" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="5">
<div class="pageTabContent hide" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="6">
<div class="pageTabContent hide" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">