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

lazy load scripts

This commit is contained in:
Luke Pulverenti 2015-05-17 15:50:37 -04:00
parent 0a670a4635
commit c5802fc5ab
38 changed files with 224 additions and 162 deletions

View file

@ -50,8 +50,10 @@
<label for="selectView">${LabelView}</label>
<select id="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="PosterCard">${OptionPosterCard}</option>
<option value="List">${OptionList}</option>
<option value="Thumb">${OptionThumb}</option>
<option value="ThumbCard">${OptionThumbCard}</option>
</select>
</div>
<br />

View file

@ -77,7 +77,7 @@
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: #fff;
margin: 8px;
margin: 7px;
}
.ui-page-theme-b .visualCardBox {

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage">
<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="gamesrecommended.html">${TabSuggestions}</a>
<a href="#" class="ui-btn-active">${TabGames}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="liveTvItemsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}">
<div id="liveTvItemsPage" data-role="page" class="page libraryPage liveTvPage" data-contextname="${HeaderLiveTv}" data-require="scripts/livetvitems,scripts/queryfilters">
<div class="libraryViewNav">
<a href="livetvsuggested.html" class="ui-btn-active">${TabSuggestions}</a>
<a href="livetvguide.html">${TabGuide}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="movieGenresPage" data-role="page" class="page libraryPage">
<div id="movieGenresPage" data-role="page" class="page libraryPage" data-require="scripts/moviegenres">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="moviesrecommended.html">${TabSuggestions}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="moviePeoplePage" data-role="page" class="page libraryPage">
<div id="moviePeoplePage" data-role="page" class="page libraryPage" data-require="scripts/moviepeople">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="moviesrecommended.html">${TabSuggestions}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="moviesPage" data-role="page" class="page libraryPage collectionEditorPage">
<div id="moviesPage" data-role="page" class="page libraryPage collectionEditorPage" data-require="scripts/movies,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="moviesrecommended.html">${TabSuggestions}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="movieStudiosPage" data-role="page" class="page libraryPage">
<div id="movieStudiosPage" data-role="page" class="page libraryPage" data-require="scripts/moviestudios">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="moviesrecommended.html">${TabSuggestions}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="movieTrailersPage" data-role="page" class="page libraryPage">
<div id="movieTrailersPage" data-role="page" class="page libraryPage" data-require="scripts/movietrailers">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="moviesrecommended.html">${TabSuggestions}</a>
@ -141,9 +141,6 @@
</div>
</div>
<script type="text/javascript">
$('.popupTrailerReelForm').off('submit', MovieTrailerPage.onSubmit).on('submit', MovieTrailerPage.onSubmit);
</script>
</div>
</body>
</html>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="musicAlbumArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbumartists">
<div id="musicAlbumArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbumartists,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="musicrecommended.html">${TabSuggestions}</a>
<a href="songs.html" class="musicSongsTab">${TabSongs}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="musicAlbumsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbums">
<div id="musicAlbumsPage" data-role="page" class="page libraryPage" data-require="scripts/musicalbums,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="musicrecommended.html">${TabSuggestions}</a>
<a href="songs.html" class="musicSongsTab">${TabSongs}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="musicArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicartists">
<div id="musicArtistsPage" data-role="page" class="page libraryPage" data-require="scripts/musicartists,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="musicrecommended.html">${TabSuggestions}</a>
<a href="songs.html" class="musicSongsTab">${TabSongs}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="musicVideosPage" data-role="page" class="page libraryPage" data-require="scripts/musicvideos">
<div id="musicVideosPage" data-role="page" class="page libraryPage" data-require="scripts/musicvideos,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="musicrecommended.html">${TabSuggestions}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="photosPage" data-role="page" class="page libraryPage">
<div id="photosPage" data-role="page" class="page libraryPage" data-require="scripts/photos,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="photos.html" class="ui-btn-active lnkPhotoAlbums">${TabAlbums}</a>

View file

@ -46,12 +46,6 @@
updateFilterControls();
var trigger = false;
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "List") {
html = LibraryBrowser.getListViewHtml({

View file

@ -1,6 +1,6 @@
(function ($, document) {
var view = "Poster";
var view = LibraryBrowser.getDefaultItemsView('Poster', 'PosterCard');
// The base query options
var query = {
@ -55,12 +55,6 @@
context = 'folders';
}
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Backdrop") {
html = LibraryBrowser.getPosterViewHtml({

View file

@ -92,7 +92,7 @@
});
}
$(document).on('pageinit', "#liveTvItemsPage", function () {
$(document).on('pageinitdepends', "#liveTvItemsPage", function () {
var page = this;
@ -137,7 +137,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#liveTvItemsPage", function () {
}).on('pageshown', "#liveTvItemsPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -168,10 +168,6 @@
}
});
}).on('pageshow', "#liveTvItemsPage", function () {
var page = this;
updateFilterControls(page);
});

View file

@ -53,15 +53,6 @@
updateFilterControls(page);
var trigger = false;
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Thumb') {
view = 'ThumbCard';
}
else if (view == 'Poster') {
view = 'PosterCard';
}
}
if (result.TotalRecordCount) {
if (view == "List") {

View file

@ -39,15 +39,6 @@
updateFilterControls(page);
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Thumb') {
view = 'ThumbCard';
}
else if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,
@ -118,7 +109,7 @@
$('#selectView', page).val(view).selectmenu('refresh');
}
$(document).on('pageinit', "#movieGenresPage", function () {
$(document).on('pageinitdepends', "#movieGenresPage", function () {
var page = this;
@ -163,7 +154,7 @@
LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
});
}).on('pagebeforeshow', "#movieGenresPage", function () {
}).on('pageshown', "#movieGenresPage", function () {
var page = this;
query.ParentId = LibraryMenu.getTopParentId();
@ -189,8 +180,6 @@
}
});
}).on('pageshow', "#movieGenresPage", function () {
updateFilterControls(this);
});

