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

26
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"> <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <paper-tabs hidescrollbuttons noink>
@ -10,21 +10,15 @@
<a href="channels.html?tab=1">${TabChannels}</a> <a href="channels.html?tab=1">${TabChannels}</a>
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent latestContent hide">
<neon-animatable> <div class="latestItems"></div>
<div class="pageTabContent latestContent"> </div>
<div class="latestItems"></div> <div class="pageTabContent channelsContent hide">
</div> <div class="viewSettings">
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div class="pageTabContent channelsContent"> </div>
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div> </div>
<div data-role="content"> <div data-role="content">

74
dashboard-ui/home.html
View file

@ -15,51 +15,41 @@
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent homeTabContent hide" data-index="0">
<neon-animatable> <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
<div class="pageTabContent homeTabContent" data-index="0"> <h1 style="margin-top: 0;" class="tourHeader"></h1>
<div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;"> <p>
<h1 style="margin-top: 0;" class="tourHeader"></h1> <paper-button raised class="submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></paper-button>
<p> </p>
<paper-button raised class="submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></paper-button> </div>
</p>
</div>
<div class="sections"></div> <div class="sections"></div>
</div>
<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>
<paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div> </div>
</neon-animatable> <div id="nextUpItems" class="itemsContainer">
<neon-animatable>
<div class="pageTabContent homeNextUpTabContent" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="nextUpItems" class="itemsContainer">
</div>
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div> </div>
</neon-animatable> </div>
<neon-animatable> <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
<div class="pageTabContent homeFavoritesTabContent" data-index="2"> </div>
<div class="favoriteSections"></div> <div class="pageTabContent homeFavoritesTabContent hide" data-index="2">
</div> <div class="favoriteSections"></div>
</neon-animatable> </div>
<neon-animatable> <div class="pageTabContent homeUpcomingTabContent hide" data-index="3">
<div class="pageTabContent homeUpcomingTabContent" data-index="3"> <div id="upcomingItems" class="itemsContainer">
<div id="upcomingItems" class="itemsContainer"> </div>
</div> <div class="noItemsMessage" style="display: none;">
<div class="noItemsMessage" style="display: none;"> <p>${MessageNothingHere}</p>
<p>${MessageNothingHere}</p> <p>
<p> <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
<a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a> </p>
</p> </div>
</div> </div>
</div>
</neon-animatable>
</neon-animated-pages>
</div> </div>
<div data-role="content"> <div data-role="content">

