ab-interchange - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

dist/AB-interchange.js

@@ -190,4 +190,7 @@ /******/ (function(modules) { // webpackBootstrap
         ._events()
-        ._generateRules()
-        ._updatePath();
+        ._generateRules();
+
+    if (this._updatePath()) {
+      this._replace();
+    }
   },
@@ -313,3 +316,3 @@
     if (this.replaced)
-      return this;
+      return false;
 
@@ -324,8 +327,7 @@ // Iterate through each rule
     if (this.currentPath === path)
-      return this;
+      return false;
 
     this.currentPath = path;
-    this._replace();
 
-    return this;
+    return true;
   },
@@ -356,4 +358,7 @@
     this.replaced = false;
-    this._setPlaceholder()
-        ._updatePath();
+
+    if (this._updatePath()) {
+      this._setPlaceholder();
+      this._replace();
+    }
   },
@@ -406,3 +411,3 @@
 
-    if (replaceNode === this.currentPath)
+    if (replaceNode.src === this.currentPath)
       return this;
@@ -409,0 +414,0 @@

dist/AB-interchange.min.js

@@ -1,1 +0,1 @@
-!function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){!function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}if("function"==typeof window.CustomEvent)return!1;t.prototype=window.Event.prototype,window.CustomEvent=t}(),window.AB={extend:function(){var t={},e=!1,i=0,n=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],i++);for(;i<n;i++)!function(i){for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e&&"[object Object]"===Object.prototype.toString.call(i[n])?t[n]=window.AB.extend(!0,t[n],i[n]):t[n]=i[n])}(arguments[i]);return t},isJson:function(t){try{JSON.parse(t)}catch(t){return!1}return!0},plugins:{}}},function(t,e,i){"use strict";var n=(i(0),i(2),"data-ab-interchange"),s="data-ab-interchange-src",r=function(t,e){this.el=t;var i=window.AB.isJson(this.el.getAttribute(n))?JSON.parse(this.el.getAttribute(n)):{};this.settings=window.AB.extend(!0,r.defaults,e,i),this.rules=[],this.currentPath="",this.settings.mode=this._defineMode(),this.lazySettings=this.settings.lazySettings,this.isLazy=this.settings.lazy,this.replaced=!1,this.animated=!1,this.lazyTimer,this.init()};r.defaults={mode:"background",lazy:!1,lazySettings:{placeholder:!1,offscreen:1.5,delayed:!1,layout:"fluid"}},r.prototype={init:function(){var t=this;if(this.el.parentNode.matches("picture")&&window.HTMLPictureElement&&!this.isLazy)return this;this.isLazy&&this.lazySettings.delayed&&(this.lazyTimer=setTimeout(function(){t.isLazy=!1,t._replace()},this.lazySettings.delayed)),this._setPlaceholder()._events()._generateRules()._updatePath()},_defineMode:function(){return"IMG"===this.el.nodeName||this.el.parentNode.matches("picture")?"img":this.settings.mode},_getWidthHeight:function(){var t=this.el.getAttribute("width"),e=this.el.getAttribute("height"),i={},n={};if(window.AB.isJson(t)&&window.AB.isJson(e)){i=JSON.parse(t),n=JSON.parse(e);for(var s in i)i.hasOwnProperty(s)&&window.AB.mediaQuery.is(s)&&(t=i[s],e=n[s])}return{width:t,height:e}},_setPlaceholder:function(){var t=document.createElement("div"),e=document.createElement("img"),i=this.el.getAttribute("alt"),n=this._getWidthHeight(),s=n.width,r=n.height;return this.lazySettings.placeholder&&"IMG"!==this.el.nodeName&&!this.el.parentNode.matches("picture")&&s&&r?(this.el.innerHTML="",this.el.style.overflow="hidden",this.el.style.position="relative",this.el.classList.add("ab-interchange-loading"),"fixed"===this.lazySettings.layout&&(this.el.style.height=r+"px",this.el.style.width=s+"px"),t.classList.add("ab-interchange-placeholder"),t.style.paddingTop=(r/s*100).toFixed(2)+"%",e.style.position="absolute",e.style.top=0,e.style.right=0,e.style.bottom=0,e.style.left=0,e.style.maxHeight="100%",e.style.minHeight="100%",e.style.maxWidth="100%",e.style.minWidth="100%",e.style.height=0,e.alt=null===i?"":i,this.el.appendChild(t),this.el.appendChild(e),this):this},_events:function(){var t=this;return window.addEventListener("changed.ab-mediaquery",t._resetDisplay.bind(t)),t.isLazy&&window.addEventListener("scroll",t._requestAnimationFrame.bind(t)),t},_generateRules:function(){for(var t=[],e=this.el.getAttribute(s)?this.el.getAttribute(s):this.el.getAttribute(n),i=e.match(/\[[^\]]+\]/g),r=0,a=i.length;r<a;r++){var h=i[r].slice(1,-1).split(", "),o=h.slice(0,-1).join(""),l=h[h.length-1];t.push({path:o,query:l})}return this.rules=t,this},_updatePath:function(){var t="",e=this.rules;if(this.replaced)return this;for(var i=0,n=e.length;i<n;i++)window.AB.mediaQuery.is(e[i].query)&&(t=e[i].path);return this.currentPath===t?this:(this.currentPath=t,this._replace(),this)},_onScroll:function(){return this._inView()&&(clearTimeout(this.lazyTimer),this._replace()),this.animated=!1,this},_requestAnimationFrame:function(){if(this.replaced)return this;this.animated||window.requestAnimationFrame(this._onScroll.bind(this)),this.animated=!0},_resetDisplay:function(){this.replaced=!1,this._setPlaceholder()._updatePath()},_inView:function(){var t=window.innerHeight,e=this.el.getBoundingClientRect(),i=this.el.offsetHeight,n=-i-t*(this.lazySettings.offscreen-1),s=t+t*(this.lazySettings.offscreen-1);return e.top>=n&&e.top<=s},_triggerEvent:function(){this.el.classList.remove("ab-interchange-loading");var t=new CustomEvent("replaced.ab-interchange",{detail:{element:this.el}});window.dispatchEvent(t)},_replace:function(){if(this.isLazy&&!this._inView())return this;"img"===this.settings.mode?this._replaceImg():"background"===this.settings.mode?this._replaceBackground():"ajax"===this.settings.mode&&this._replaceAjax(),this.replaced=!0},_replaceImg:function(){var t;if((t=this.lazySettings.placeholder?this.el.querySelector("img"):this.el)===this.currentPath)return this;t.src=this.currentPath,t.addEventListener("load",this._triggerEvent.bind(this))},_replaceBackground:function(){if(this.el.style.backgroundImage==='url("'+this.currentPath+'")')return this;this.currentPath?this.el.style.backgroundImage="url("+this.currentPath+")":this.el.style.backgroundImage="none",this.el.addEventListener("load",this._triggerEvent.bind(this))},_replaceAjax:function(){var t=this;if(!this.currentPath)return this.el.innerHTML="",this;var e=new XMLHttpRequest;e.open("GET",this.currentPath,!0),e.onload=function(){this.status>=200&&this.status<400?(t.el.innerHTML=this.response,t._triggerEvent()):t.el.innerHTML=""},e.onerror=function(){this.el.innerHTML=""},e.send()}},window.abInterchange=function(t){for(var e=document.querySelectorAll("["+n+"]"),i=0,s=e.length;i<s;i++)e[i].interchange||(e[i].interchange=new r(e[i],t))}},function(t,e,i){"use strict";var n=(i(0),function(t){this.settings=window.AB.extend(!0,n.defaults,t),this.queries=this.settings.bp,this.current=[],this.animated=!1,this._init()});n.defaults={bp:{}},n.prototype={_init:function(){return this.current=this._getCurrent(),this._watcher(),this},_getCurrent:function(){var t=[];for(var e in this.queries)this.queries.hasOwnProperty(e)&&window.matchMedia(this.queries[e]).matches&&t.push(e);return t},_watcher:function(){var t=this;window.addEventListener("resize",function(){t.animated||(window.requestAnimationFrame(t._updateSizes.bind(t)),t.animated=!0)})},_updateSizes:function(){var t=this._getCurrent(),e=new CustomEvent("changed.ab-mediaquery");this.animated=!1,t.join("|")!==this.current.join("|")&&(this.current=t,window.dispatchEvent(e))},is:function(t){return window.matchMedia(this.queries[t]).matches}},window.abMediaQuery=function(t){window.AB.mediaQuery=new n(t)}}]);
+!function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}var i={};e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){!function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}if("function"==typeof window.CustomEvent)return!1;t.prototype=window.Event.prototype,window.CustomEvent=t}(),window.AB={extend:function(){var t={},e=!1,i=0,n=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],i++);for(;i<n;i++)!function(i){for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e&&"[object Object]"===Object.prototype.toString.call(i[n])?t[n]=window.AB.extend(!0,t[n],i[n]):t[n]=i[n])}(arguments[i]);return t},isJson:function(t){try{JSON.parse(t)}catch(t){return!1}return!0},plugins:{}}},function(t,e,i){"use strict";var n=(i(0),i(2),"data-ab-interchange"),s="data-ab-interchange-src",r=function(t,e){this.el=t;var i=window.AB.isJson(this.el.getAttribute(n))?JSON.parse(this.el.getAttribute(n)):{};this.settings=window.AB.extend(!0,r.defaults,e,i),this.rules=[],this.currentPath="",this.settings.mode=this._defineMode(),this.lazySettings=this.settings.lazySettings,this.isLazy=this.settings.lazy,this.replaced=!1,this.animated=!1,this.lazyTimer,this.init()};r.defaults={mode:"background",lazy:!1,lazySettings:{placeholder:!1,offscreen:1.5,delayed:!1,layout:"fluid"}},r.prototype={init:function(){var t=this;if(this.el.parentNode.matches("picture")&&window.HTMLPictureElement&&!this.isLazy)return this;this.isLazy&&this.lazySettings.delayed&&(this.lazyTimer=setTimeout(function(){t.isLazy=!1,t._replace()},this.lazySettings.delayed)),this._setPlaceholder()._events()._generateRules(),this._updatePath()&&this._replace()},_defineMode:function(){return"IMG"===this.el.nodeName||this.el.parentNode.matches("picture")?"img":this.settings.mode},_getWidthHeight:function(){var t=this.el.getAttribute("width"),e=this.el.getAttribute("height"),i={},n={};if(window.AB.isJson(t)&&window.AB.isJson(e)){i=JSON.parse(t),n=JSON.parse(e);for(var s in i)i.hasOwnProperty(s)&&window.AB.mediaQuery.is(s)&&(t=i[s],e=n[s])}return{width:t,height:e}},_setPlaceholder:function(){var t=document.createElement("div"),e=document.createElement("img"),i=this.el.getAttribute("alt"),n=this._getWidthHeight(),s=n.width,r=n.height;return this.lazySettings.placeholder&&"IMG"!==this.el.nodeName&&!this.el.parentNode.matches("picture")&&s&&r?(this.el.innerHTML="",this.el.style.overflow="hidden",this.el.style.position="relative",this.el.classList.add("ab-interchange-loading"),"fixed"===this.lazySettings.layout&&(this.el.style.height=r+"px",this.el.style.width=s+"px"),t.classList.add("ab-interchange-placeholder"),t.style.paddingTop=(r/s*100).toFixed(2)+"%",e.style.position="absolute",e.style.top=0,e.style.right=0,e.style.bottom=0,e.style.left=0,e.style.maxHeight="100%",e.style.minHeight="100%",e.style.maxWidth="100%",e.style.minWidth="100%",e.style.height=0,e.alt=null===i?"":i,this.el.appendChild(t),this.el.appendChild(e),this):this},_events:function(){var t=this;return window.addEventListener("changed.ab-mediaquery",t._resetDisplay.bind(t)),t.isLazy&&window.addEventListener("scroll",t._requestAnimationFrame.bind(t)),t},_generateRules:function(){for(var t=[],e=this.el.getAttribute(s)?this.el.getAttribute(s):this.el.getAttribute(n),i=e.match(/\[[^\]]+\]/g),r=0,a=i.length;r<a;r++){var h=i[r].slice(1,-1).split(", "),o=h.slice(0,-1).join(""),l=h[h.length-1];t.push({path:o,query:l})}return this.rules=t,this},_updatePath:function(){var t="",e=this.rules;if(this.replaced)return!1;for(var i=0,n=e.length;i<n;i++)window.AB.mediaQuery.is(e[i].query)&&(t=e[i].path);return this.currentPath!==t&&(this.currentPath=t,!0)},_onScroll:function(){return this._inView()&&(clearTimeout(this.lazyTimer),this._replace()),this.animated=!1,this},_requestAnimationFrame:function(){if(this.replaced)return this;this.animated||window.requestAnimationFrame(this._onScroll.bind(this)),this.animated=!0},_resetDisplay:function(){this.replaced=!1,this._updatePath()&&(this._setPlaceholder(),this._replace())},_inView:function(){var t=window.innerHeight,e=this.el.getBoundingClientRect(),i=this.el.offsetHeight,n=-i-t*(this.lazySettings.offscreen-1),s=t+t*(this.lazySettings.offscreen-1);return e.top>=n&&e.top<=s},_triggerEvent:function(){this.el.classList.remove("ab-interchange-loading");var t=new CustomEvent("replaced.ab-interchange",{detail:{element:this.el}});window.dispatchEvent(t)},_replace:function(){if(this.isLazy&&!this._inView())return this;"img"===this.settings.mode?this._replaceImg():"background"===this.settings.mode?this._replaceBackground():"ajax"===this.settings.mode&&this._replaceAjax(),this.replaced=!0},_replaceImg:function(){var t;if(t=this.lazySettings.placeholder?this.el.querySelector("img"):this.el,t.src===this.currentPath)return this;t.src=this.currentPath,t.addEventListener("load",this._triggerEvent.bind(this))},_replaceBackground:function(){if(this.el.style.backgroundImage==='url("'+this.currentPath+'")')return this;this.currentPath?this.el.style.backgroundImage="url("+this.currentPath+")":this.el.style.backgroundImage="none",this.el.addEventListener("load",this._triggerEvent.bind(this))},_replaceAjax:function(){var t=this;if(!this.currentPath)return this.el.innerHTML="",this;var e=new XMLHttpRequest;e.open("GET",this.currentPath,!0),e.onload=function(){this.status>=200&&this.status<400?(t.el.innerHTML=this.response,t._triggerEvent()):t.el.innerHTML=""},e.onerror=function(){this.el.innerHTML=""},e.send()}},window.abInterchange=function(t){for(var e=document.querySelectorAll("["+n+"]"),i=0,s=e.length;i<s;i++)e[i].interchange||(e[i].interchange=new r(e[i],t))}},function(t,e,i){"use strict";var n=(i(0),function(t){this.settings=window.AB.extend(!0,n.defaults,t),this.queries=this.settings.bp,this.current=[],this.animated=!1,this._init()});n.defaults={bp:{}},n.prototype={_init:function(){return this.current=this._getCurrent(),this._watcher(),this},_getCurrent:function(){var t=[];for(var e in this.queries)this.queries.hasOwnProperty(e)&&window.matchMedia(this.queries[e]).matches&&t.push(e);return t},_watcher:function(){var t=this;window.addEventListener("resize",function(){t.animated||(window.requestAnimationFrame(t._updateSizes.bind(t)),t.animated=!0)})},_updateSizes:function(){var t=this._getCurrent(),e=new CustomEvent("changed.ab-mediaquery");this.animated=!1,t.join("|")!==this.current.join("|")&&(this.current=t,window.dispatchEvent(e))},is:function(t){return window.matchMedia(this.queries[t]).matches}},window.abMediaQuery=function(t){window.AB.mediaQuery=new n(t)}}]);

index.js

@@ -57,4 +57,7 @@ 'use strict';
         ._events()
-        ._generateRules()
-        ._updatePath();
+        ._generateRules();
+
+    if (this._updatePath()) {
+      this._replace();
+    }
   },
@@ -180,3 +183,3 @@
     if (this.replaced)
-      return this;
+      return false;
 
@@ -191,8 +194,7 @@ // Iterate through each rule
     if (this.currentPath === path)
-      return this;
+      return false;
 
     this.currentPath = path;
-    this._replace();
 
-    return this;
+    return true;
   },
@@ -223,4 +225,7 @@
     this.replaced = false;
-    this._setPlaceholder()
-        ._updatePath();
+
+    if (this._updatePath()) {
+      this._setPlaceholder();
+      this._replace();
+    }
   },
@@ -273,3 +278,3 @@
 
-    if (replaceNode === this.currentPath)
+    if (replaceNode.src === this.currentPath)
       return this;
@@ -276,0 +281,0 @@

package.json

 {
   "name": "ab-interchange",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "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": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

1487933

increased by1311.85%

Number of package files

45

increased by462.5%

Lines of code

696

increased by0.87%

No dependency changes