View file

@ -88,7 +88,7 @@
$('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
}
$(document).on('pageinit', "#moviePeoplePage", function () {
$(document).on('pageinitdepends', "#moviePeoplePage", function () {
var page = this;
@ -140,7 +140,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#moviePeoplePage", function () {
}).on('pageshown', "#moviePeoplePage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -156,8 +156,6 @@
reloadItems(this);
}).on('pageshow', "#moviePeoplePage", function () {
updateFilterControls(this);
});

View file

@ -216,7 +216,7 @@
}
}
$(document).on('pageinit', "#moviesPage", function () {
$(document).on('pageinitdepends', "#moviesPage", function () {
var page = this;
@ -399,7 +399,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#moviesPage", function () {
}).on('pageshown', "#moviesPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -427,10 +427,6 @@
}
});
}).on('pageshow', "#moviesPage", function () {
var page = this;
updateFilterControls(page);
filtersLoaded = false;

View file

@ -2,19 +2,11 @@
function getView() {
if (AppInfo.hasLowImageBandwidth) {
return 'PosterCard';
}
return 'PosterCard';
}
function getResumeView() {
if (AppInfo.hasLowImageBandwidth) {
return 'ThumbCard';
}
return 'ThumbCard';
}
@ -33,9 +25,6 @@
function loadLatest(page, userId, parentId) {
var limit = 18;
if (AppInfo.hasLowImageBandwidth) {
limit = 10;
}
var options = {

View file

@ -72,7 +72,7 @@
$('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
}
$(document).on('pageinit', "#movieStudiosPage", function () {
$(document).on('pageinitdepends', "#movieStudiosPage", function () {
var page = this;
@ -99,7 +99,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#movieStudiosPage", function () {
}).on('pageshown', "#movieStudiosPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -115,8 +115,6 @@
reloadItems(this);
}).on('pageshow', "#movieStudiosPage", function () {
updateFilterControls(this);
});

View file

@ -141,7 +141,14 @@
});
}
$(document).on('pageinit', "#movieTrailersPage", function () {
function onSubmit() {
var page = $(this).parents('.page');
playReel(page);
return false;
}
$(document).on('pageinitdepends', "#movieTrailersPage", function () {
var page = this;
@ -206,7 +213,9 @@
});
}).on('pagebeforeshow', "#movieTrailersPage", function () {
$('.popupTrailerReelForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pageshown', "#movieTrailersPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -232,20 +241,7 @@
}
});
}).on('pageshow', "#movieTrailersPage", function () {
updateFilterControls(this);
});
window.MovieTrailerPage = {
onSubmit: function () {
var page = $(this).parents('.page');
playReel(page);
return false;
}
};
})(jQuery, document);

