ab-interchange - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

AB-interchange.js

@@ -23,3 +23,3 @@ ;(function(name, definition) {
 
-    this.preInit();
+    this.init();
   };
@@ -35,3 +35,3 @@
   Plugin.prototype = {
-    preInit: function() {
+    init: function() {
       // no need for a plugin in case of 'picture' with good support
@@ -41,6 +41,2 @@ if (this.el.parentNode.matches('picture') && window.HTMLPictureElement)
 
-      this.init();
-    },
-
-    init: function() {
       this._events()
@@ -63,3 +59,3 @@ ._generateRules()
       var rulesList = [],
-          rules = this.el.getAttribute(attrSrc).match(/\[[^\]]+\]/g);
+          rules     = this.el.getAttribute(attrSrc).match(/\[[^\]]+\]/g);
 
@@ -83,18 +79,15 @@ for (var i = 0, len = rules.length; i < len; i++) {
     _updatePath: function() {
-      var match        = false,
-          path         = '',
-          rules        = this.rules,
-          //currentQuery = AB.mediaQuery.current,
-          rule;
+      var path  = '',
+          rules = this.rules;
 
       // Iterate through each rule
       for (var i = 0, len = rules.length; i < len; i++) {
-        rule = rules[i];
-
-        if (AB.mediaQuery.is(rule.query)) {
-          path  = rule.path;
-          match = true;
-        }
+        if (AB.mediaQuery.is(rules[i].query))
+          path = rules[i].path;
       }
 
+      // if path hasn't changed, return
+      if (this.currentPath === path)
+        return this;
+
       this.currentPath = path;
@@ -107,3 +100,4 @@ this._replace();
     _onScroll: function() {
-      if (this._inView()) this._replace();
+      if (this._inView())
+        this._replace();
 
@@ -114,6 +108,6 @@ return this;
     _events: function() {
-      var that = this,
-          scrollTimer;
+      var that      = this,
+          throttled = false;
 
-      // updata path then replace
+      // update path, then replace
       window.addEventListener('changed.ab-mediaquery', that._updatePath.bind(that));
@@ -123,6 +117,10 @@
         window.addEventListener('scroll', function() {
-          clearTimeout(scrollTimer);
-          scrollTimer = setTimeout(function() {
+          if (!throttled) {
             that._onScroll.call(that);
-          }, that.settings.delay);
+
+            throttled = true;
+            setTimeout(function() {
+              throttled = false;
+            }, that.settings.delay);
+          }
         });
@@ -135,22 +133,35 @@ }
     _inView: function() {
-      var scrollTop    = window.scrollY,
-          windowHeight = window.innerHeight;
+      var windowHeight = window.innerHeight,
+          rect         = this.el.getBoundingClientRect();
 
-      return this.el.getBoundingClientRect().top + scrollTop  <= scrollTop + windowHeight * this.settings.offscreen;
+      return (
+        rect.top >= - windowHeight * this.settings.offscreen &&
+        rect.bottom <= windowHeight + windowHeight * this.settings.offscreen
+      );
     },
 
+    _triggerEvent: function() {
+      var event = new CustomEvent('replaced.ab-interchange', {
+        detail: {
+          element: this.el
+        }
+      });
+      window.dispatchEvent(event);
+
+      return this;
+    },
+
     _replace: function() {
       var that      = this,
-          path      = that.currentPath,
-          eventName = 'replaced.ab-interchange';
+          path      = that.currentPath;
 
-      that.mode = that._defineMode();
-
       if ( !that.settings.lazy || (that.settings.lazy && that._inView()) ) {
         // images
         if (that.mode === 'img') {
+          if (that.el.src === path)
+            return that;
+
           that.el.src = path;
 
-          var event = new CustomEvent(eventName);
-          window.dispatchEvent(event);
+          that._triggerEvent();
 
@@ -162,2 +173,5 @@ return that;
         if (that.mode === 'background') {
+          if (that.el.style.backgroundImage === 'url("'+path+'")')
+            return that;
+
           if (path)
@@ -170,4 +184,3 @@ path = 'url('+path+')';
 
-          var event = new CustomEvent(eventName);
-          window.dispatchEvent(event);
+          that._triggerEvent();
 
@@ -178,28 +191,28 @@ return that;
         // HTML
-        var request = new XMLHttpRequest();
-        if (!path) {
-          that.el.innerHTML = '';
-          return that;
-        }
+        if (that.mode === 'ajax') {
+          if (!path) {
+            that.el.innerHTML = '';
+            return that;
+          }
 
-        request.open('GET', path, true);
+          var request = new XMLHttpRequest();
+          request.open('GET', path, true);
+          request.onload = function() {
+            if (this.status >= 200 && this.status < 400) {
+              that.el.innerHTML = this.response;
 
-        request.onload = function() {
-          if (this.status >= 200 && this.status < 400) {
-            var resp = this.response;
+              that._triggerEvent();
+            } else {
+              that.el.innerHTML = '';
+            }
+          };
 
-            that.el.innerHTML = resp;
-
-            var event = new CustomEvent(eventName);
-            window.dispatchEvent(event);
-          } else {
+          request.onerror = function() {
             that.el.innerHTML = '';
-          }
-        };
+          };
 
-        request.onerror = function() {
-          that.el.innerHTML = '';
-        };
+          request.send();
 
-        request.send();
+          return that;
+        }
 
@@ -211,3 +224,3 @@ return that;
 
-  AB[pluginName] = function(options) {
+  var abInterchange = function(options) {
     var elements = document.querySelectorAll('['+ attr +']');
@@ -220,3 +233,3 @@ for (var i = 0, len = elements.length; i < len; i++) {
 
-  return AB.interchange;
+  return abInterchange;
 }));

package.json

 {
   "name": "ab-interchange",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "AB-interchange: While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.",
@@ -5,0 +5,0 @@ "main": "ab-interchange.js",

README.md

@@ -70,4 +70,4 @@ # AB-interchange
   lazy      : true, // or false
-  delay     : 100   // debounce time on scroll event (only when lazy loading is true)
-  offscreen : 1.5    // load items only when in the view + 0.5 by default
+  delay     : 100,  // debounce time on scroll event (only when lazy loading is true)
+  offscreen : 1.5,   // load items only when in the view + 0.5 by default
 });
@@ -128,1 +128,11 @@ ```
 ```
+
+
+### JS event
+'replaced.ab-interchange' event is automatically triggered when an img (or else) changed:
+
+```
+window.addEventListener('replaced.ab-interchange', function(e){
+  console.log(e.detail.element);
+});
+```

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

11433

increased by3.91%

Lines of code

168

increased by7.01%

Number of lines in readme file

136

increased by7.09%

No dependency changes