Migrate lazyloader-intesctionobserver to ES6

package.json

@@ -99,7 +99,8 @@
           "src/scripts/settings/webSettings.js",
           "src/scripts/dfnshelper.js",
           "src/scripts/imagehelper.js",
-          "src/scripts/inputManager.js"
+          "src/scripts/inputManager.js",
+          "src/components/lazyloader/lazyloader-intersectionobserver.js"
         ],
         "plugins": [
           "@babel/plugin-transform-modules-amd"

src/components/images/imageLoader.js

@@ -36,7 +36,6 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     }
 
     function lazyChildren(elem) {
-
         lazyLoader.lazyChildren(elem, fillImage);
     }
 

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,19 +1,17 @@
-define(['require', 'browser'], function (require, browser) {
+import require from 'require';
-    'use strict';
+import browser from 'browser';
-
+/* eslint-disable indent */
-    function LazyLoader(options) {
 
+    export class LazyLoader {
+        constructor(options) {
             this.options = options;
+            this.observer;
         }
 
-    if (browser.edge) {
+        createObserver() {
-        require(['css!./lazyedgehack']);
+            const callback = this.options.callback;
-    }
 
-    LazyLoader.prototype.createObserver = function () {
+            const observer = new IntersectionObserver(
-        var callback = this.options.callback;
-
-        var observer = new IntersectionObserver(
                 (entries, observer) => {
                     entries.forEach(entry => {
                         callback(entry);
@@ -22,55 +20,52 @@ define(['require', 'browser'], function (require, browser) {
                 });
 
             this.observer = observer;
-    };
+        }
 
-    LazyLoader.prototype.addElements = function (elements) {
+        addElements(elements) {
-
+            let observer = this.observer;
-        var observer = this.observer;
 
             if (!observer) {
                 this.createObserver();
                 observer = this.observer;
             }
 
-        this.elementCount = (this.elementCount || 0) + elements.length;
+            Array.from(elements).forEach(element => {
-
+                observer.observe(element);
-        for (var i = 0, length = elements.length; i < length; i++) {
+            });
-            observer.observe(elements[i]);
         }
-    };
 
-    LazyLoader.prototype.destroyObserver = function (elements) {
+        destroyObserver(elements) {
-
+            const observer = this.observer;
-        var observer = this.observer;
 
             if (observer) {
                 observer.disconnect();
                 this.observer = null;
             }
-    };
+        }
-
-    LazyLoader.prototype.destroy = function (elements) {
 
+        destroy(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
+};