From a0b6f768b37eedadfc8e0536b8f79e39548986b5 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sun, 28 Jun 2015 11:43:49 -0400 Subject: [PATCH] update detail images --- dashboard-ui/scripts/itembynamedetailpage.js | 2 +- dashboard-ui/scripts/itemdetailpage.js | 4 +- dashboard-ui/scripts/librarybrowser.js | 54 +++++++++++-------- dashboard-ui/scripts/livetvnewrecording.js | 2 +- dashboard-ui/scripts/livetvprogram.js | 2 +- dashboard-ui/scripts/livetvrecording.js | 2 +- dashboard-ui/scripts/livetvtimer.js | 2 +- dashboard-ui/scripts/musicrecommended.js | 40 +++++++++----- dashboard-ui/scripts/nowplayingpage.js | 4 +- dashboard-ui/scripts/search.js | 5 +- dashboard-ui/scripts/sections.js | 27 +++++----- dashboard-ui/scripts/tvlatest.js | 5 +- dashboard-ui/scripts/tvrecommended.js | 9 ++-- .../thirdparty/jquery.unveil-custom.js | 27 ++++++---- 14 files changed, 112 insertions(+), 73 deletions(-) diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js index 68d28eb8e7..730255fbd4 100644 --- a/dashboard-ui/scripts/itembynamedetailpage.js +++ b/dashboard-ui/scripts/itembynamedetailpage.js @@ -315,7 +315,7 @@ function renderDetails(page, item, context) { //LibraryBrowser.renderDetailPageBackdrop(page, item); - LibraryBrowser.renderOverview($('.itemOverview', page), item); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item); renderUserDataIcons(page, item); LibraryBrowser.renderLinks($('#itemLinks', page), item); diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 89363cd2b3..657baefaf9 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -123,7 +123,7 @@ var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : ""; - LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref); + LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref); } function onWebSocketMessage(e, data) { @@ -362,7 +362,7 @@ $('#itemTagline', page).hide(); } - LibraryBrowser.renderOverview($('.itemOverview', page), item); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item); $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 522f875883..87e67d44c6 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2660,40 +2660,51 @@ html += ""; - elem.html(html); + elem.innerHTML = html; + + function addClass(elems, name) { + for (var i = 0, length = elems.length; i < length; i++) { + elems[i].classList.add(name); + } + } + function removeClass(elems, name) { + for (var i = 0, length = elems.length; i < length; i++) { + elems[i].classList.remove(name); + } + } var page = $(elem).parents('.page')[0]; - var detailContentEffectedByImage = page.querySelector('.detailContentEffectedByImage'); + var detailContentEffectedByImage = page.querySelectorAll('.detailContentEffectedByImage'); if (shape == 'thumb') { - detailContentEffectedByImage.classList.add('detailContentEffectedByThumbImage'); - detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage'); - detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage'); + addClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage'); - elem.addClass('thumbDetailImageContainer'); - elem.removeClass('portraitDetailImageContainer'); - elem.removeClass('squareDetailImageContainer'); + elem.classList.add('thumbDetailImageContainer'); + elem.classList.add('portraitDetailImageContainer'); + elem.classList.add('squareDetailImageContainer'); } else if (shape == 'square') { - detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage'); - detailContentEffectedByImage.classList.add('detailContentEffectedBySquareImage'); - detailContentEffectedByImage.classList.remove('detailContentEffectedByPortraitImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage'); + addClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage'); - elem.removeClass('thumbDetailImageContainer'); - elem.removeClass('portraitDetailImageContainer'); - elem.addClass('squareDetailImageContainer'); + elem.classList.add('thumbDetailImageContainer'); + elem.classList.add('portraitDetailImageContainer'); + elem.classList.add('squareDetailImageContainer'); } else { - detailContentEffectedByImage.classList.remove('detailContentEffectedByThumbImage'); - detailContentEffectedByImage.classList.remove('detailContentEffectedBySquareImage'); - detailContentEffectedByImage.classList.add('detailContentEffectedByPortraitImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedByThumbImage'); + removeClass(detailContentEffectedByImage, 'detailContentEffectedBySquareImage'); + addClass(detailContentEffectedByImage, 'detailContentEffectedByPortraitImage'); - elem.removeClass('thumbDetailImageContainer'); - elem.addClass('portraitDetailImageContainer'); - elem.removeClass('squareDetailImageContainer'); + elem.classList.add('thumbDetailImageContainer'); + elem.classList.add('portraitDetailImageContainer'); + elem.classList.remove('squareDetailImageContainer'); } - elem.lazyChildren(); + ImageLoader.lazyChildren(elem); }, getDisplayTime: function (date) { @@ -2869,7 +2880,6 @@ var overview = item.Overview || ''; - elem = elem[0]; elem.innerHTML = overview; $('a', elem).each(function () { diff --git a/dashboard-ui/scripts/livetvnewrecording.js b/dashboard-ui/scripts/livetvnewrecording.js index 0218ed5801..d9379c3b38 100644 --- a/dashboard-ui/scripts/livetvnewrecording.js +++ b/dashboard-ui/scripts/livetvnewrecording.js @@ -15,7 +15,7 @@ $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program)); LibraryBrowser.renderGenres($('.itemGenres', page), program, context); - LibraryBrowser.renderOverview($('.itemOverview', page), program); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), program); $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(program)); diff --git a/dashboard-ui/scripts/livetvprogram.js b/dashboard-ui/scripts/livetvprogram.js index 6d5e99d8be..4992169abb 100644 --- a/dashboard-ui/scripts/livetvprogram.js +++ b/dashboard-ui/scripts/livetvprogram.js @@ -45,7 +45,7 @@ $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item)); LibraryBrowser.renderGenres($('.itemGenres', page), item, context); - LibraryBrowser.renderOverview($('.itemOverview', page), item); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item); $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item)); LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item); diff --git a/dashboard-ui/scripts/livetvrecording.js b/dashboard-ui/scripts/livetvrecording.js index fa6d62591d..6fe239556e 100644 --- a/dashboard-ui/scripts/livetvrecording.js +++ b/dashboard-ui/scripts/livetvrecording.js @@ -50,7 +50,7 @@ $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item)); LibraryBrowser.renderGenres($('.itemGenres', page), item, context); - LibraryBrowser.renderOverview($('.itemOverview', page), item); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item); $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item)); LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item); diff --git a/dashboard-ui/scripts/livetvtimer.js b/dashboard-ui/scripts/livetvtimer.js index acde2b74f0..993af28389 100644 --- a/dashboard-ui/scripts/livetvtimer.js +++ b/dashboard-ui/scripts/livetvtimer.js @@ -35,7 +35,7 @@ $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo)); LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context); - LibraryBrowser.renderOverview($('.itemOverview', page), programInfo); + LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), programInfo); if (programInfo.ImageTags && programInfo.ImageTags.Primary) { diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index 54ab165c79..c28d3abcf0 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -32,7 +32,8 @@ ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) { - $('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({ + var elem = page.querySelector('#recentlyAddedSongs'); + elem.innerHTML = LibraryBrowser.getPosterViewHtml({ items: items, showUnplayedIndicator: false, showLatestItemsPopup: false, @@ -42,7 +43,8 @@ lazy: true, cardLayout: true - })).lazyChildren(); + }); + ImageLoader.lazyChildren(elem); Dashboard.hideLoadingMsg(); }); @@ -66,13 +68,16 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + var elem; + if (result.Items.length) { - $('#recentlyPlayed', page).show(); + elem = $('#recentlyPlayed', page).show()[0]; } else { - $('#recentlyPlayed', page).hide(); + elem = $('#recentlyPlayed', page).hide()[0]; } - $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({ + var itemsContainer = elem.querySelector('.itemsContainer'); + itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({ items: result.Items, showUnplayedIndicator: false, shape: getSquareShape(), @@ -82,7 +87,8 @@ lazy: true, cardLayout: true - })).lazyChildren(); + }); + ImageLoader.lazyChildren(itemsContainer); }); @@ -106,13 +112,16 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + var elem; + if (result.Items.length) { - $('#topPlayed', page).show(); + elem = $('#topPlayed', page).show()[0]; } else { - $('#topPlayed', page).hide(); + elem = $('#topPlayed', page).hide()[0]; } - $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({ + var itemsContainer = elem.querySelector('.itemsContainer'); + itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({ items: result.Items, showUnplayedIndicator: false, shape: getSquareShape(), @@ -122,7 +131,8 @@ lazy: true, cardLayout: true - })).lazyChildren(); + }); + ImageLoader.lazyChildren(itemsContainer); }); @@ -147,12 +157,13 @@ var elem; if (result.Items.length) { - elem = $('#playlists', page).show(); + elem = $('#playlists', page).show()[0]; } else { - elem = $('#playlists', page).hide(); + elem = $('#playlists', page).hide()[0]; } - $('.itemsContainer', elem).html(LibraryBrowser.getPosterViewHtml({ + var itemsContainer = elem.querySelector('.itemsContainer'); + itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({ items: result.Items, shape: getSquareShape(), showTitle: true, @@ -162,7 +173,8 @@ showItemCounts: true, cardLayout: true - })).lazyChildren(); + }); + ImageLoader.lazyChildren(itemsContainer); }); } diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js index 65440a2d0f..39cf012c99 100644 --- a/dashboard-ui/scripts/nowplayingpage.js +++ b/dashboard-ui/scripts/nowplayingpage.js @@ -619,7 +619,9 @@ smallIcon: true }); - $(".playlist", page).html(html).trigger('create').lazyChildren(); + var itemsContainer = elem.querySelector('.playlist'); + itemsContainer.innerHTML = html; + ImageLoader.lazyChildren(html).trigger('create'); } function onListItemClick(e) { diff --git a/dashboard-ui/scripts/search.js b/dashboard-ui/scripts/search.js index 0eb8ca8fb0..6a9c30acbb 100644 --- a/dashboard-ui/scripts/search.js +++ b/dashboard-ui/scripts/search.js @@ -91,7 +91,10 @@ centerImage: true, textLines: getAdditionalTextLines }); - $('.itemsContainer', elem).html(html).lazyChildren(); + + var itemsContainer = elem.querySelector('.itemsContainer'); + itemsContainer.innerHTML = html; + ImageLoader.lazyChildren(html); } function requestSearchHintsForOverlay(elem, searchTerm) { diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js index e9baaf558d..1c722035dc 100644 --- a/dashboard-ui/scripts/sections.js +++ b/dashboard-ui/scripts/sections.js @@ -178,8 +178,9 @@ } elem.innerHTML = html; - - $(elem).lazyChildren().createCardMenus(); + ImageLoader.lazyChildren(elem); + + $(elem).createCardMenus(); }); } @@ -215,8 +216,9 @@ } elem.innerHTML = html; - - $(elem).lazyChildren().createCardMenus(); + ImageLoader.lazyChildren(elem); + + $(elem).createCardMenus(); }); } @@ -267,8 +269,9 @@ } elem.innerHTML = html; - - $(elem).lazyChildren().createCardMenus({ showDetailsMenu: false }); + ImageLoader.lazyChildren(elem); + + $(elem).createCardMenus({ showDetailsMenu: false }); handleLibraryLinkNavigations(elem); }); @@ -323,7 +326,8 @@ elem.innerHTML = html; - $(elem).lazyChildren().createCardMenus(); + ImageLoader.lazyChildren(elem); + $(elem).createCardMenus(); }); } @@ -412,8 +416,9 @@ var elem = page.querySelector('#channel' + channel.Id + ''); elem.innerHTML = html; - - $(elem).lazyChildren().trigger('create').createCardMenus(); + ImageLoader.lazyChildren(elem); + + $(elem).createCardMenus(); }); } @@ -453,9 +458,7 @@ }); elem.innerHTML = html; - - $(elem).lazyChildren().trigger('create'); - + ImageLoader.lazyChildren(elem); }); } diff --git a/dashboard-ui/scripts/tvlatest.js b/dashboard-ui/scripts/tvlatest.js index ab673fd518..04bb1f5040 100644 --- a/dashboard-ui/scripts/tvlatest.js +++ b/dashboard-ui/scripts/tvlatest.js @@ -67,8 +67,9 @@ }); } - $('#latestEpisodes', page).html(html).lazyChildren(); - + var elem = page.querySelector('#latestEpisodes'); + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); }); }); diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js index 82da287817..70639b22c8 100644 --- a/dashboard-ui/scripts/tvrecommended.js +++ b/dashboard-ui/scripts/tvrecommended.js @@ -92,7 +92,9 @@ }); } - $('#nextUpItems', page).html(html).lazyChildren(); + var elem = page.querySelector('#nextUpItems'); + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); Dashboard.hideLoadingMsg(); }); } @@ -166,8 +168,9 @@ }); } - $('#resumableItems', page).html(html).lazyChildren(); - + var elem = page.querySelector('#resumableItems'); + elem.innerHTML = html; + ImageLoader.lazyChildren(elem); }); } diff --git a/dashboard-ui/thirdparty/jquery.unveil-custom.js b/dashboard-ui/thirdparty/jquery.unveil-custom.js index 441a499b0f..49ad571105 100644 --- a/dashboard-ui/thirdparty/jquery.unveil-custom.js +++ b/dashboard-ui/thirdparty/jquery.unveil-custom.js @@ -97,12 +97,11 @@ var threshold = getThreshold(); - function isVisible() { - return visibleInViewport(this, true, false, 'both', threshold); + function isVisible(elem) { + return visibleInViewport(elem, true, false, 'both', threshold); } - function fillImage() { - var elem = this; + function fillImage(elem) { var source = elem.getAttribute('data-src'); if (source) { ImageStore.setImageInto(elem, source); @@ -116,19 +115,25 @@ return; } - var images = $(elems), - loaded; + var images = elems; unveilId++; var eventNamespace = 'unveil' + unveilId; - images.one("unveil", fillImage); - function unveil() { - var inview = images.filter(isVisible); - loaded = inview.trigger("unveil"); - images = images.not(loaded); + var remaining = []; + + for (var i = 0, length = images.length; i < length; i++) { + var img = images[i]; + if (isVisible(img)) { + fillImage(img); + } else { + remaining.push(img); + } + } + + images = remaining; if (!images.length) { Events.off(window, 'scroll.' + eventNamespace);