156
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"> <div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <paper-tabs hidescrollbuttons noink>
@ -19,95 +19,81 @@
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent suggestedTabContent hide" data-index="0">
<neon-animatable> <div id="activePrograms" class="homePageSection">
<div class="pageTabContent suggestedTabContent" data-index="0"> <h1 class="listHeader">${HeaderWhatsOnTV}</h1>
<div id="activePrograms" class="homePageSection"> <div class="activeProgramItems itemsContainer noautoinit"></div>
<h1 class="listHeader">${HeaderWhatsOnTV}</h1> <br />
<div class="activeProgramItems itemsContainer noautoinit"></div> </div>
<br /> <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
</div> <h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
<div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;"> <div class="upcomingProgramItems itemsContainer noautoinit"></div>
<h1 class="listHeader">${HeaderUpcomingPrograms}</h1> <br />
<div class="upcomingProgramItems itemsContainer noautoinit"></div> </div>
<br /> <div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
</div> <div>
<div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;"> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
<div> <a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
<a href="livetvitems.html?type=movies" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingSportsItems itemsContainer noautoinit"></div>
<br />
</div>
<div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
<a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div>
<div class="upcomingKidsItems itemsContainer noautoinit"></div>
<br />
</div>
</div> </div>
</neon-animatable> <div class="upcomingTvMovieItems itemsContainer noautoinit"></div>
<neon-animatable> <br />
<div class="pageTabContent guideTabContent" style="width: auto;" data-index="1"> </div>
<div id="upcomingSports" class="homePageSection" style="margin-top: 1em;">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingSports}</h1>
<a href="livetvitems.html?type=sports" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
</div> </div>
</neon-animatable> <div class="upcomingSportsItems itemsContainer noautoinit"></div>
<neon-animatable> <br />
<div class="pageTabContent channelsTabContent" data-index="2"> </div>
<div class="viewSettings"> <div id="upcomingKids" class="homePageSection" style="margin-top: 1em;">
<div class="listTopPaging"> <div>
</div> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingForKids}</h1>
</div> <a href="livetvitems.html?type=kids" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><paper-button raised class="more mini noIcon">${ButtonMoreItems}</paper-button></a>
<div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
</div> </div>
</neon-animatable> <div class="upcomingKidsItems itemsContainer noautoinit"></div>
<neon-animatable> <br />
<div class="pageTabContent recordingsTabContent" data-index="3"> </div>
<div id="activeRecordings" class="homePageSection hide"> </div>
<h1 class="listHeader">${HeaderActiveRecordings}</h1> <div class="pageTabContent guideTabContent hide" style="width: auto;" data-index="1">
<div class="recordingItems itemsContainer"></div> </div>
<br /> <div class="pageTabContent channelsTabContent hide" data-index="2">
</div> <div class="viewSettings">
<div id="latestRecordings" class="homePageSection hide"> <div class="listTopPaging">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div class="recordingItems itemsContainer"></div>
<br />
</div>
<div id="recordingGroups" style="display: none;" class="homePageSection">
<h1 class="listHeader">
<a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
</h1>
<div id="recordingGroupItems"></div>
</div>
</div> </div>
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer" style="max-width: 800px; margin: 0 auto;"></div>
<div class="pageTabContent timersTabContent" data-index="4"> </div>
<div style="max-width: 700px; margin: 0 auto;" id="items"> <div class="pageTabContent recordingsTabContent hide" data-index="3">
</div> <div id="activeRecordings" class="homePageSection hide">
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
<div class="recordingItems itemsContainer"></div>
<br />
</div>
<div id="latestRecordings" class="homePageSection hide">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div> </div>
</neon-animatable> <div class="recordingItems itemsContainer"></div>
<neon-animatable> <br />
<div class="pageTabContent seriesTimersTabContent" data-index="5"> </div>
<div style="max-width: 700px; margin: 0 auto;" id="items"> <div id="recordingGroups" style="display: none;" class="homePageSection">
</div> <h1 class="listHeader">
</div> <a href="livetvrecordinglist.html">${HeaderAllRecordings}<img src="css/images/rightarrow.png" class="headerArrowImage" /></a>
</neon-animatable> </h1>
</neon-animated-pages> <div id="recordingGroupItems"></div>
</div>
</div>
<div class="pageTabContent timersTabContent hide" data-index="4">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>
<div class="pageTabContent seriesTimersTabContent hide" data-index="5">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>
</div> </div>
<div data-role="content"> <div data-role="content">

156
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"> <div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <paper-tabs hidescrollbuttons noink>
@ -19,96 +19,82 @@
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent hide" data-index="0">
<neon-animatable> <div id="resumableSection" style="display: none;" class="homePageSection">
<div class="pageTabContent" data-index="0"> <div>
<div id="resumableSection" style="display: none;" class="homePageSection"> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
<div> <paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="resumableItems" class="itemsContainer noautoinit">
</div>
</div>
<div class="homePageSection">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="recentlyAddedItems" class="itemsContainer noautoinit">
</div>
</div>
<div class="recommendations homePageSection">
</div>
<div class="noItemsMessage" style="display: none;">
<br />
<p>${MessageNoMovieSuggestionsAvailable}</p>
</div>
</div> </div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<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="viewSettings">
<div class="listTopPaging"> <div id="resumableItems" class="itemsContainer noautoinit">
&nbsp; </div>
</div> </div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
<div class="noItemsMessage" style="display: none; text-align: center;">
<p>${MessageNoCollectionsAvailable}</p>
</div>
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab> <div class="homePageSection">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div> </div>
</neon-animatable>
<neon-animatable> <div id="recentlyAddedItems" class="itemsContainer noautoinit">
<div class="pageTabContent" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable>
<div class="pageTabContent" data-index="5"> <div class="recommendations homePageSection">
<div class="viewSettings"> </div>
<div class="listTopPaging"> <div class="noItemsMessage" style="display: none;">
</div> <br />
</div> <p>${MessageNoMovieSuggestionsAvailable}</p>
<div class="itemsContainer" style="text-align:center;"></div> </div>
</div>
<div class="pageTabContent hide" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div> </div>
</neon-animatable> </div>
</neon-animated-pages> <div class="itemsContainer" style="text-align:center;"></div>
</div>
<div class="pageTabContent hide" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
</div>
<div class="pageTabContent hide" data-index="3">
<div class="viewSettings">
<div class="listTopPaging">
&nbsp;
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
<div class="noItemsMessage" style="display: none; text-align: center;">
<p>${MessageNoCollectionsAvailable}</p>
</div>
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
</div>
<div class="pageTabContent hide" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
</div> </div>
<div data-role="content"> <div data-role="content">

