update image lazy loading

dashboard-ui/apiclient/store.js

@@ -10,6 +10,7 @@
         if (defaultObject) {
             try {
                 defaultObject.setItem('_test', '0');
+                defaultObject.removeItem('_test');
                 isDefaultAvailable = true;
             } catch (e) {
 

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;

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);
         });
 
     });

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") {

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 = '';

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);
 
         });
     }

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 = '';
 

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++) {

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 = '';

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,23 +20,20 @@
     *       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,
+        thresholdX = thresholdX || 0;
-            vpWidth = $w.width(),
+        thresholdY = thresholdY || 0;
-            vpHeight = $w.height(),
-            direction = (direction) ? direction : 'both',
-            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
 
-        if (typeof t.getBoundingClientRect === 'function') {
+        var vpWidth = window.innerWidth,
+            vpHeight = window.innerHeight;
 
         // Use this native browser method, if available.
-            var rec = t.getBoundingClientRect(),
+        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,
@@ -48,42 +41,13 @@
             vVisible = partial ? tViz || bViz : tViz && bViz,
             hVisible = partial ? lViz || rViz : lViz && rViz;
 
-            if (direction === 'both')
+        return vVisible && hVisible;
-                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));
-        }
     }
 
     var unveilId = 0;
 
     function isVisible(elem) {
-        return visibleInViewport(elem, true, false, 'both');
+        return visibleInViewport(elem, true);
     }
 
     function fillImage(elem) {
@@ -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();
 
 })();