From bcb026427ecbd0f8acf7274dffa3c391b7aa7ded Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 24 Apr 2016 19:14:55 -0400
Subject: [PATCH] update lazy loading

---
 .../emby-lazyload-image/lazyload-image.html   |  8 ++--
 dashboard-ui/components/ironcardlist.js       |  4 +-
 dashboard-ui/components/scrollthreshold.js    | 41 ++++++++++++++-----
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html b/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
index 0707ef4e48..2fedd03977 100644
--- a/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
+++ b/dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html
@@ -1,8 +1,8 @@
 <script>
-    
-    require(['imageFetcher'], function (imageFetcher) {
-        window.ImageFetcherLazyloadImage = imageFetcher;
-    });
+
+    //require(['imageFetcher'], function (imageFetcher) {
+    //    window.ImageFetcherLazyloadImage = imageFetcher;
+    //});
 
     /**
      * <lazyload-image>
diff --git a/dashboard-ui/components/ironcardlist.js b/dashboard-ui/components/ironcardlist.js
index 9821b69be0..dab3e594b6 100644
--- a/dashboard-ui/components/ironcardlist.js
+++ b/dashboard-ui/components/ironcardlist.js
@@ -6,6 +6,8 @@
 
         var maxPhysical = 80;
 
+        // is="lazyload-image" 
+
         html += '<template is="dom-bind">\
 	<iron-list as="item" id="ironList" scroll-target="' + scrollTarget + '" max-physical-count="' + maxPhysical + '" style="width:96%;" grid>\
 		<template>\
@@ -14,7 +16,7 @@
 					<div class="cardScalable">\
 						<div class="cardPadder"></div>\
 						<a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">\
-							<img class$="{{item.imageClass}}" is="lazyload-image" src$="{{item.imgUrl}}" />\
+							<img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />\
                             <div inner-h-t-m-l="{{item.overlayHtml}}"></div>\
 						</a>\
 					</div>\
diff --git a/dashboard-ui/components/scrollthreshold.js b/dashboard-ui/components/scrollthreshold.js
index d701f648c2..a52c3a423a 100644
--- a/dashboard-ui/components/scrollthreshold.js
+++ b/dashboard-ui/components/scrollthreshold.js
@@ -2,20 +2,26 @@
 
     function thresholdMonitor(elem, horizontal, lowerTolerance, upperTolerance) {
 
-        var defaultTolerance = horizontal ? (screen.availWidth / 2) : (screen.availHeight / 2);
+        var defaultTolerance = horizontal ? (screen.availWidth / 3) : (screen.availHeight / 3);
         lowerTolerance = lowerTolerance || defaultTolerance;
         upperTolerance = upperTolerance || defaultTolerance;
 
         var self = this;
-        var upperTriggered = false;
+        var upperTriggered = true;
         var lowerTriggered = false;
+        var isWindow = elem == window || elem.tagName == 'HTML' || elem.tagName == 'BODY';
 
         var scrollSize;
 
         function getScrollSize() {
 
             if (!scrollSize) {
-                scrollSize = horizontal ? (elem.scrollWidth - elem.clientWidth) : (elem.scrollHeight - elem.offsetHeight);
+
+                if (isWindow) {
+                    scrollSize = horizontal ? (document.documentElement.scrollWidth - document.documentElement.offsetWidth) : (document.documentElement.scrollHeight - document.documentElement.offsetHeight);
+                } else {
+                    scrollSize = horizontal ? (elem.scrollWidth - elem.offsetWidth) : (elem.scrollHeight - elem.offsetHeight);
+                }
             }
             return scrollSize;
         }
@@ -26,25 +32,40 @@
                 return;
             }
 
-            var position = horizontal ? elem.scrollLeft : elem.scrollTop;
+            var position;
+
+            if (isWindow) {
+                position = horizontal ? window.pageXOffset : window.pageYOffset;
+            } else {
+                position = horizontal ? elem.scrollLeft : elem.scrollTop;
+            }
 
             //console.log('onscroll: ' + position + '-' + getScrollSize());
 
             // Detect upper threshold
-            if (!upperTriggered && position < upperTolerance) {
-                upperTriggered = true;
-                events.trigger(self, 'upper-threshold');
+            if (position < upperTolerance) {
+                if (!upperTriggered) {
+                    upperTriggered = true;
+                    events.trigger(self, 'upper-threshold');
+                }
+            } else {
+                upperTriggered = false;
             }
+
             // Detect lower threshold
-            if (!lowerTriggered && position >= (getScrollSize() - lowerTolerance)) {
+            if (position >= (getScrollSize() - lowerTolerance)) {
+                if (!lowerTriggered) {
+                    lowerTriggered = true;
+                    events.trigger(self, 'lower-threshold');
+                }
+            } else {
                 lowerTriggered = false;
-                events.trigger(self, 'lower-threshold');
             }
         }
 
         self.reset = function () {
             self.resetSize();
-            upperTriggered = false;
+            upperTriggered = true;
             lowerTriggered = false;
         };