162
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"> <div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <paper-tabs hidescrollbuttons noink>
<paper-tab>${TabSuggestions}</paper-tab> <paper-tab>${TabSuggestions}</paper-tab>
@ -20,103 +20,87 @@
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent hide" data-index="0">
<neon-animatable> <div class="homePageSection">
<div class="pageTabContent" data-index="0"> <h1 class="listHeader">${HeaderLatestMusic}</h1>
<div class="homePageSection">
<h1 class="listHeader">${HeaderLatestMusic}</h1>
<div id="recentlyAddedSongs" class="itemsContainer noautoinit" style="text-align:left;"> <div id="recentlyAddedSongs" class="itemsContainer noautoinit" style="text-align:left;">
</div>
</div>
<div id="playlists" style="display: none;" class="homePageSection">
<h1 class="listHeader">${HeaderPlaylists}</h1>
<div class="itemsContainer noautoinit" style="text-align:left;">
</div>
</div>
<div id="recentlyPlayed" style="display: none;" class="homePageSection">
<h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
<div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
</div>
</div>
<div id="topPlayed" style="display: none;" class="homePageSection">
<h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
<div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
</div>
</div>
<div class="favoriteSections homePageSection"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable>
<div class="pageTabContent" data-index="1"> <div id="playlists" style="display: none;" class="homePageSection">
<div class="alphabetPicker"> <h1 class="listHeader">${HeaderPlaylists}</h1>
</div>
<div class="viewSettings"> <div class="itemsContainer noautoinit" style="text-align:left;">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable>
<div class="pageTabContent" data-index="2"> <div id="recentlyPlayed" style="display: none;" class="homePageSection">
<div class="alphabetPicker"> <h1 class="listHeader">${HeaderRecentlyPlayed}</h1>
</div>
<div class="viewSettings"> <div id="recentlyPlayedSongs" class="itemsContainer noautoinit" style="text-align:left;">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable>
<div class="pageTabContent" data-index="3"> <div id="topPlayed" style="display: none;" class="homePageSection">
<div class="alphabetPicker"> <h1 class="listHeader">${HeaderFrequentlyPlayed}</h1>
</div>
<div class="viewSettings"> <div id="topPlayedSongs" class="itemsContainer noautoinit" style="text-align: left;">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable>
<div class="pageTabContent" data-index="4"> <div class="favoriteSections homePageSection"></div>
<div class="viewSettings"> </div>
<div class="listTopPaging"> <div class="pageTabContent hide" data-index="1">
</div> <div class="alphabetPicker">
</div> </div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div> <div class="viewSettings">
<div class="listTopPaging">
</div> </div>
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer paddedItemsContainer"></div>
<div class="pageTabContent" data-index="5"> </div>
<div class="viewSettings"> <div class="pageTabContent hide" data-index="2">
<div class="listTopPaging"> <div class="alphabetPicker">
</div> </div>
</div> <div class="viewSettings">
<div id="items" class="itemsContainer paddedItemsContainer"></div> <div class="listTopPaging">
</div> </div>
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
<div class="pageTabContent" data-index="6"> </div>
<div class="viewSettings"> <div class="pageTabContent hide" data-index="3">
<div class="listTopPaging"> <div class="alphabetPicker">
</div> </div>
</div> <div class="viewSettings">
<div id="items" class="itemsContainer paddedItemsContainer"></div> <div class="listTopPaging">
</div> </div>
</neon-animatable> </div>
</neon-animated-pages> <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<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>
<div class="pageTabContent hide" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="pageTabContent hide" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</div> </div>
<div data-role="content"> <div data-role="content">

