yall-js - npm Package Compare versions

Comparing version 3.1.5 to 3.1.6

dist/yall.js

@@ -26,3 +26,2 @@ 'use strict';
     const parentNode = element.parentNode;
-    let elements = [];
     let sourceNode;
@@ -38,8 +37,3 @@
 
-    elements = queryDOM("source", sourceNode);
-
-    for (let elementIndex in elements) {
-      yallFlipDataAttrs(elements[elementIndex]);
-    }
-
+    yallApplyFn(queryDOM("source", sourceNode), yallFlipDataAttrs);
     yallFlipDataAttrs(element);
@@ -60,8 +54,6 @@
 
-  const yallBind = element => {
+  const yallBindEvents = element => {
     for (let eventIndex in events) {
       element.addEventListener(eventIndex, events[eventIndex].listener || events[eventIndex], events[eventIndex].options || undefined);
     }
-
-    intersectionListener.observe(element);
   };
@@ -72,8 +64,57 @@
   const yallFlipDataAttrs = element => {
-    dataAttrs.forEach(dataAttr => {
-      if (dataAttr in element.dataset) {
+    for (let dataAttrIndex in dataAttrs) {
+      if (dataAttrs[dataAttrIndex] in element.dataset) {
         win["requestAnimationFrame"](() => {
-          element.setAttribute(dataAttr, element.dataset[dataAttr]);
+          element.setAttribute(dataAttrs[dataAttrIndex], element.dataset[dataAttrs[dataAttrIndex]]);
         });
       }
+    }
+  };
+
+  // Noticed lots of loops where a function simply gets executed on every
+  // member of an array. This abstraction eliminates that repetiive code.
+  const yallApplyFn = (items, fn) => {
+    for (let itemIndex in items) {
+      fn instanceof win[io] ? fn.observe(items[itemIndex]) : fn(items[itemIndex]);
+    }
+  };
+
+  const yallIntersectionObserve = entry => {
+    if (entry.isIntersecting || entry.intersectionRatio) {
+      const element = entry.target;
+
+      if (ric in win && idleLoadTimeout) {
+        win[ric](() => {
+          yallLoad(element);
+        }, {
+          timeout: idleLoadTimeout
+        });
+      } else {
+        yallLoad(element);
+      }
+
+      element.classList.remove(lazyClass);
+      intersectionListener.unobserve(element);
+      lazyElements = lazyElements.filter(lazyElement => lazyElement != element);
+
+      if (!lazyElements.length && !observeChanges) {
+        intersectionListener.disconnect();
+      }
+    }
+  };
+
+  const yallMutationObserve = newElement => {
+    if (lazyElements.indexOf(newElement) < 0) {
+      lazyElements.push(newElement);
+      yallBindEvents(newElement);
+      intersectionListener.observe(newElement);
+    }
+  };
+
+  const yallCreateMutationObserver = entry => {
+    new MutationObserver(() => {
+      yallApplyFn(queryDOM(), yallMutationObserve);
+    }).observe(entry, options.mutationObserverOptions || {
+      childList: true,
+      subtree: true
     });
@@ -87,5 +128,3 @@ };
   if (/baidu|(?:google|bing|yandex|duckduck)bot/i.test(navigator.userAgent)) {
-    for (let lazyElementIndex in lazyElements) {
-      yallLoad(lazyElements[lazyElementIndex]);
-    }
+    yallApplyFn(lazyElements, yallLoad);
 
@@ -96,26 +135,4 @@ return;
   if (io in win && `${io}Entry` in win) {
-    var intersectionListener = new win[io]((entries, observer) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting || entry.intersectionRatio) {
-          const element = entry.target;
-
-          if (ric in win && idleLoadTimeout) {
-            win[ric](() => {
-              yallLoad(element);
-            }, {
-              timeout: idleLoadTimeout
-            });
-          } else {
-            yallLoad(element);
-          }
-
-          element.classList.remove(lazyClass);
-          observer.unobserve(element);
-          lazyElements = lazyElements.filter(lazyElement => lazyElement != element);
-
-          if (!lazyElements.length && !observeChanges) {
-            intersectionListener.disconnect();
-          }
-        }
-      });
+    var intersectionListener = new win[io](entries => {
+      yallApplyFn(entries, yallIntersectionObserve);
     }, {
@@ -125,18 +142,7 @@ rootMargin: `${"threshold" in options ? options.threshold : 200}px 0%`
 
-    for (let lazyElementIndex in lazyElements) {
-      yallBind(lazyElements[lazyElementIndex]);
-    }
+    yallApplyFn(lazyElements, yallBindEvents);
+    yallApplyFn(lazyElements, intersectionListener);
 
     if (observeChanges) {
-      new MutationObserver(() => {
-        queryDOM().forEach(newElement => {
-          if (lazyElements.indexOf(newElement) < 0) {
-            lazyElements.push(newElement);
-            yallBind(newElement);
-          }
-        });
-      }).observe(queryDOM(options.observeRootSelector || "body")[0], options.mutationObserverOptions || {
-        childList: true,
-        subtree: true
-      });
+      yallApplyFn(queryDOM(options.observeRootSelector || "body"), yallCreateMutationObserver);
     }
@@ -143,0 +149,0 @@ }

package.json

 {
   "name": "yall-js",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "description": "Yet Another Lazy Loader",
@@ -41,12 +41,12 @@ "main": "./dist/yall.js",
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "eslint": "^6.1.0",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "eslint": "^6.4.0",
     "express": "^4.17.1",
-    "rollup": "^1.17.0",
+    "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-terser": "^5.1.1"
+    "rollup-plugin-terser": "^5.1.2"
   },
   "dependencies": {}
 }

README.md

@@ -114,7 +114,7 @@ # yall.js (Yet Another Lazy Loader)
 
-1., We've done away with the usual `data-src` attribute, and specified `preload="none"` to ensure the browser doesn't preload any portion of the video (which, depending on the browser, can't be guaranteed).
+1. We've done away with the usual `data-src` attribute, and specified `preload="none"` to ensure the browser doesn't preload any portion of the video (which, depending on the browser, can't be guaranteed).
 2. To lazy load the `poster` image itself, we specify the image to load in a `data-poster` attribute.
 3. The `controls` attribute is added here to allow the user to control video playback.
 
-**Note:** For the sake of your users, don't mix the above markup patterns. If a video is going to use `autoplay` to replace an animated image, lazy loading a placeholder image via `data-poster` isn't necessary. Furthermore, if you're unsure of what to do, let the browser handle this stuff and don't use yall.js to manage loading of videos.
+**Note:** For the sake of your users, don't mix the above markup patterns. If a video is going to use `autoplay` to replace an animated image, lazy loading a placeholder image via `data-poster` isn't necessary. Furthermore, if you're unsure of what to do, _let the browser handle this stuff and don't use yall.js to manage loading of videos_.
 
@@ -121,0 +121,0 @@ ### `<iframe>`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32881

increased by13.02%

Number of package files

6

increased by50%

Lines of code

247

increased by10.27%

No dependency changes