Merge branch 'release/13.0.1'

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Version 13
 
+#### 13.0.1
+
+-   Fixed a JS error that could happen to IE11 users after going offline and back online
+-   Minor refactoring for better readibility and lighter code (and files)!
+
 #### 13.0.0
 
 -   Added the minified version of `dist/lazyload.esm.js` as `dist/lazyload.esm.min.js`, so now you can effortlessly use it with an ES module `import` statement when using `type="module"`

README.md

@@ -113,7 +113,7 @@ Please note that the video poster can be lazily loaded too.
 
 ## 👩‍💻 Getting started - Script
 
-The latest, recommended version of LazyLoad is **13.0.0**.
+The latest, recommended version of LazyLoad is **13.0.1**.
 
 ### To polyfill or not to polyfill IntersectionObserver?
 
@@ -128,14 +128,14 @@ If you prefer to load a polyfill, the regular LazyLoad behaviour is granted.
 The easiest way to use LazyLoad is to include the script from a CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"></script>
 ```
 
 Or, with the IntersectionObserver polyfill:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"></script>
 ```
 
 Then, in your javascript code:
@@ -168,7 +168,7 @@ Include RequireJS:
 Then `require` the AMD version of LazyLoad, like this:
 
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer-amd.js";
 
 /// Dynamically define the dependencies
@@ -214,7 +214,7 @@ Then include the script.
 ```html
 <script
     async
-    src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -247,7 +247,7 @@ Then include the script.
 ```html
 <script
     async
