ab-interchange - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

AB-interchange.js

@@ -1,2 +0,2 @@
-!(function(name, definition) {
+;(function(name, definition) {
   if (typeof module !== 'undefined') {
@@ -14,5 +14,8 @@ module.exports = definition();
   function extend(){
-    for (var i=1; i<arguments.length; i++) {
+    for (var i = 1, len = arguments.length; i < len; i++) {
+      if (!arguments[i]) continue;
+
       for (var key in arguments[i]) {
-        if (arguments[i].hasOwnProperty(key)) arguments[0][key] = arguments[i][key];
+        if (!arguments[i].hasOwnProperty(key)) continue;
+        arguments[0][key] = arguments[i][key];
       }
@@ -45,5 +48,5 @@ }
     preInit: function() {
-      if (this.$element.closest('picture').length && window.HTMLPictureElement) {
+      // no need for a plugin in case of 'picture' with good support
+      if (this.$element.closest('picture').length && window.HTMLPictureElement)
         return this;
-      }
 
@@ -63,18 +66,12 @@ this.init();
     _defineMode: function() {
-      // Replacing images
-      if (this.$element[0].nodeName === 'IMG') {
+      // images
+      if (this.element.nodeName === 'IMG')
         return 'img';
-      }
 
-      // Replacing background images
-      else if (this.currentPath.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i) || this.currentPath === 'empty.bg') {
+      // background images
+      if (this.currentPath.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i) || this.currentPath === 'empty.bg')
         return 'bg';
-      }
 
-      // Replacing HTML
-      else {
-        return 'ajax';
-      }
-
-      return this;
+      // HTML
+      return 'ajax';
     },
@@ -93,5 +90,5 @@
       for (var i = 0, len = rules.length; i < len; i++) {
-        var rule    = rules[i].slice(1, -1).split(', '),
-            path    = rule.slice(0, -1).join(''),
-            query   = rule[rule.length - 1];
+        var rule  = rules[i].slice(1, -1).split(', '),
+            path  = rule.slice(0, -1).join(''),
+            query = rule[rule.length - 1];
 
@@ -110,8 +107,9 @@ rulesList.push({
     _setDefault: function() {
-      var path              = '',
-          rules             = this.rules;
+      var path  = '',
+          rules = this.rules,
+          rule;
 
       // Iterate through each rule
       for (var i = 0, len = rules.length; i < len; i++) {
-        var rule  = rules[i];
+        rule = rules[i];
 
@@ -128,10 +126,11 @@ // check if default value is provided
     _updatePath: function() {
-      var match         = false,
-          path          = '',
-          rules         = this.rules,
-          currentQuery  = AB.mediaQuery.current;
+      var match        = false,
+          path         = '',
+          rules        = this.rules,
+          currentQuery = AB.mediaQuery.current,
+          rule;
 
       // Iterate through each rule
       for (var i = 0, len = rules.length; i < len; i++) {
-        var rule  = rules[i];
+        rule = rules[i];
 
@@ -151,5 +150,5 @@ if (window.matchMedia(AB.mediaQuery.get(rule.query)).matches) {
     _onScroll: function() {
-      if (this._inView()) {
+      if (this._inView())
         this._replace();
-      }
+
       return this;
@@ -162,6 +161,4 @@ },
 
-      window.addEventListener('changed.ab-mediaquery', function(){
-        // updata path then replace
-        that._updatePath();
-      });
+      // updata path then replace
+      window.addEventListener('changed.ab-mediaquery', that._updatePath.bind(that));
 
@@ -181,4 +178,4 @@ if (that.settings.lazy) {
     _inView: function() {
-      var scrollTop     = $(window).scrollTop(),
-          windowHeight  = window.innerHeight;
+      var scrollTop    = $(window).scrollTop(),
+          windowHeight = window.innerHeight;
       return this.element.getBoundingClientRect().top + scrollTop  <= scrollTop + windowHeight * this.settings.offscreen;
@@ -195,7 +192,10 @@ },
       if ( !that.settings.lazy || (that.settings.lazy && that._inView()) ) {
-
+        // images
         if (that.mode === 'img') {
           that.$element.attr('src', path).load().trigger(trigger);
+          return that;
+        }
 
-        } else if (that.mode === 'bg') {
+        // background images
+        if (that.mode === 'bg') {
           if (path === 'empty.bg') {
@@ -206,13 +206,15 @@ that.$element.css({ 'background-image': 'none' }).trigger(trigger);
           }
+          return that;
+        }
 
+        // HTML
+        if (path === 'empty.ajax') {
+          that.$element.empty();
         } else {
-          if (path === 'empty.ajax') {
-            that.$element.empty();
-          } else {
-            $.get(path, function(response) {
-              that.$element.html(response).trigger(trigger);
-            });
-          }
+          $.get(path, function(response) {
+            that.$element.html(response).trigger(trigger);
+          });
         }
 
+        return that;
       }
@@ -222,9 +224,8 @@ }
 
-  function abInterchange(opt){
+  function abInterchange(options){
     var elements = document.querySelectorAll('[data-ab-interchange]');
 
     for (var i = 0, len = elements.length; i < len; i++) {
-      if (!elements[i].getAttribute('data-plugin_interchange')) {
-        elements[i].setAttribute('data-plugin_interchange', new Interchange(elements[i], opt));
-      }
+      if (elements[i].abInterchange) continue;
+      elements[i].abInterchange = new Interchange(elements[i], options);
     }
@@ -231,0 +232,0 @@ }

package.json

 {
   "name": "ab-interchange",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "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.",
@@ -26,4 +26,4 @@ "main": "ab-interchange.js",
   "dependencies": {
-    "ab-mediaquery": "^1.4.0"
+    "ab-mediaquery": "^1.4.4"
   }
 }

README.md

 # AB-interchange
 
-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
-- HTML content
+Responsive image loading is not an easy task even nowadays. Here is a solution to manage conditional (based on breakpoints) loading of:
+- **img** (even **picture** on unsupported browsers)
+- **background-image**
+- **HTML content**
 
-That plugin also has an lazy-loading option!.
+That plugin also has an lazy-loading option!
 
@@ -83,3 +83,3 @@ It's inspired by [Zurb Foundation](https://github.com/zurb/foundation-sites).
 
-To determine if it's a background-image changing, the script look for image file extensions (`gif|jpg|jpeg|tiff|png`).
+To determine if it's a background-image changing, the script looks for image file extensions (`gif|jpg|jpeg|tiff|png`).
 
@@ -86,0 +86,0 @@ ```

No alert changes

Improved metrics

Lines of code

177

increased by0.57%

Worsened metrics

Total package byte prevSize

11222

decreased by-2.71%

Dependency changes

• Updatedab-mediaquery@^1.4.4