View file

@ -46,12 +46,6 @@
updateFilterControls(page);
var trigger = false;
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "List") {
html = LibraryBrowser.getListViewHtml({

View file

@ -44,12 +44,6 @@
updateFilterControls(page);
var trigger = false;
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,

View file

@ -47,12 +47,6 @@
updateFilterControls(page);
var trigger = false;
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "List") {
html = LibraryBrowser.getListViewHtml({

View file

@ -1,5 +1,7 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Thumb', 'ThumbCard');
// The base query options
var query = {
@ -26,13 +28,6 @@
$(document).scrollTop(0);
var html = '';
var view = 'Thumb';
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Thumb') {
view = 'ThumbCard';
}
}
$('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
startIndex: query.StartIndex,

View file

@ -1,5 +1,7 @@
(function ($, document) {
var view = LibraryBrowser.getDefaultItemsView('Poster', 'PosterCard');
// The base query options
var query = {
@ -37,14 +39,6 @@
updateFilterControls(page);
var view = 'Poster';
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,

View file

@ -40,12 +40,6 @@
updateFilterControls(page);
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Poster") {
// Poster
html = LibraryBrowser.getPosterViewHtml({
@ -218,7 +212,7 @@
}
}
$(document).on('pageinit', "#photosPage", function () {
$(document).on('pageinitdepends', "#photosPage", function () {
var page = this;
@ -283,7 +277,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#photosPage", function () {
}).on('pageshown', "#photosPage", function () {
var page = this;
@ -311,8 +305,6 @@
}
});
}).on('pageshow', "#photosPage", function () {
updateFilterControls(this);
});

View file

@ -0,0 +1,158 @@
(function (window) {
function renderOptions(page, selector, cssClass, items) {
var elem;
if (items.length) {
elem = $(selector, page).show();
} else {
elem = $(selector, page).hide();
}
var html = '';
// style="margin: -.2em -.8em;"
html += '<div data-role="controlgroup">';
var index = 0;
var idPrefix = 'chk' + selector.substring(1);
html += items.map(function (filter) {
var itemHtml = '';
var id = idPrefix + index;
itemHtml += '<label for="' + id + '">' + filter + '</label>';
itemHtml += '<input id="' + id + '" type="checkbox" data-filter="' + filter + '" data-mini="true" class="' + cssClass + '" />';
index++;
return itemHtml;
}).join('');
html += '</div>';
$('.filterOptions', elem).html(html).trigger('create');
}
function renderFilters(page, result) {
// If there's a huge number of these they will be really show to render
if (result.Tags) {
result.Tags.length = Math.min(result.Tags.length, 50);
}
renderOptions(page, '.genreFilters', 'chkGenreFilter', result.Genres);
renderOptions(page, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings);
renderOptions(page, '.tagFilters', 'chkTagFilter', result.Tags);
renderOptions(page, '.yearFilters', 'chkYearFilter', result.Years);
}
function onFiltersLoaded(page, query, reloadItemsFn) {
$('.chkGenreFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Genres || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Genres = filters;
reloadItemsFn();
});
$('.chkTagFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Tags || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Tags = filters;
reloadItemsFn();
});
$('.chkYearFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.Years || "";
var delimiter = ',';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.Years = filters;
reloadItemsFn();
});
$('.chkOfficialRatingFilter', page).on('change', function () {
var filterName = this.getAttribute('data-filter');
var filters = query.OfficialRatings || "";
var delimiter = '|';
filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
if (this.checked) {
filters = filters ? (filters + delimiter + filterName) : filterName;
}
query.StartIndex = 0;
query.OfficialRatings = filters;
reloadItemsFn();
});
}
function loadFilters(page, userId, itemQuery, reloadItemsFn) {
return ApiClient.getJSON(ApiClient.getUrl('Items/Filters', {
UserId: userId,
ParentId: itemQuery.ParentId,
IncludeItemTypes: itemQuery.IncludeItemTypes
})).done(function (result) {
renderFilters(page, result);
onFiltersLoaded(page, itemQuery, reloadItemsFn);
});
}
function onPageShow(page, query) {
query.Genres = null;
query.Years = null;
query.OfficialRatings = null;
query.Tags = null;
}
window.QueryFilters = {
loadFilters: loadFilters,
onPageShow: onPageShow
};
})(window);

View file

@ -130,7 +130,7 @@
}
}
$(document).on('pageinit', "#songsPage", function () {
$(document).on('pageinitdepends', "#songsPage", function () {
var page = this;
@ -174,7 +174,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#songsPage", function () {
}).on('pageshown', "#songsPage", function () {
var page = this;
@ -185,8 +185,6 @@
reloadItems(page);
}).on('pageshow', "#songsPage", function () {
updateFilterControls(this);
});

View file

@ -39,15 +39,6 @@
updateFilterControls(page);
if (AppInfo.hasLowImageBandwidth) {
if (view == 'Thumb') {
view = 'ThumbCard';
}
else if (view == 'Poster') {
view = 'PosterCard';
}
}
if (view == "Thumb") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,

View file

@ -105,6 +105,14 @@
});
}
function enableScrollX() {
return AppInfo.isTouchPreferred;
}
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function loadResume(page) {
var parentId = LibraryMenu.getTopParentId();
@ -146,7 +154,7 @@
html += LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
shape: getThumbShape(),
showTitle: true,
showParentTitle: true,
lazy: true,
@ -159,7 +167,7 @@
html += LibraryBrowser.getPosterViewHtml({
items: result.Items,
shape: "backdrop",
shape: getThumbShape(),
showTitle: true,
showParentTitle: true,
overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth,
@ -178,6 +186,12 @@
var page = this;
if (enableScrollX()) {
$('#resumableItems', page).addClass('hiddenScrollX');
} else {
$('#resumableItems', page).removeClass('hiddenScrollX');
}
reload(page);
});

View file

@ -202,7 +202,7 @@
}
}
$(document).on('pageinit', "#tvShowsPage", function () {
$(document).on('pageinitdepends', "#tvShowsPage", function () {
var page = this;
@ -360,7 +360,7 @@
reloadItems(page);
});
}).on('pagebeforeshow', "#tvShowsPage", function () {
}).on('pageshown', "#tvShowsPage", function () {
query.ParentId = LibraryMenu.getTopParentId();
@ -387,8 +387,6 @@
}
});
}).on('pageshow', "#tvShowsPage", function () {
updateFilterControls(this);
});

View file

@ -5,7 +5,7 @@
var page = this;
var limit = AppInfo.hasLowImageBandwidth ?
18 :
24 :
40;
var query = {

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="songsPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist">
<div id="songsPage" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist" data-require="scripts/songs,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="musicrecommended.html">${TabSuggestions}</a>
<a href="#" class="ui-btn-active">${TabSongs}</a>

View file

@ -4,7 +4,7 @@
<title>Emby</title>
</head>
<body>
<div id="tvShowsPage" data-role="page" class="page libraryPage">
<div id="tvShowsPage" data-role="page" class="page libraryPage" data-require="scripts/tvshows,scripts/queryfilters">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="tvrecommended.html">${TabSuggestions}</a>
<a href="tvlatest.html">${TabLatest}</a>