38
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"> <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <paper-tabs hidescrollbuttons noink>
@ -13,35 +13,29 @@
</div> </div>
</div> </div>
<neon-animated-pages> <div class="pageTabsContainer">
<neon-animatable> <div class="pageTabContent albumTabContent hide">
<div class="pageTabContent albumTabContent">
<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="viewSettings"> <div class="viewSettings">
<div class="listTopPaging"> <div class="listTopPaging">
</div> </div>
</div> </div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div> <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
<neon-animatable> <div class="pageTabContent photoTabContent hide">
</neon-animatable> <div class="viewSettings">
<neon-animatable> <div class="listTopPaging">
<div class="pageTabContent videoTabContent">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div> </div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
</neon-animatable> <div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</neon-animated-pages> </div>
<div class="pageTabContent videoTabContent hide">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</div>
<div data-role="content"> <div data-role="content">
</div> </div>

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

@ -75,12 +75,12 @@
var page = this; var page = this;
var tabs = page.querySelector('paper-tabs'); 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) { pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected)); loadTab(page, parseInt(e.detail.selectedTabIndex));
}); });
}); });

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

@ -26,10 +26,10 @@
pageIdOn('pageinit', "channelsPage", function () { pageIdOn('pageinit', "channelsPage", function () {
var page = this; var page = this;
var pages = page.querySelector('neon-animated-pages'); var pageTabsContainer = page.querySelector('.pageTabsContainer');
pages.addEventListener('tabchange', function (e) { pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected)); 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') { if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
var page = $.mobile.activePage; 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 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) { pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.target.selected)); loadTab(view, parseInt(e.detail.selectedTabIndex));
}); });
view.querySelector('.btnTakeTour').addEventListener('click', function () { view.querySelector('.btnTakeTour').addEventListener('click', function () {

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

@ -180,23 +180,6 @@
return AppInfo.isNativeApp; 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) { allowSwipe: function (target) {
function allowSwipeOn(elem) { function allowSwipeOn(elem) {
@ -246,39 +229,42 @@
}, },
configureSwipeTabs: function (ownerpage, tabs, pages) { selectedTab: function (pageTabsContainer, selected) {
if (LibraryBrowser.animatePaperTabs()) { if (selected == null) {
if (browserInfo.mobile) {
require(['slide-left-animation', 'slide-from-right-animation'], function () { return pageTabsContainer.selectedTabIndex;
pages.entryAnimation = 'slide-from-right-animation';
pages.exitAnimation = 'slide-left-animation';
});
} else {
require(['fade-in-animation', 'fade-out-animation'], function () {
pages.entryAnimation = 'fade-in-animation';
pages.exitAnimation = 'fade-out-animation';
});
}
} }
var pageCount = pages.querySelectorAll('neon-animatable').length; var tabs = pageTabsContainer.querySelectorAll('.pageTabContent');
for (var i = 0, length = tabs.length; i < length; i++) {
if (i == selected) {
tabs[i].classList.remove('hide');
} else {
tabs[i].classList.add('hide');
}
}
pageTabsContainer.selectedTabIndex = selected;
pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: selected
}
}));
},
configureSwipeTabs: function (ownerpage, tabs, pageTabsContainer) {
var pageCount = pageTabsContainer.querySelectorAll('.pageTabContent').length;
require(['hammer'], function (Hammer) { require(['hammer'], function (Hammer) {
var hammertime = new Hammer(pages); var hammertime = new Hammer(pageTabsContainer);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL }); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.on('swipeleft', function (e) { hammertime.on('swipeleft', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) { if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(pages.selected || '0'); var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
if (selected < (pageCount - 1)) { if (selected < (pageCount - 1)) {
if (LibraryBrowser.animatePaperTabs()) {
pages.entryAnimation = 'slide-from-right-animation';
pages.exitAnimation = 'slide-left-animation';
}
tabs.selectNext(); tabs.selectNext();
} }
} }
@ -286,12 +272,8 @@
hammertime.on('swiperight', function (e) { hammertime.on('swiperight', function (e) {
if (LibraryBrowser.allowSwipe(e.target)) { if (LibraryBrowser.allowSwipe(e.target)) {
var selected = parseInt(pages.selected || '0'); var selected = parseInt(LibraryBrowser.selectedTab(pageTabsContainer) || '0');
if (selected > 0) { if (selected > 0) {
if (LibraryBrowser.animatePaperTabs()) {
pages.entryAnimation = 'slide-from-left-animation';
pages.exitAnimation = 'slide-right-animation';
}
tabs.selectPrevious(); tabs.selectPrevious();
} }
} }
@ -303,7 +285,7 @@
return !LibraryBrowser.enableFullPaperTabs(); return !LibraryBrowser.enableFullPaperTabs();
}, },
configurePaperLibraryTabs: function (ownerpage, tabs, pages) { configurePaperLibraryTabs: function (ownerpage, tabs, pageTabsContainer) {
// Causing iron-select to not fire in IE and safari // Causing iron-select to not fire in IE and safari
if (browserInfo.chrome) { if (browserInfo.chrome) {
@ -317,7 +299,7 @@
tabs.noSlide = true; tabs.noSlide = true;
tabs.noBar = true; tabs.noBar = true;
} else { } else {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pages); LibraryBrowser.configureSwipeTabs(ownerpage, tabs, pageTabsContainer);
} }
if (libraryViewNav) { if (libraryViewNav) {
@ -333,9 +315,9 @@
var legacyTabs = ownerpage.querySelector('.legacyTabs'); var legacyTabs = ownerpage.querySelector('.legacyTabs');
if (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'); var anchors = legacyTabs.querySelectorAll('a');
for (var i = 0, length = anchors.length; i < length; i++) { for (var i = 0, length = anchors.length; i < length; i++) {
if (i == selected) { if (i == selected) {
@ -354,41 +336,10 @@
ownerpage.addEventListener('viewbeforeshow', LibraryBrowser.onTabbedpagebeforeshow); 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()) { if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
tabs.addEventListener('iron-select', function () { tabs.addEventListener('iron-select', function () {
var animateTab = !browserInfo.safari; LibraryBrowser.selectedTab(pageTabsContainer, this.selected);
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;
}
}); });
} }
}, },
@ -417,7 +368,7 @@
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) { onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
var pages = page.querySelector('neon-animated-pages'); var pageTabsContainer = page.querySelector('.pageTabsContainer');
if (isFirstLoad) { if (isFirstLoad) {
@ -437,29 +388,24 @@
tabs.selected = selected; tabs.selected = selected;
} else { } else {
pages.selected = selected; LibraryBrowser.selectedTab(pageTabsContainer, selected);
} }
} else { } else {
// Go back to the first tab // Go back to the first tab
if (LibraryBrowser.enableFullPaperTabs() && !e.detail.isRestored) { if (LibraryBrowser.enableFullPaperTabs() && !e.detail.isRestored) {
if (pages.selected) { if (LibraryBrowser.selectedTab(pageTabsContainer)) {
var entryAnimation = pages.entryAnimation;
var exitAnimation = pages.exitAnimation;
pages.entryAnimation = null;
pages.exitAnimation = null;
page.querySelector('paper-tabs').selected = 0; page.querySelector('paper-tabs').selected = 0;
pages.entryAnimation = entryAnimation;
pages.exitAnimation = exitAnimation;
return; return;
} }
} }
pages.dispatchEvent(new CustomEvent("tabchange", {})); pageTabsContainer.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: 0
}
}));
} }
}, },
@ -479,14 +425,9 @@
document.removeEventListener('pagebeforeshow', afterNavigate); document.removeEventListener('pagebeforeshow', afterNavigate);
if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) != -1) { if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) != -1) {
var pages = this.querySelector('neon-animated-pages'); var pageTabsContainer = this.querySelector('.pageTabsContainer');
if (pages) { if (pageTabsContainer) {
var entryAnimation = pages.entryAnimation;
var exitAnimation = pages.exitAnimation;
pages.entryAnimation = null;
pages.exitAnimation = null;
var tabs = this.querySelector('paper-tabs'); var tabs = this.querySelector('paper-tabs');
@ -497,9 +438,6 @@
var noSlide = tabs.noSlide; var noSlide = tabs.noSlide;
tabs.noSlide = true; tabs.noSlide = true;
tabs.selected = index; tabs.selected = index;
pages.entryAnimation = entryAnimation;
pages.exitAnimation = exitAnimation;
tabs.noSlide = noSlide; tabs.noSlide = noSlide;
}, delay); }, delay);
@ -1687,7 +1625,7 @@
function getValue(shape) { function getValue(shape) {
switch (shape) { switch (shape) {
case 'portrait': case 'portrait':
if (screenWidth >= 2200) return 10; if (screenWidth >= 2200) return 10;
if (screenWidth >= 2100) return 9; if (screenWidth >= 2100) return 9;
@ -3196,7 +3134,7 @@
markDislike: function (link) { markDislike: function (link) {
// TODO: remove jQuery // TODO: remove jQuery
require(['jQuery'], function($) { require(['jQuery'], function ($) {
var id = link.getAttribute('data-itemid'); var id = link.getAttribute('data-itemid');
var $link = $(link); var $link = $(link);

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

@ -197,12 +197,12 @@
var page = this; var page = this;
var tabs = page.querySelector('paper-tabs'); 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) { pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.target.selected)); loadTab(page, parseInt(e.detail.selectedTabIndex));
}); });
}); });

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

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

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

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

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

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

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