-    src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/lazyload.min.js"
+    src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/lazyload.min.js"
 ></script>
 ```
 

__tests__/lib/getFakeInstance.js

@@ -1,9 +1,9 @@
-import getSettings from "../../src/lazyload.defaults";
+import { getInstanceSettings } from "../../src/lazyload.defaults";
 
 export default customSettings => {
     return {
         _elements: [],
-        _settings: getSettings(customSettings),
+        _settings: getInstanceSettings(customSettings),
         loadingCount: 0
     };
 };

demos/amd_polyfill.html

@@ -448,7 +448,7 @@
             }
 
             var polyfillAmdUrl =
-                "https://cdn.jsdelivr.net/npm/intersection-observer-amd@1.0.0/intersection-observer-amd.js";
+                "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer.amd.min.js";
 
             var dependencies = [
                 "IntersectionObserver" in window ? null : polyfillAmdUrl,

demos/load.html

@@ -343,7 +343,7 @@
         </div>
     </body>
 
-    <script src="../dist/lazyload.min.js"></script>
+    <script src="../dist/lazyload.js"></script>
     <script>
         (function(w, d) {
             function logElementEvent(eventName, element) {
@@ -381,18 +381,22 @@
                 callback_finish: callback_finish
             });
 
-            const mouseoverHandler = event => {
+            function mouseoverHandler(event) {
                 var product = event.currentTarget;
                 var lazyImg = product.querySelector(".lazy-hover");
                 page_ll.load(lazyImg);
-            };
+            }
+
+            function nodeSetToArray(nodeSet) {
+                return Array.prototype.slice.call(nodeSet);
+            }
 
-            const initializeMouseBehaviour = function() {
+            function initializeMouseBehaviour() {
                 const products = document.querySelectorAll(".product");
-                products.forEach(product => {
+                nodeSetToArray(products).forEach(function(product) {
                     product.addEventListener("mouseover", mouseoverHandler, true);
                 });
-            };
+            }
 
             initializeMouseBehaviour();
         })(window, document);

dist/lazyload.amd.js

@@ -46,9 +46,9 @@ define(function () { 'use strict';
     callback_finish: null,
     use_native: false
   };
-  var getInstanceSettings = (function (customSettings) {
+  var getInstanceSettings = function getInstanceSettings(customSettings) {
     return _extends({}, defaultSettings, customSettings);
-  });
+  };
 
   /* Creates instance and notifies it through the window element */
   var createInstance = function createInstance(classObj, options) {
@@ -77,7 +77,7 @@ define(function () { 'use strict';
       options passed in (plain object or an array) */
 
 
-  function autoInitialize (classObj, options) {
+  var autoInitialize = function autoInitialize(classObj, options) {
     if (!options) {
       return;
     }
@@ -91,7 +91,7 @@ define(function () { 'use strict';
         createInstance(classObj, optionsItem);
       }
     }
-  }
+  };
 
   var dataPrefix = "data-";
   var processedDataName = "was-processed";
@@ -137,32 +137,6 @@ define(function () { 'use strict';
     });
   };
 
-  var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
-    if (!callback) {
-      return;
-    }
-
-    if (arg3 !== undefined) {
-      callback(arg1, arg2, arg3);
-      return;
-    }
-
-    if (arg2 !== undefined) {
-      callback(arg1, arg2);
-      return;
-    }
-
-    callback(arg1);
-  };
-
-  var updateLoadingCount = function updateLoadingCount(instance, plusMinus) {
-    instance.loadingCount += plusMinus;
-
-    if (instance._elements.length === 0 && instance.loadingCount === 0) {
-      safeCallback(instance._settings.callback_finish, instance);
-    }
-  };
-
   var getSourceTags = function getSourceTags(parentTag) {
     var sourceTags = [];
 
@@ -234,7 +208,7 @@ define(function () { 'use strict';
 
     if (setSourcesFunction) {
       setSourcesFunction(element, settings);
-      updateLoadingCount(instance, 1);
+      instance.loadingCount += 1;
       instance._elements = purgeOneElement(instance._elements, element);
       return;
     }
@@ -259,6 +233,24 @@ define(function () { 'use strict';
     element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
   };
 
+  var safeCallback = function safeCallback(callback, arg1, arg2, arg3) {
+    if (!callback) {
+      return;
+    }
+
+    if (arg3 !== undefined) {
+      callback(arg1, arg2, arg3);
+      return;
+    }
+
+    if (arg2 !== undefined) {
+      callback(arg1, arg2);
+      return;
+    }
+
+    callback(arg1);
+  };
+
   var genericLoadEventName = "load";
   var mediaLoadEventName = "loadeddata";
   var errorEventName = "error";
@@ -291,7 +283,11 @@ define(function () { 'use strict';
     removeClass(element, settings.class_loading);
     addClass(element, className);
     safeCallback(callback, element, instance);
-    updateLoadingCount(instance, -1);
+    instance.loadingCount -= 1;
+
+    if (instance._elements.length === 0 && instance.loadingCount === 0) {
+      safeCallback(settings.callback_finish, instance);
+    }
   };
 
   var addOneShotEventListeners = function addOneShotEventListeners(element, instance) {
@@ -309,17 +305,6 @@ define(function () { 'use strict';
   };
 
   var managedTags = ["IMG", "IFRAME", "VIDEO"];
-  var onEnter = function onEnter(element, entry, instance) {
-    var settings = instance._settings;
-    safeCallback(settings.callback_enter, element, entry, instance);
-
-    if (!settings.load_delay) {
-      revealAndUnobserve(element, instance);
-      return;
-    }
-
-    delayLoad(element, instance);
-  };
   var revealAndUnobserve = function revealAndUnobserve(element, instance) {
     var observer = instance._observer;
     revealElement(element, instance);
@@ -328,16 +313,23 @@ define(function () { 'use strict';
       observer.unobserve(element);
     }
   };
-  var onExit = function onExit(element, entry, instance) {
+  var revealElement = function revealElement(element, instance, force) {
     var settings = instance._settings;
-    safeCallback(settings.callback_exit, element, entry, instance);
 
-    if (!settings.load_delay) {
-      return;
+    if (!force && getWasProcessedData(element)) {
+      return; // element has already been processed and force wasn't true
     }
 
-    cancelDelayLoad(element);
+    if (managedTags.indexOf(element.tagName) > -1) {
+      addOneShotEventListeners(element, instance);
+      addClass(element, settings.class_loading);
+    }
+
+    setSources(element, instance);
+    setWasProcessedData(element);
+    safeCallback(settings.callback_reveal, element, instance);
   };
+
   var cancelDelayLoad = function cancelDelayLoad(element) {
     var timeoutId = getTimeoutData(element);
 
@@ -362,32 +354,40 @@ define(function () { 'use strict';
     }, loadDelay);
     setTimeoutData(element, timeoutId);
   };
-  var revealElement = function revealElement(element, instance, force) {
+
+  var onEnter = function onEnter(element, entry, instance) {
     var settings = instance._settings;
+    safeCallback(settings.callback_enter, element, entry, instance);
 
-    if (!force && getWasProcessedData(element)) {
-      return; // element has already been processed and force wasn't true
+    if (!settings.load_delay) {
+      revealAndUnobserve(element, instance);
+      return;
     }
 
-    if (managedTags.indexOf(element.tagName) > -1) {
-      addOneShotEventListeners(element, instance);
-      addClass(element, settings.class_loading);
+    delayLoad(element, instance);
+  };
+  var onExit = function onExit(element, entry, instance) {
+    var settings = instance._settings;
+    safeCallback(settings.callback_exit, element, entry, instance);
+
+    if (!settings.load_delay) {
+      return;
     }
 
-    setSources(element, instance);
-    setWasProcessedData(element);
-    safeCallback(settings.callback_reveal, element, instance);
+    cancelDelayLoad(element);
   };
 
   var isIntersecting = function isIntersecting(entry) {
     return entry.isIntersecting || entry.intersectionRatio > 0;
   };
+
   var getObserverSettings = function getObserverSettings(settings) {
     return {
       root: settings.container === document ? null : settings.container,
       rootMargin: settings.thresholds || settings.threshold + "px"
     };
   };
+
   var setObserver = function setObserver(instance) {
     if (!supportsIntersectionObserver) {
       return false;
@@ -416,21 +416,21 @@ define(function () { 'use strict';
     });
   };
 
-  var nodeSetToArray = function nodeSetToArray(nodeSet) {
-    return Array.prototype.slice.call(nodeSet);
-  };
-
   var queryElements = function queryElements(settings) {
     return settings.container.querySelectorAll(settings.elements_selector);
   };
+
+  var nodeSetToArray = function nodeSetToArray(nodeSet) {
+    return Array.prototype.slice.call(nodeSet);
+  };
   var getElements = function getElements(elements, settings) {
     return purgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));
   };
 
   var retryLazyLoad = function retryLazyLoad(instance) {
     var settings = instance._settings;
     var errorElements = settings.container.querySelectorAll("." + settings.class_error);
-    errorElements.forEach(function (element) {
+    nodeSetToArray(errorElements).forEach(function (element) {
       removeClass(element, settings.class_error);
       resetWasProcessedData(element);
     });