Merge branch 'master' into media-session

src/components/images/imageLoader.js

@@ -1,50 +1,82 @@
-define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
-    'use strict';
-
-    var self = {};
-
-    function fillImage(elem, source, enableEffects) {
-
-        if (!elem) {
-            throw new Error('elem cannot be null');
-        }
-
-        if (!source) {
-            source = elem.getAttribute('data-src');
-        }
+import * as lazyLoader from 'lazyLoader';
+import * as userSettings from 'userSettings';
+import 'css!./style';
+/* eslint-disable indent */
 
+    export function lazyImage(elem, source = elem.getAttribute('data-src')) {
         if (!source) {
             return;
         }
 
-        fillImageElement(elem, source, enableEffects);
+        fillImageElement(elem, source);
     }
 
-    function fillImageElement(elem, source, enableEffects) {
-        imageFetcher.loadImage(elem, source).then(function () {
+    export function fillImage(entry) {
+        if (!entry) {
+            throw new Error('entry cannot be null');
+        }
 
-            if (enableEffects !== false) {
-                fadeIn(elem);
+        var source = undefined;
+        if (entry.target) {
+            source = entry.target.getAttribute('data-src');
+        } else {
+            source = entry;
+        }
+
+        if (entry.intersectionRatio > 0) {
+            if (source) fillImageElement(entry.target, source);
+        } else if (!source) {
+            emptyImageElement(entry.target);
+        }
+    }
+
+    function fillImageElement(elem, url) {
+        if (url === undefined) {
+            throw new Error('url cannot be undefined');
+        }
+
+        let preloaderImg = new Image();
+        preloaderImg.src = url;
+
+        preloaderImg.addEventListener('load', () => {
+            if (elem.tagName !== 'IMG') {
+                elem.style.backgroundImage = "url('" + url + "')";
+            } else {
+                elem.setAttribute('src', url);
+            }
+
+            if (userSettings.enableFastFadein()) {
+                elem.classList.add('lazy-image-fadein-fast');
+            } else {
+                elem.classList.add('lazy-image-fadein');
             }
 
             elem.removeAttribute('data-src');
         });
     }
 
-    function fadeIn(elem) {
-        if (userSettings.enableFastFadein()) {
-            elem.classList.add('lazy-image-fadein-fast');
+    function emptyImageElement(elem) {
+        var url;
+
+        if (elem.tagName !== 'IMG') {
+            url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
+            elem.style.backgroundImage = 'none';
         } else {
-            elem.classList.add('lazy-image-fadein');
+            url = elem.getAttribute('src');
+            elem.setAttribute('src', '');
         }
+
+        elem.setAttribute('data-src', url);
+
+        elem.classList.remove('lazy-image-fadein-fast');
+        elem.classList.remove('lazy-image-fadein');
     }
 
-    function lazyChildren(elem) {
-
+    export function lazyChildren(elem) {
         lazyLoader.lazyChildren(elem, fillImage);
     }
 
-    function getPrimaryImageAspectRatio(items) {
+    export function getPrimaryImageAspectRatio(items) {
 
         var values = [];
 
@@ -104,7 +136,7 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         return result;
     }
 
-    function fillImages(elems) {
+    export function fillImages(elems) {
 
         for (var i = 0, length = elems.length; i < length; i++) {
             var elem = elems[0];
@@ -112,10 +144,11 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         }
     }
 
-    self.fillImages = fillImages;
-    self.lazyImage = fillImage;
-    self.lazyChildren = lazyChildren;
-    self.getPrimaryImageAspectRatio = getPrimaryImageAspectRatio;
-
-    return self;
-});
+/* eslint-enable indent */
+export default {
+    fillImages: fillImages,
+    fillImage: fillImage,
+    lazyImage: lazyImage,
+    lazyChildren: lazyChildren,
+    getPrimaryImageAspectRatio: getPrimaryImageAspectRatio
+};

src/components/images/style.css

@@ -1,44 +1,13 @@
-.lazy-image-fadein {
+.cardImageContainer.lazy {
     opacity: 0;
-    animation: lazy-image-fadein 330ms ease-in normal both;
-    -webkit-animation-duration: 0.8s;
-    -moz-animation-duration: 0.8s;
-    -o-animation-duration: 0.8s;
-    animation-duration: 0.8s;
-    -webkit-animation-name: popInAnimation;
-    -moz-animation-name: popInAnimation;
-    -o-animation-name: popInAnimation;
-    animation-name: popInAnimation;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    -o-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
 }
 
-.lazy-image-fadein-fast {
-    animation: lazy-image-fadein 160ms ease-in normal both;
+.cardImageContainer.lazy.lazy-image-fadein {
+    opacity: 1;
+    transition: opacity 0.7s;
 }
 
-@keyframes lazy-image-fadein {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes popInAnimation {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
+.cardImageContainer.lazy.lazy-image-fadein-fast {
+    opacity: 1;
+    transition: opacity 0.2s;
 }

src/components/lazyloader/lazyedgehack.css

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

src/components/lazyloader/lazyloader-intersectionobserver.js

@@ -1,103 +1,67 @@
-define(['require', 'browser'], function (require, browser) {
-    'use strict';
+/* eslint-disable indent */
+    export class LazyLoader {
+        constructor(options) {
+            this.options = options;
+        }
 
-    function LazyLoader(options) {
+        createObserver() {
+            const callback = this.options.callback;
 
-        this.options = options;
-    }
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach(entry => {
+                        callback(entry);
+                    },
+                    {rootMargin: '50%'});
+                });
 
-    if (browser.edge) {
-        require(['css!./lazyedgehack']);
-    }
+            this.observer = observer;
+        }
 
-    LazyLoader.prototype.createObserver = function () {
+        addElements(elements) {
+            let observer = this.observer;
 
-        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();
-                        }
-                    }
-                }
+            if (!observer) {
+                this.createObserver();
+                observer = this.observer;
             }
-        },
-        observerOptions
-        );
 
-        this.observer = observer;
-    };
-
-    LazyLoader.prototype.addElements = function (elements) {
-
-        var observer = this.observer;
-
-        if (!observer) {
-            this.createObserver();
-            observer = this.observer;
+            Array.from(elements).forEach(element => {
+                observer.observe(element);
+            });
         }
 
-        this.elementCount = (this.elementCount || 0) + elements.length;
+        destroyObserver() {
+            const observer = this.observer;
 
-        for (var i = 0, length = elements.length; i < length; i++) {
-            observer.observe(elements[i]);
+            if (observer) {
+                observer.disconnect();
+                this.observer = null;
+            }
         }
-    };
 
-    LazyLoader.prototype.destroyObserver = function (elements) {
-
-        var observer = this.observer;
-
-        if (observer) {
-            observer.disconnect();
-            this.observer = null;
+        destroy() {
+            this.destroyObserver();
+            this.options = null;
         }
-    };
-
-    LazyLoader.prototype.destroy = function (elements) {
-
-        this.destroyObserver();
-        this.options = null;
-    };
+    }
 
     function unveilElements(elements, root, callback) {
-
         if (!elements.length) {
             return;
         }
-        var lazyLoader = new LazyLoader({
+        const lazyLoader = new LazyLoader({
             callback: callback
         });
         lazyLoader.addElements(elements);
     }
 
-    LazyLoader.lazyChildren = function (elem, callback) {
-
+    export function lazyChildren(elem, callback) {
         unveilElements(elem.getElementsByClassName('lazy'), elem, callback);
-    };
+    }
 
-    return LazyLoader;
-});
+/* eslint-enable indent */
+export default {
+    LazyLoader: LazyLoader,
+    lazyChildren: lazyChildren
+};

src/components/lazyloader/lazyloader-scroll.js

@@ -1,185 +0,0 @@
-define(['visibleinviewport', 'dom', 'browser'], function (visibleinviewport, dom, browser) {
-    'use strict';
-
-    var thresholdX;
-    var thresholdY;
-
-    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;
-});