move emby-webcomponents to components and reflect paths

src/components/lazyloader/lazyedgehack.css

@@ -0,0 +1,5 @@
+.lazy {
+    /* In edge, intersection observer will not fire on 0px sized elements */
+    min-width: .1em;
+    min-height: .1em;
+}

src/components/lazyloader/lazyloader-intersectionobserver.js

@@ -0,0 +1,103 @@
+define(['require', 'browser'], function (require, browser) {
+    'use strict';
+
+    function LazyLoader(options) {
+
+        this.options = options;
+    }
+
+    if (browser.edge) {
+        require(['css!./lazyedgehack']);
+    }
+
+    LazyLoader.prototype.createObserver = function () {
+
+        var observerOptions = {};
+        var options = this.options;
+        var loadedCount = 0;
+        var callback = options.callback;
+
+        observerOptions.rootMargin = "50%";
+
+        var observerId = 'obs' + new Date().getTime();
+
+        var self = this;
+        var observer = new IntersectionObserver(function (entries) {
+            for (var j = 0, length2 = entries.length; j < length2; j++) {
+                var entry = entries[j];
+
+                if (entry.intersectionRatio > 0) {
+
+                    // Stop watching and load the image
+                    var target = entry.target;
+
+                    observer.unobserve(target);
+
+                    if (!target[observerId]) {
+                        target[observerId] = 1;
+                        callback(target);
+                        loadedCount++;
+
+                        if (loadedCount >= self.elementCount) {
+                            self.destroyObserver();
+                        }
+                    }
+                }
+            }
+        },
+            observerOptions
+        );
+
+        this.observer = observer;
+    };
+
+    LazyLoader.prototype.addElements = function (elements) {
+
+        var observer = this.observer;
+
+        if (!observer) {
+            this.createObserver();
+            observer = this.observer;
+        }
+
+        this.elementCount = (this.elementCount || 0) + elements.length;
+
+        for (var i = 0, length = elements.length; i < length; i++) {
+            observer.observe(elements[i]);
+        }
+    };
+
+    LazyLoader.prototype.destroyObserver = function (elements) {
+
+        var observer = this.observer;
+
+        if (observer) {
+            observer.disconnect();
+            this.observer = null;
+        }
+    };
+
+    LazyLoader.prototype.destroy = function (elements) {
+
+        this.destroyObserver();
+        this.options = null;
+    };
+
+    function unveilElements(elements, root, callback) {
+
+        if (!elements.length) {
+            return;
+        }
+        var lazyLoader = new LazyLoader({
+            callback: callback
+        });
+        lazyLoader.addElements(elements);
+    }
+
+    LazyLoader.lazyChildren = function (elem, callback) {
+
+        unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
+    };
+
+    return LazyLoader;
+});

src/components/lazyloader/lazyloader-scroll.js

@@ -0,0 +1,189 @@
+define(['visibleinviewport', 'dom', 'browser'], function (visibleinviewport, dom, browser) {
+    'use strict';
+
+    var thresholdX;
+    var thresholdY;
+
+    var requestIdleCallback = window.requestIdleCallback || function (fn) {
+        fn();
+    };
+
+    function resetThresholds() {
+
+        var threshold = 0.3;
+
+        thresholdX = screen.availWidth * threshold;
+        thresholdY = screen.availHeight * threshold;
+    }
+
+    function resetThresholdsOnTimer() {
+
+        setTimeout(resetThresholds, 500);
+    }
+
+    if (browser.iOS) {
+        dom.addEventListener(window, "orientationchange", resetThresholdsOnTimer, { passive: true });
+        dom.addEventListener(window, 'resize', resetThresholdsOnTimer, { passive: true });
+    } else {
+        dom.addEventListener(window, "orientationchange", resetThresholds, { passive: true });
+        dom.addEventListener(window, 'resize', resetThresholds, { passive: true });
+    }
+    resetThresholds();
+
+    function isVisible(elem) {
+        return visibleinviewport(elem, true, thresholdX, thresholdY);
+    }
+
+    var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
+    var self = {};
+
+    function cancelAll(tokens) {
+        for (var i = 0, length = tokens.length; i < length; i++) {
+
+            tokens[i] = true;
+        }
+    }
+
+    function unveilElementsInternal(instance, callback) {
+
+        var unveiledElements = [];
+        var cancellationTokens = [];
+        var loadedCount = 0;
+
+        function unveilInternal(tokenIndex) {
+
+            var anyFound = false;
+            var out = false;
+
+            var elements = instance.elements;
+            // TODO: This out construct assumes left to right, top to bottom
+
+            for (var i = 0, length = elements.length; i < length; i++) {
+
+                if (cancellationTokens[tokenIndex]) {
+                    return;
+                }
+                if (unveiledElements[i]) {
+                    continue;
+                }
+                var elem = elements[i];
+                if (!out && isVisible(elem)) {
+                    anyFound = true;
+                    unveiledElements[i] = true;
+                    callback(elem);
+                    loadedCount++;
+                } else {
+
+                    if (anyFound) {
+                        out = true;
+                    }
+                }
+            }
+
+            if (loadedCount >= elements.length) {
+                dom.removeEventListener(document, 'focus', unveil, {
+                    capture: true,
+                    passive: true
+                });
+                dom.removeEventListener(document, 'scroll', unveil, {
+                    capture: true,
+                    passive: true
+                });
+                dom.removeEventListener(document, wheelEvent, unveil, {
+                    capture: true,
+                    passive: true
+                });
+                dom.removeEventListener(window, 'resize', unveil, {
+                    capture: true,
+                    passive: true
+                });
+            }
+        }
+
+        function unveil() {
+
+            cancelAll(cancellationTokens);
+
+            var index = cancellationTokens.length;
+            cancellationTokens.length++;
+
+            setTimeout(function () {
+                unveilInternal(index);
+            }, 1);
+        }
+
+        dom.addEventListener(document, 'focus', unveil, {
+            capture: true,
+            passive: true
+        });
+        dom.addEventListener(document, 'scroll', unveil, {
+            capture: true,
+            passive: true
+        });
+        dom.addEventListener(document, wheelEvent, unveil, {
+            capture: true,
+            passive: true
+        });
+        dom.addEventListener(window, 'resize', unveil, {
+            capture: true,
+            passive: true
+        });
+
+        unveil();
+    }
+
+    function LazyLoader(options) {
+
+        this.options = options;
+    }
+
+    LazyLoader.prototype.createObserver = function () {
+
+        unveilElementsInternal(this, this.options.callback);
+        this.observer = 1;
+    };
+
+    LazyLoader.prototype.addElements = function (elements) {
+
+        this.elements = this.elements || [];
+
+        for (var i = 0, length = elements.length; i < length; i++) {
+            this.elements.push(elements[i]);
+        }
+
+        var observer = this.observer;
+
+        if (!observer) {
+            this.createObserver();
+        }
+
+    };
+
+    LazyLoader.prototype.destroyObserver = function (elements) {
+
+    };
+
+    LazyLoader.prototype.destroy = function (elements) {
+
+        this.destroyObserver();
+        this.options = null;
+    };
+
+    function unveilElements(elements, root, callback) {
+
+        if (!elements.length) {
+            return;
+        }
+        var lazyLoader = new LazyLoader({
+            callback: callback
+        });
+        lazyLoader.addElements(elements);
+    }
+
+    LazyLoader.lazyChildren = function (elem, callback) {
+
+        unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
+    };
+
+    return LazyLoader;
+});