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,76 +1,71 @@
-define(['require', 'browser'], function (require, browser) {
-    'use strict';
+import require from 'require';
+import browser from 'browser';
+/* eslint-disable indent */
 
-    function LazyLoader(options) {
+    export class LazyLoader {
+        constructor(options) {
+            this.options = options;
+            this.observer;
+        }
 
-        this.options = options;
-    }
+        createObserver() {
+            const callback = this.options.callback;
 
-    if (browser.edge) {
-        require(['css!./lazyedgehack']);
-    }
+            const observer = new IntersectionObserver(
+                (entries, observer) => {
+                    entries.forEach(entry => {
+                        callback(entry);
+                    },
+                    {rootMargin: "50%"});
+                });
 
-    LazyLoader.prototype.createObserver = function () {
-        var callback = this.options.callback;
+            this.observer = observer;
+        }
 
-        var observer = new IntersectionObserver(
-            (entries, observer) => {
-                entries.forEach(entry => {
-                    callback(entry);
-                },
-                {rootMargin: "50%"});
+        addElements(elements) {
+            let observer = this.observer;
+
+            if (!observer) {
+                this.createObserver();
+                observer = this.observer;
+            }
+
+            Array.from(elements).forEach(element => {
+                observer.observe(element);
             });
-
-        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;
+        destroyObserver(elements) {
+            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(elements) {
+            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
+};