Merge branch 'release/17.2.0'

Author: verlok

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 100,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": "*.js",
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Version 17
 
+#### 17.2.0
+
+- Rolling back the "`data` attribute cleanup" feature that was released on 16.1.0 and was causing issues like [#484](https://github.com/verlok/vanilla-lazyload/issues/484) when more than one instance of LazyLoad were working on the same elements of the page - the script is also 500 bytes lighter now
+
 #### 17.1.3
 
 - Added missing types (#480), thanks to @ar53n (#482)

README.md

@@ -190,7 +190,7 @@ Please note that the video poster can be lazily loaded too.
 
 ## 👩‍💻 Getting started - Script
 
-The latest, recommended version of LazyLoad is **17.1.3**.
+The latest, recommended version of LazyLoad is **17.2.0**.
 
 Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).
 
@@ -207,14 +207,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/vanilla-lazyload@17.1.3/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/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/vanilla-lazyload@17.1.3/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/dist/lazyload.min.js"></script>
 ```
 
 Then, in your javascript code:
@@ -246,7 +246,7 @@ Include RequireJS:
 Then `require` the AMD version of LazyLoad, like this:
 
 ```js
-var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.3/dist/lazyload.amd.min.js";
+var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/dist/lazyload.amd.min.js";
 var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer-amd.js";
 
 /// Dynamically define the dependencies
@@ -291,7 +291,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.3/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -325,7 +325,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.3/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.2.0/dist/lazyload.min.js"
 ></script>
 ```
 

dist/lazyload.amd.js

@@ -367,7 +367,6 @@ define(function () { 'use strict';
   var manageApplied = function manageApplied(element, settings, instance) {
     addClass(element, settings.class_applied);
     setStatus(element, statusApplied);
-    removeDataMultiBackground(element, settings);
 
     if (settings.unobserve_completed) {
       // Unobserve now because we can't do it on load
@@ -381,49 +380,6 @@ define(function () { 'use strict';
     addClass(element, settings.class_loading);
     setStatus(element, statusLoading);
     safeCallback(settings.callback_loading, element, instance);
-  }; // REMOVE DATA ATTRIBUTES --------------
-
-  var removeDataImg = function removeDataImg(element, settings) {
-    setData(element, settings.data_src, null);
-    setData(element, settings.data_srcset, null);
-    setData(element, settings.data_sizes, null);
-    forEachPictureSource(element, function (sourceTag) {
-      setData(sourceTag, settings.data_srcset, null);
-      setData(sourceTag, settings.data_sizes, null);
-    });
-  };
-  var removeDataIframe = function removeDataIframe(element, settings) {
-    setData(element, settings.data_src, null);
-  };
-  var removeDataVideo = function removeDataVideo(element, settings) {
-    setData(element, settings.data_src, null);
-    setData(element, settings.data_poster, null);
-    forEachVideoSource(element, function (sourceTag) {
-      setData(sourceTag, settings.data_src, null);
-    });
-  };
-  var removeDataFunctions = {
-    IMG: removeDataImg,
-    IFRAME: removeDataIframe,
-    VIDEO: removeDataVideo
-  };
-  var removeDataBackground = function removeDataBackground(element, settings) {
-    setData(element, settings.data_bg, null);
-    setData(element, settings.data_bg_hidpi, null);
-  };
-  var removeDataMultiBackground = function removeDataMultiBackground(element, settings) {
-    setData(element, settings.data_bg_multi, null);
-    setData(element, settings.data_bg_multi_hidpi, null);
-  };
-  var removeDataAttributes = function removeDataAttributes(element, settings) {
-    var removeDataFunction = removeDataFunctions[element.tagName];
-
-    if (removeDataFunction) {
-      removeDataFunction(element, settings);
-      return;
-    }
-
-    removeDataBackground(element, settings);
   };
 
   var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"];
@@ -480,7 +436,6 @@ define(function () { 'use strict';
     doneHandler(element, settings, instance);
     addClass(element, settings.class_loaded);
     setStatus(element, statusLoaded);
-    removeDataAttributes(element, settings);
     safeCallback(settings.callback_loaded, element, instance);
     if (!goingNative) checkFinish(settings, instance);
   };
@@ -536,7 +491,6 @@ define(function () { 'use strict';
   var loadNative = function loadNative(element, settings, instance) {
     addOneShotEventListeners(element, settings, instance);
     setSources(element, settings);
-    removeDataAttributes(element, settings);
     setStatus(element, statusNative);
   };