@ -234,13 +234,18 @@
function onPlaybackStop(e, state) { function onPlaybackStop(e, state) {
if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') { 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 baseUrl = 'tv.html';
var topParentId = params.topParentId; var topParentId = params.topParentId;
@ -255,10 +260,10 @@
} }
libraryBrowser.createCardMenus(view.querySelector('#resumableItems')); 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) { pageTabsContainer.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(this.selected)); loadTab(view, parseInt(e.detail.selectedTabIndex));
}); });
view.addEventListener('viewbeforeshow', function (e) { view.addEventListener('viewbeforeshow', function (e) {

142
dashboard-ui/tv.html
View file

@ -21,94 +21,78 @@
</div> </div>
</div> </div>
<div class="ehsContent fullWidth"> <div class="ehsContent fullWidth pageTabsContainer">
<neon-animated-pages> <div class="pageTabContent hide" data-index="0">
<neon-animatable> <div id="resumableSection" class="homePageSection">
<div class="pageTabContent" data-index="0"> <div>
<div id="resumableSection" class="homePageSection"> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1>
<div> <paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1> </div>
<paper-button raised class="submit mini categorySyncButton" data-category="Resume"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="resumableItems" class="itemsContainer noautoinit"> <div id="resumableItems" class="itemsContainer noautoinit">
</div> </div>
</div> </div>
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1> <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button> <paper-button raised class="submit mini categorySyncButton" data-category="NextUp"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="nextUpItems" class="itemsContainer">
</div>
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div> </div>
</neon-animatable> <div id="nextUpItems" class="itemsContainer">
<neon-animatable>
<div class="pageTabContent" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
<paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
</div>
<div id="latestEpisodes" class="itemsContainer">
</div>
</div>
</div> </div>
</neon-animatable> </div>
<neon-animatable> <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
<div class="pageTabContent" data-index="2"> </div>
<div id="upcomingItems"> <div class="pageTabContent hide" data-index="1">
</div> <div class="homePageSection">
<div class="noItemsMessage" style="display: none;"> <div>
<p>${MessageNothingHere}</p> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
<p> <paper-button raised class="submit mini categorySyncButton" data-category="Latest"><iron-icon icon="sync"></iron-icon><span>${ButtonSync}</span></paper-button>
<a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
</p>
</div>
</div> </div>
</neon-animatable> <div id="latestEpisodes" class="itemsContainer">
<neon-animatable>
<div class="pageTabContent" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable> </div>
<div class="pageTabContent" data-index="4"> <div class="pageTabContent hide" data-index="2">
<div class="viewSettings"> <div id="upcomingItems">
<div class="listTopPaging"> </div>
</div> <div class="noItemsMessage" style="display: none;">
</div> <p>${MessageNothingHere}</p>
<div id="items" class="itemsContainer paddedItemsContainer"></div> <p>
<a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>
</p>
</div>
</div>
<div class="pageTabContent hide" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
<div class="listTopPaging">
</div> </div>
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
<div class="pageTabContent" data-index="5"> </div>
<div class="viewSettings"> <div class="pageTabContent hide" data-index="4">
<div class="listTopPaging"> <div class="viewSettings">
</div> <div class="listTopPaging">
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div> </div>
</neon-animatable> </div>
<neon-animatable> <div id="items" class="itemsContainer paddedItemsContainer"></div>
<div class="pageTabContent" data-index="6"> </div>
<div class="viewSettings"> <div class="pageTabContent hide" data-index="5">
<div class="listTopPaging"> <div class="viewSettings">
</div> <div class="listTopPaging">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
</div> </div>
</neon-animatable> </div>
</neon-animated-pages> <div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<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>
</div> </div>
<div data-role="content"> <div data-role="content">