ab-interchange - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

AB-interchange.js

@@ -45,2 +45,3 @@ !(function(name, definition) {
       this._generateRules()
+          ._setDefault()
           ._updatePath();
@@ -77,2 +78,19 @@
 
+    _setDefault: function() {
+      var path              = '',
+          rules             = this.rules;
+
+      // Iterate through each rule
+      for (var i = 0, len = rules.length; i < len; i++) {
+        var rule  = rules[i];
+
+        // check if default value is provided
+        if (rule.query === 'default' && this.defaultPath === '') {
+          this.defaultPath = rule.path;
+        }
+      }
+
+      return this;
+    },
+
     _updatePath: function() {
@@ -88,7 +106,2 @@ var match         = false,
 
-        // check if default value is provided
-        if (rule.query === 'default' && this.defaultPath === '') {
-          this.defaultPath = rule.path;
-        }
-
         if (window.matchMedia(AB.mediaQuery.get(rule.query)).matches) {
@@ -100,3 +113,2 @@ path  = rule.path;
 
-      // set new current path
       this.currentPath = (path === '') ? this.defaultPath : path;
@@ -106,3 +118,2 @@
       return this;
-
     },
@@ -142,18 +153,25 @@
     _replace: function() {
-      var that = this,
-          path = that.currentPath,
+      var that    = this,
+          path    = that.currentPath,
           trigger = 'replaced.ab-interchange';
 
-      if ( !this.settings.lazy || (this.settings.lazy && this._inView()) ) {
+      if ( !that.settings.lazy || (that.settings.lazy && that._inView()) ) {
+
         // Replacing images
-        if (this.$element[0].nodeName === 'IMG') {
-          this.$element.attr('src', path).load().trigger(trigger);
+        if (that.$element[0].nodeName === 'IMG') {
+          that.$element.attr('src', path).load().trigger(trigger);
         }
+
         // Replacing background images
-        else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
-          this.$element.css({ 'background-image': 'url('+path+')' }).trigger(trigger);
+        else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i) || path === 'empty.bg') {
+          if (path === 'empty.bg') {
+            that.$element.css({ 'background-image': 'none' }).trigger(trigger);
+          } else {
+            that.$element.css({ 'background-image': 'url('+path+')' }).trigger(trigger);
+          }
         }
+
         // Replacing HTML
         else {
-          if (path === "") {
+          if (path === 'empty.ajax') {
             that.$element.empty();
@@ -166,4 +184,4 @@ } else {
         }
+
       }
-
     }
@@ -170,0 +188,0 @@ };

package.json

 {
   "name": "ab-interchange",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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.3.2"
+    "ab-mediaquery": "^1.4.0"
   }
 }

README.md

@@ -40,6 +40,14 @@ # AB-interchange
 * small
+* smallOnly
 * medium
+* mediumOnly
 * large
+* largeOnly
 * huge
+* hugeOnly
 
+If you don't want any default, you can use these values to empty content, but NOT for IMG:
+* [empty.bg, default]
+* [empty.ajax, default]
+
 It's clever to prepare a spinner animation as first img src or default styling before init. You can use **'replaced.ab-interchange'** event to remove that right after.
@@ -46,0 +54,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10067

increased by6.77%

Lines of code

156

increased by9.09%

Number of lines in readme file

75

increased by11.94%

Dependency changes

• Updatedab-mediaquery@^1.4.0