diff --git a/dashboard-ui/apiclient/store.js b/dashboard-ui/apiclient/store.js index bbe40ac6da..6599f47c1b 100644 --- a/dashboard-ui/apiclient/store.js +++ b/dashboard-ui/apiclient/store.js @@ -10,6 +10,7 @@ if (defaultObject) { try { defaultObject.setItem('_test', '0'); + defaultObject.removeItem('_test'); isDefaultAvailable = true; } catch (e) { diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.js b/dashboard-ui/components/imagedownloader/imagedownloader.js index 36ebb63f36..4bafbf5a26 100644 --- a/dashboard-ui/components/imagedownloader/imagedownloader.js +++ b/dashboard-ui/components/imagedownloader/imagedownloader.js @@ -65,7 +65,9 @@ html += getRemoteImageHtml(imagesResult.Images[i], imageType); } - $('.availableImagesList', page).html(html).lazyChildren(); + var availableImagesList = page.querySelector('.availableImagesList'); + availableImagesList.innerHTML = html; + ImageLoader.lazyChildren(availableImagesList); $('.btnNextPage', page).on('click', function () { browsableImageStartIndex += browsableImagePageSize; diff --git a/dashboard-ui/scripts/gamesrecommendedpage.js b/dashboard-ui/scripts/gamesrecommendedpage.js index c991299f81..d23d255423 100644 --- a/dashboard-ui/scripts/gamesrecommendedpage.js +++ b/dashboard-ui/scripts/gamesrecommendedpage.js @@ -19,14 +19,16 @@ ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) { - $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({ + var recentlyAddedItems = page.querySelector('#recentlyAddedItems'); + recentlyAddedItems.innerHTML = LibraryBrowser.getPosterViewHtml({ items: items, transparent: true, borderless: true, shape: 'auto', lazy: true - })).lazyChildren(); + }); + ImageLoader.lazyChildren(recentlyAddedItems); }); @@ -52,15 +54,16 @@ $('#recentlyPlayedSection', page).hide(); } - $('#recentlyPlayedItems', page).html(LibraryBrowser.getPosterViewHtml({ + var recentlyPlayedItems = page.querySelector('#recentlyPlayedItems'); + recentlyPlayedItems.innerHTML = LibraryBrowser.getPosterViewHtml({ items: result.Items, transparent: true, borderless: true, shape: 'auto', lazy: true - })).lazyChildren(); - + }); + ImageLoader.lazyChildren(recentlyPlayedItems); }); }); diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index e52aac767d..7fb809f8f1 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -725,6 +725,14 @@ }); } + $.fn.lazyChildren = function () { + + for (var i = 0, length = this.length; i < length; i++) { + ImageLoader.lazyChildren(this[i]); + } + return this; + }; + function renderSeriesAirTime(page, item, isStatic) { if (item.Type != "Series") { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index c023bc6cdb..7b3cddb152 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -428,6 +428,14 @@ }); }; + $.fn.lazyChildren = function () { + + for (var i = 0, length = this.length; i < length; i++) { + ImageLoader.lazyChildren(this[i]); + } + return this; + }; + function getNowPlayingTabsHtml(item) { var html = ''; diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js index bf7f9867eb..c0107cd93e 100644 --- a/dashboard-ui/scripts/moviesrecommended.js +++ b/dashboard-ui/scripts/moviesrecommended.js @@ -132,7 +132,9 @@ }); } - $('#resumableItems', page).html(html).lazyChildren(); + var resumableItems = page.querySelector('#resumableItems'); + resumableItems.innerHTML = html; + ImageLoader.lazyChildren(resumableItems); }); } diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 2fc5899600..9471a948a6 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -770,13 +770,16 @@ var Dashboard = { $(document.body).append(html); - var elem = $('#userFlyout').panel({}).lazyChildren().trigger('create').panel("open").on("panelclose", function () { + var userFlyout = document.querySelector('#userFlyout'); + ImageLoader.lazyChildren(userFlyout); + + $(userFlyout).panel({}).panel("open").on("panelclose", function () { $(this).off("panelclose").remove(); }); ConnectionManager.user(window.ApiClient).then(function (user) { - Dashboard.updateUserFlyout(elem, user); + Dashboard.updateUserFlyout(userFlyout, user); }); }); }, @@ -797,7 +800,9 @@ var Dashboard = { } html += user.name; - $('.userHeader', elem).html(html).lazyChildren(); + var userHeader = elem.querySelector('.userHeader'); + userHeader.innerHTML = html; + ImageLoader.lazyChildren(userHeader); html = ''; diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js index 785d90dc9e..199c1d8d23 100644 --- a/dashboard-ui/scripts/syncactivity.js +++ b/dashboard-ui/scripts/syncactivity.js @@ -218,6 +218,14 @@ } } + $.fn.lazyChildren = function () { + + for (var i = 0, length = this.length; i < length; i++) { + ImageLoader.lazyChildren(this[i]); + } + return this; + }; + function refreshData(page, jobs) { for (var i = 0, length = jobs.length; i < length; i++) { diff --git a/dashboard-ui/scripts/syncjob.js b/dashboard-ui/scripts/syncjob.js index 4e50fe0502..7056a57575 100644 --- a/dashboard-ui/scripts/syncjob.js +++ b/dashboard-ui/scripts/syncjob.js @@ -102,6 +102,14 @@ return html; } + $.fn.lazyChildren = function () { + + for (var i = 0, length = this.length; i < length; i++) { + ImageLoader.lazyChildren(this[i]); + } + return this; + }; + function renderJobItems(page, items) { var html = ''; diff --git a/dashboard-ui/thirdparty/jquery.unveil-custom.js b/dashboard-ui/thirdparty/jquery.unveil-custom.js index ebf830aef4..0fa8b64e74 100644 --- a/dashboard-ui/thirdparty/jquery.unveil-custom.js +++ b/dashboard-ui/thirdparty/jquery.unveil-custom.js @@ -1,8 +1,4 @@ -(function ($) { - -})(jQuery); - -/** +/** * jQuery Unveil * A very lightweight jQuery plugin to lazy load images * http://luis-almeida.github.com/unveil @@ -12,7 +8,7 @@ * https://github.com/luis-almeida */ -(function ($) { +(function () { /** * Copyright 2012, Digital Fusion @@ -24,66 +20,34 @@ * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ - var $w = $(window); var thresholdX = Math.max(screen.availWidth); var thresholdY = Math.max(screen.availHeight); - function visibleInViewport(elem, partial, hidden, direction) { + function visibleInViewport(elem, partial) { - var t = elem, - vpWidth = $w.width(), - vpHeight = $w.height(), - direction = (direction) ? direction : 'both', - clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; + thresholdX = thresholdX || 0; + thresholdY = thresholdY || 0; - if (typeof t.getBoundingClientRect === 'function') { + var vpWidth = window.innerWidth, + vpHeight = window.innerHeight; - // Use this native browser method, if available. - var rec = t.getBoundingClientRect(), - tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY, - bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY, - lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX, - rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX, - vVisible = partial ? tViz || bViz : tViz && bViz, - hVisible = partial ? lViz || rViz : lViz && rViz; + // Use this native browser method, if available. + var rec = elem.getBoundingClientRect(), + tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY, + bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY, + lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX, + rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX, + vVisible = partial ? tViz || bViz : tViz && bViz, + hVisible = partial ? lViz || rViz : lViz && rViz; - if (direction === 'both') - return clientSize && vVisible && hVisible; - else if (direction === 'vertical') - return clientSize && vVisible; - else if (direction === 'horizontal') - return clientSize && hVisible; - } else { - - var $t = $(elem); - var viewTop = $w.scrollTop(), - viewBottom = viewTop + vpHeight, - viewLeft = $w.scrollLeft(), - viewRight = viewLeft + vpWidth, - offset = $t.offset(), - _top = offset.top, - _bottom = _top + $t.height(), - _left = offset.left, - _right = _left + $t.width(), - compareTop = partial === true ? _bottom : _top, - compareBottom = partial === true ? _top : _bottom, - compareLeft = partial === true ? _right : _left, - compareRight = partial === true ? _left : _right; - - if (direction === 'both') - return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); - else if (direction === 'vertical') - return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); - else if (direction === 'horizontal') - return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); - } + return vVisible && hVisible; } var unveilId = 0; function isVisible(elem) { - return visibleInViewport(elem, true, false, 'both'); + return visibleInViewport(elem, true); } function fillImage(elem) { @@ -145,7 +109,7 @@ } function bindEvent(elems, method, name, fn) { - + for (var i = 0, length = elems.length; i < length; i++) { elems[i][method](name, fn); } @@ -168,16 +132,6 @@ unveilElements(elem.getElementsByClassName('lazy'), elem); } - $.fn.lazyChildren = function () { - - if (this.length == 1) { - lazyChildren(this[0]); - } else { - unveilElements($('.lazy', this)); - } - return this; - }; - function lazyImage(elem, url) { elem.setAttribute('data-src', url); @@ -190,7 +144,7 @@ lazyChildren: lazyChildren }; -})(window.jQuery || window.Zepto); +})(); (function () { @@ -227,7 +181,6 @@ self.setImageInto = setImageIntoElement; } - console.log('creating simpleImageStore'); window.ImageStore = new simpleImageStore(); })(); \ No newline at end of file