ab-interchange - npm Package Compare versions

Comparing version 3.1.1 to 3.2.1

dist/AB-interchange.js

@@ -134,2 +134,3 @@ // modules are defined as an array
 
+
 // throttle events with requestAnimationFrame
@@ -143,5 +144,5 @@ (function() {
       running = true;
-        window.requestAnimationFrame(function() {
-          window.dispatchEvent(new CustomEvent(name));
-          running = false;
+      window.requestAnimationFrame(function() {
+        window.dispatchEvent(new CustomEvent(name));
+        running = false;
       });
@@ -163,6 +164,6 @@ };
   extend: function() {
-    var extended = {},
-        deep     = false,
-        i        = 0,
-        length   = arguments.length;
+    var extended = {};
+    var deep = false;
+    var i = 0;
+    var length = arguments.length;
 
@@ -208,4 +209,5 @@ if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]'){
       for(var options in AB.options){
-        if(window.AB.options.hasOwnProperty(options))
+        if(window.AB.options.hasOwnProperty(options)) {
           window.AB.plugins[options](window.AB.options[options]);
+        }
       }
@@ -216,3 +218,3 @@ }
   plugins: {},
-  options: {}
+  options: {},
 };
@@ -231,3 +233,3 @@
 
-    var _getCurrent = function() {
+    function _getCurrent() {
       var sizes = [];
@@ -242,5 +244,5 @@
       return sizes;
-    };
+    }
 
-    var _updateSizes = function() {
+    function _updateSizes() {
       var newSize = _getCurrent();
@@ -253,8 +255,7 @@
       }
-    };
+    }
 
-    var is = function(size) {
-      if (_settings.bp[size])
-        return window.matchMedia(_settings.bp[size]).matches;
-    };
+    function is(size) {
+      return _settings.bp[size] ? window.matchMedia(_settings.bp[size]).matches : false;
+    }
 
@@ -284,9 +285,8 @@ // get current breakpoints
 var attr = 'data-ab-interchange';
-var attrSrc = 'data-ab-interchange-src';
+var attrSrc = attr + '-src';
 var defaultSettings = {
-  mode: 'img',
+  mode: 'lazy-img',
   lazySettings: {
     offscreen: 1.25,
-    delayed: false,
-    layout: 'fluid' // 'fixed': fixed dimensions
+    layout: 'fluid' // or 'fixed' for fixed dimensions
 
@@ -300,7 +300,2 @@ }
   switch (this.mode) {
-    case 'img':
-      _replaceImg.call(this);
-
-      break;
-
     case 'lazy-img':
@@ -321,3 +316,3 @@ _replaceImg.call(this, true);
   }
-} // Replace source: img or lazy-img
+} // Replace source: lazy-img
 
@@ -338,31 +333,4 @@
   if (this.el.style.backgroundImage === 'url("' + this.currentPath + '")' || lazy && !this.inView()) return;
-
-  if (this.currentPath) {
-    this.el.style.backgroundImage = 'url(' + this.currentPath + ')';
-  } else {
-    this.el.style.backgroundImage = 'none';
-  }
-
+  this.el.style.backgroundImage = this.currentPath ? 'url(' + this.currentPath + ')' : 'none';
   this.el.addEventListener('load', _isReplaced.bind(this));
-} // init instance
-
-
-function _init() {
-  var that = this; // no need when using 'img' on browsers supporting that, except when using lazy loading
-
-  if ((this.el.parentNode.tagName === 'PICTURE' || this.el.getAttribute('srcset')) && window.HTMLPictureElement) return; // replace anyway after a delay (for offline support)
-
-  if (this.settings.lazySettings.delayed) {
-    this._lazyTimer = setTimeout(function () {
-      _replace.call(that);
-    }, this.settings.lazySettings.delayed);
-  }
-
-  _setPlaceholder.call(this);
-
-  _events.call(this);
-
-  _generateRules.call(this);
-
-  _updatePath.call(this);
 } // build the DOM for lazy-img mode
@@ -396,10 +364,4 @@
   imgNode.style.position = 'absolute';
-  imgNode.style.top = 0;
-  imgNode.style.right = 0;
-  imgNode.style.bottom = 0;
-  imgNode.style.left = 0;
-  imgNode.style.maxHeight = '100%';
-  imgNode.style.minHeight = '100%';
-  imgNode.style.maxWidth = '100%';
-  imgNode.style.minWidth = '100%';
+  imgNode.style.top = imgNode.style.right = imgNode.style.bottom = imgNode.style.left = 0;
+  imgNode.style.maxHeight = imgNode.style.minHeight = imgNode.style.maxWidth = imgNode.style.minWidth = '100%';
   imgNode.style.height = 0;
@@ -417,3 +379,3 @@ imgNode.alt = alt === null ? '' : alt; // always put an 'alt'
   this.el.classList.remove('ab-interchange-loading');
-  var event = new CustomEvent('replaced.ab-interchange', {
+  var event = new CustomEvent(pluginName + '.replaced', {
     detail: {
@@ -442,2 +404,3 @@ element: this.el
     } else {
+      // 'ab-scroll' is a custom event from AB dependency
       window.addEventListener('ab-scroll', _onScroll.bind(this));
@@ -450,5 +413,5 @@ }
 function _generateRules() {
-  var rulesList = []; // retro compatibility: sources inside 'attr'
-
-  var getAttrSrc = this.el.getAttribute(attrSrc) ? this.el.getAttribute(attrSrc) : this.el.getAttribute(attr);
+  // retro compatibility: sources inside 'attr'
+  var getAttrSrc = this.el.getAttribute(attrSrc) || this.el.getAttribute(attr);
+  var rulesList = [];
   var rules = getAttrSrc.match(/\[[^\]]+\]/g);
@@ -491,13 +454,4 @@ var rule, path, query;
   if (this.inView() && !this._replaced) {
-    clearTimeout(this._lazyTimer);
-
     _replace.call(this);
   }
-} // define the right mode
-
-
-function _defineMode() {
-  // if img tag: no choice
-  if (this.el.tagName === 'IMG') return 'img';
-  return this.settings.mode;
 } // get width and height from attributes and manage multiple dimensions
@@ -528,2 +482,13 @@
   };
+} // init instance
+
+
+function _init() {
+  _setPlaceholder.call(this);
+
+  _events.call(this);
+
+  _generateRules.call(this);
+
+  _updatePath.call(this);
 }
@@ -537,8 +502,9 @@
   this.currentPath = '';
-  this.mode = _defineMode.call(this);
+  this.mode = this.settings.mode;
   this.replaced = false;
-  this._lazyTimer; // for delayed setTimeout
-
   this._imgNode = this.el; // where the source will be updated
+  // no need when using 'img' on browsers supporting that, except when using lazy loading
 
+  if ((this.el.tagName === 'IMG' || this.el.parentNode.tagName === 'PICTURE' || this.el.getAttribute('srcset')) && window.HTMLPictureElement) return;
+
   _init.call(this);
@@ -548,3 +514,3 @@ };
 Plugin.prototype = {
-  // Force elmeent refresh
+  // Force element refresh
   resetDisplay: function resetDisplay() {
@@ -551,0 +517,0 @@ this._replaced = false;

dist/AB-interchange.min.js

 parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"cnAZ":[function(require,module,exports) {
 !function(){if("function"==typeof window.CustomEvent)return!1;function o(o,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var t=document.createEvent("CustomEvent");return t.initCustomEvent(o,n.bubbles,n.cancelable,n.detail),t}o.prototype=window.Event.prototype,window.CustomEvent=o}(),function(){var o=function(o,n){var t=!1;window.addEventListener(o,function(){t||(t=!0,window.requestAnimationFrame(function(){window.dispatchEvent(new CustomEvent(n)),t=!1}))})};o("resize","ab-resize"),o("scroll","ab-scroll"),o("mousemove","ab-mousemove"),o("touchmove","ab-touchmove")}(),window.AB={extend:function(){var o={},n=!1,t=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(n=arguments[0],t++);for(var i=function(t){for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n&&"[object Object]"===Object.prototype.toString.call(t[e])?o[e]=window.AB.extend(!0,o[e],t[e]):o[e]=t[e])};t<e;t++)i(arguments[t]);return o},isJson:function(o){try{JSON.parse(o)}catch(n){return!1}return!0},runUpdaters:function(o){if(window.AB.options[o])window.AB.plugins[o](window.AB.options[o]);else for(var n in AB.options)window.AB.options.hasOwnProperty(n)&&window.AB.plugins[n](window.AB.options[n])},plugins:{},options:{}},module.exports=window.AB;
 },{}],"TYbL":[function(require,module,exports) {
-"use strict";window.AB=require("another-brick");var n=function(n){var e,i,r;window.AB.mediaQuery=(e=n||{bp:{}},r=(i=function(){var n=[];for(var i in e.bp)e.bp.hasOwnProperty(i)&&window.matchMedia(e.bp[i]).matches&&n.push(i);return n})(),window.addEventListener("ab-resize",function(){var n=i();n.join("|")!==r.join("|")&&(r=n,window.dispatchEvent(new CustomEvent("changed.ab-mediaquery")))}),{get current(){return r},is:function(n){if(e.bp[n])return window.matchMedia(e.bp[n]).matches}})};window.AB.plugins.mediaQuery=n,module.exports=window.AB;
+"use strict";window.AB=require("another-brick");var n=function(n){window.AB.mediaQuery=function(){var e=n||{bp:{}};function r(){var n=[];for(var r in e.bp)e.bp.hasOwnProperty(r)&&window.matchMedia(e.bp[r]).matches&&n.push(r);return n}var i=r();return window.addEventListener("ab-resize",function(){var n=r();n.join("|")!==i.join("|")&&(i=n,window.dispatchEvent(new CustomEvent("changed.ab-mediaquery")))}),{get current(){return i},is:function(n){return!!e.bp[n]&&window.matchMedia(e.bp[n]).matches}}}()};window.AB.plugins.mediaQuery=n,module.exports=window.AB;
 },{"another-brick":"cnAZ"}],"Focm":[function(require,module,exports) {
-"use strict";window.AB=require("ab-mediaquery");var t="abInterchange",e="data-ab-interchange",i="data-ab-interchange-src",s={mode:"img",lazySettings:{offscreen:1.25,delayed:!1,layout:"fluid"}};function n(){if(!this._replaced)switch(this.mode){case"img":l.call(this);break;case"lazy-img":l.call(this,!0);break;case"background":a.call(this);break;case"lazy-background":a.call(this,!0)}}function l(t){this._imgNode.src===this.currentPath||t&&!this.inView()||(this._imgNode.src=this.currentPath,this._imgNode.addEventListener("load",o.bind(this)),this._replaced=!0)}function a(t){this.el.style.backgroundImage==='url("'+this.currentPath+'")'||t&&!this.inView()||(this.currentPath?this.el.style.backgroundImage="url("+this.currentPath+")":this.el.style.backgroundImage="none",this.el.addEventListener("load",o.bind(this)))}function h(){var t=this;("PICTURE"===this.el.parentNode.tagName||this.el.getAttribute("srcset"))&&window.HTMLPictureElement||(this.settings.lazySettings.delayed&&(this._lazyTimer=setTimeout(function(){n.call(t)},this.settings.lazySettings.delayed)),r.call(this),d.call(this),c.call(this),g.call(this))}function r(){var t=document.createElement("div"),e=document.createElement("img"),i=this.el.getAttribute("alt"),s=w.call(this),n=s.width,l=s.height,a=!n||!l,h=document.createDocumentFragment();"lazy-img"!==this.mode||a||(this.el.innerHTML="",this.el.style.overflow="hidden",this.el.style.position="relative",this.el.classList.add("ab-interchange-loading"),"fixed"===this.settings.lazySettings.layout&&(this.el.style.height=l+"px",this.el.style.width=n+"px"),t.classList.add("ab-interchange-placeholder"),t.style.paddingTop=(l/n*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,h.appendChild(t),h.appendChild(e),this.el.appendChild(h),this._imgNode=this.el.querySelector("img"))}function o(){this.el.classList.remove("ab-interchange-loading");var t=new CustomEvent("replaced.ab-interchange",{detail:{element:this.el}});window.dispatchEvent(t)}function d(){var t="";window.addEventListener("changed.ab-mediaquery",this.resetDisplay.bind(this)),"lazy-img"!==this.mode&&"lazy-background"!==this.mode||("IntersectionObserver"in window?(t=parseInt((this.settings.lazySettings.offscreen-1)*window.innerHeight)+"px",new IntersectionObserver(u.bind(this),{root:null,rootMargin:"0px 0px "+t+" 0px",threshold:0}).observe(this.el)):window.addEventListener("ab-scroll",u.bind(this)))}function c(){for(var t,s,n,l=[],a=(this.el.getAttribute(i)?this.el.getAttribute(i):this.el.getAttribute(e)).match(/\[[^\]]+\]/g),h=0,r=a.length;h<r;h++)s=(t=a[h].slice(1,-1).split(", ")).slice(0,-1).join(""),n=t[t.length-1],l.push({path:s,query:n});this.rules=l}function g(){for(var t="",e=this.rules,i=0,s=e.length;i<s;i++)window.AB.mediaQuery.is(e[i].query)&&(t=e[i].path);this.currentPath!==t&&(this.currentPath=t,n.call(this))}function u(){this.inView()&&!this._replaced&&(clearTimeout(this._lazyTimer),n.call(this))}function m(){return"IMG"===this.el.tagName?"img":this.settings.mode}function w(){var t=this.el.getAttribute("width"),e=this.el.getAttribute("height"),i={},s={};if(window.AB.isJson(t)&&window.AB.isJson(e))for(var n in i=JSON.parse(t),s=JSON.parse(e),i)i.hasOwnProperty(n)&&window.AB.mediaQuery.is(n)&&(t=i[n],e=s[n]);return{width:t,height:e}}var y=function(t,i){this.el=t;var n=window.AB.isJson(this.el.getAttribute(e))?JSON.parse(this.el.getAttribute(e)):{};this.settings=window.AB.extend(!0,s,i,n),this.rules=[],this.currentPath="",this.mode=m.call(this),this.replaced=!1,this._lazyTimer,this._imgNode=this.el,h.call(this)};function p(i){for(var s=document.querySelectorAll("["+e+"]"),n=0,l=s.length;n<l;n++)s[n][t]||(s[n][t]=new y(s[n],i));window.AB.options[t]||(window.AB.options[t]=i)}y.prototype={resetDisplay:function(){this._replaced=!1,r.call(this),g.call(this)},inView:function(){var t=window.innerHeight,e=this.el.getBoundingClientRect(),i=-this.el.offsetHeight-t*(this.settings.lazySettings.offscreen-1),s=t+t*(this.settings.lazySettings.offscreen-1);return e.top>=i&&e.top<=s}},window.AB.plugins.interchange=p,module.exports=window.AB;
+"use strict";window.AB=require("ab-mediaquery");var t="abInterchange",e="data-ab-interchange",i=e+"-src",s={mode:"lazy-img",lazySettings:{offscreen:1.25,layout:"fluid"}};function n(){if(!this._replaced)switch(this.mode){case"lazy-img":l.call(this,!0);break;case"background":h.call(this);break;case"lazy-background":h.call(this,!0)}}function l(t){this._imgNode.src===this.currentPath||t&&!this.inView()||(this._imgNode.src=this.currentPath,this._imgNode.addEventListener("load",r.bind(this)),this._replaced=!0)}function h(t){this.el.style.backgroundImage==='url("'+this.currentPath+'")'||t&&!this.inView()||(this.el.style.backgroundImage=this.currentPath?"url("+this.currentPath+")":"none",this.el.addEventListener("load",r.bind(this)))}function a(){var t=document.createElement("div"),e=document.createElement("img"),i=this.el.getAttribute("alt"),s=u.call(this),n=s.width,l=s.height,h=!n||!l,a=document.createDocumentFragment();"lazy-img"!==this.mode||h||(this.el.innerHTML="",this.el.style.overflow="hidden",this.el.style.position="relative",this.el.classList.add("ab-interchange-loading"),"fixed"===this.settings.lazySettings.layout&&(this.el.style.height=l+"px",this.el.style.width=n+"px"),t.classList.add("ab-interchange-placeholder"),t.style.paddingTop=(l/n*100).toFixed(2)+"%",e.style.position="absolute",e.style.top=e.style.right=e.style.bottom=e.style.left=0,e.style.maxHeight=e.style.minHeight=e.style.maxWidth=e.style.minWidth="100%",e.style.height=0,e.alt=null===i?"":i,a.appendChild(t),a.appendChild(e),this.el.appendChild(a),this._imgNode=this.el.querySelector("img"))}function r(){this.el.classList.remove("ab-interchange-loading");var e=new CustomEvent(t+".replaced",{detail:{element:this.el}});window.dispatchEvent(e)}function o(){var t="";window.addEventListener("changed.ab-mediaquery",this.resetDisplay.bind(this)),"lazy-img"!==this.mode&&"lazy-background"!==this.mode||("IntersectionObserver"in window?(t=parseInt((this.settings.lazySettings.offscreen-1)*window.innerHeight)+"px",new IntersectionObserver(g.bind(this),{root:null,rootMargin:"0px 0px "+t+" 0px",threshold:0}).observe(this.el)):window.addEventListener("ab-scroll",g.bind(this)))}function d(){for(var t,s,n,l=[],h=(this.el.getAttribute(i)||this.el.getAttribute(e)).match(/\[[^\]]+\]/g),a=0,r=h.length;a<r;a++)s=(t=h[a].slice(1,-1).split(", ")).slice(0,-1).join(""),n=t[t.length-1],l.push({path:s,query:n});this.rules=l}function c(){for(var t="",e=this.rules,i=0,s=e.length;i<s;i++)window.AB.mediaQuery.is(e[i].query)&&(t=e[i].path);this.currentPath!==t&&(this.currentPath=t,n.call(this))}function g(){this.inView()&&!this._replaced&&n.call(this)}function u(){var t=this.el.getAttribute("width"),e=this.el.getAttribute("height"),i={},s={};if(window.AB.isJson(t)&&window.AB.isJson(e))for(var n in i=JSON.parse(t),s=JSON.parse(e),i)i.hasOwnProperty(n)&&window.AB.mediaQuery.is(n)&&(t=i[n],e=s[n]);return{width:t,height:e}}function w(){a.call(this),o.call(this),d.call(this),c.call(this)}var m=function(t,i){this.el=t;var n=window.AB.isJson(this.el.getAttribute(e))?JSON.parse(this.el.getAttribute(e)):{};this.settings=window.AB.extend(!0,s,i,n),this.rules=[],this.currentPath="",this.mode=this.settings.mode,this.replaced=!1,this._imgNode=this.el,("IMG"===this.el.tagName||"PICTURE"===this.el.parentNode.tagName||this.el.getAttribute("srcset"))&&window.HTMLPictureElement||w.call(this)};function p(i){for(var s=document.querySelectorAll("["+e+"]"),n=0,l=s.length;n<l;n++)s[n][t]||(s[n][t]=new m(s[n],i));window.AB.options[t]||(window.AB.options[t]=i)}m.prototype={resetDisplay:function(){this._replaced=!1,a.call(this),c.call(this)},inView:function(){var t=window.innerHeight,e=this.el.getBoundingClientRect(),i=-this.el.offsetHeight-t*(this.settings.lazySettings.offscreen-1),s=t+t*(this.settings.lazySettings.offscreen-1);return e.top>=i&&e.top<=s}},window.AB.plugins.interchange=p,module.exports=window.AB;
 },{"ab-mediaquery":"TYbL"}]},{},["Focm"], null)

package.json

 {
   "name": "ab-interchange",
-  "version": "3.1.1",
+  "version": "3.2.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.",
   "main": "src/index.js",
-  "prepublishOnly": "yarn build",
   "repository": {
@@ -15,16 +14,9 @@ "type": "git",
   "homepage": "https://github.com/lordfpx/AB-interchange#readme",
-  "np": {
-    "anyBranch": false,
-    "cleanup": true,
-    "tests": false,
-    "releaseDraft": true
-  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "release": "np",
-    "serve": "yarn reset && parcel src/docs/index.html --out-dir docs",
-    "build": "yarn reset && yarn build:demo && yarn build:dist",
+    "test": "echo \"Error: no test specified\"",
+    "serve": "npm run reset && parcel src/docs/index.html --out-dir docs",
+    "build": "npm run reset && npm run build:demo && npm run build:dist",
     "reset": "rimraf dist docs",
     "build:demo": "parcel build src/docs/index.html --no-source-maps --out-dir docs --public-url ./",
-    "build:dist": "yarn build:js && yarn build:jsmin",
+    "build:dist": "npm run build:js && npm run build:jsmin",
     "build:js": "parcel build src/index.js --no-source-maps --no-content-hash --out-dir dist --out-file AB-interchange.js --no-minify",
@@ -47,12 +39,10 @@ "build:jsmin": "parcel build src/index.js --no-source-maps --no-content-hash --out-dir dist --out-file AB-interchange.min.js"
   "dependencies": {
-    "ab-mediaquery": "^2.7.0"
+    "ab-mediaquery": "^2.7.2"
   },
   "devDependencies": {
-    "np": "^5.1.3",
     "parcel-bundler": "^1.12.4",
     "prismjs": "^1.17.1",
     "rimraf": "^3.0.0",
-    "tachyons": "^4.11.1",
-    "yarn": "^1.19.1"
+    "tachyons": "^4.11.1"
   }
 }

README.md

@@ -6,8 +6,7 @@ # AB-interchange
 - **lazy load** images and background-images
-- make **background-images responsive**
-- make **images responsive** on **IE 10** and **11** (more with polyfills)
+- give responsiveness to **background-images**
 
-It's damn small: about **2.3KB** (uglyfied and GZipped).
+It's damn small: about **2.6KB** (uglyfied and GZipped).
 
-Have a look at this [demonstration](https://lordfpx.github.io/AB-interchange/) (offline version in the `docs` folder).
+**Have a look at this [Demonstration page](https://lordfpx.github.io/AB-interchange/) (offline version in the `docs` folder).**
 
@@ -19,2 +18,8 @@ Version 1 is used on French websites of [ENGIE](https://particuliers.engie.fr) and [Gaz tarif règlementé](https://gaz-tarif-reglemente.fr/).
 
+## Important news
+
+- removed `<img>` and `<picture>` support since it's natif and useless on IE 11.
+- removed `delayed` option that was quite useless and introduced code complexity
+
+
 ## Install
@@ -57,6 +62,5 @@
 AB.plugins.interchange({
-  mode: 'img',
+  mode: 'lazy-img',
   lazySettings: {
     offscreen: 1.25,
-    delayed:   false,
     layout:    'fluid' // can be "fixed" to fixed dimensions (not fluid)
@@ -68,3 +72,2 @@ }
 * **`mode` can be:**
-  - `img`: for classic `img` element on old browsers only (ex: for IE 11)
   - `lazy-img`
@@ -76,3 +79,2 @@ - `background`
   - `offscreen`: load picture only when in the viewport * `offscreen` value
-  - `delayed`: when defined, will load the image even when not visible after xxx millisecond.
   - `layout`: Can be `fluid` (default) for fluid images or `fixed` for fixed dimensions
@@ -100,3 +102,2 @@
       "offscreen": 1,
-      "delayed":   2000
     }
@@ -134,33 +135,2 @@ }"'
 
-### img or picture
-
-This usage is only interesting if you need responsive images on Internet Explorer 10 or 11.
-
-```html
-<img
-  alt="description"
-  src="my-spinner.gif"
-  width="100"
-  height="75"
-  data-ab-interchange
-  data-ab-interchange-src="[xxx, smallOnly], [xxx, medium]"/>
-```
-
-```html
-<picture>
-  <source srcset="xxx" media="(min-width: 80em)"/>
-  <source srcset="xxx" media="(min-width: 64em)"/>
-  <source srcset="xxx" media="(min-width: 48em)"/>
-  <source srcset="xxx"/>
-  <img
-    alt="description"
-    src="my-spinner.gif"
-    width="100"
-    height="75"
-    data-ab-interchange
-    data-ab-interchange-src="[xxx, smallOnly], [xxx, medium]"/>
-</picture>
-```
-
-
 ## JS event
@@ -167,0 +137,0 @@

src/docs/example.js

@@ -18,6 +18,5 @@ import Prism from 'prismjs/components/prism-core';
   lazySettings: {
-    offscreen: 1,
-    delayed:   false,
+    offscreen: 1.25,
     layout:    'fluid' // can be "fixed" to fixed dimensions (not fluid)
   }
 });

src/index.js

@@ -7,9 +7,8 @@ 'use strict';
 var attr = 'data-ab-interchange';
-var attrSrc = 'data-ab-interchange-src';
+var attrSrc = attr +'-src';
 var defaultSettings = {
-  mode: 'img',
+  mode: 'lazy-img',
   lazySettings: {
     offscreen: 1.25,
-    delayed: false,
-    layout: 'fluid', // 'fixed': fixed dimensions
+    layout: 'fluid', // or 'fixed' for fixed dimensions
   },
@@ -20,8 +19,6 @@ };
 function _replace() {
-  if (this._replaced) return;
+  if (this._replaced)
+    return;
 
   switch(this.mode) {
-    case 'img':
-      _replaceImg.call(this);
-      break;
     case 'lazy-img':
@@ -39,3 +36,3 @@ _replaceImg.call(this, true);
 
-// Replace source: img or lazy-img
+// Replace source: lazy-img
 function _replaceImg(lazy) {
@@ -57,32 +54,6 @@ if (this._imgNode.src === this.currentPath || (lazy && !this.inView()))
 
-  if (this.currentPath) {
-    this.el.style.backgroundImage = 'url('+ this.currentPath +')';
-  } else {
-    this.el.style.backgroundImage = 'none';
-  }
-
+  this.el.style.backgroundImage = this.currentPath ? 'url('+ this.currentPath +')' : 'none';
   this.el.addEventListener('load', _isReplaced.bind(this));
 }
 
-// init instance
-function _init() {
-  var that = this;
-
-  // no need when using 'img' on browsers supporting that, except when using lazy loading
-  if ((this.el.parentNode.tagName === 'PICTURE' || this.el.getAttribute('srcset')) && window.HTMLPictureElement)
-    return;
-
-  // replace anyway after a delay (for offline support)
-  if (this.settings.lazySettings.delayed) {
-    this._lazyTimer = setTimeout(function() {
-      _replace.call(that);
-    }, this.settings.lazySettings.delayed);
-  }
-
-  _setPlaceholder.call(this);
-  _events.call(this);
-  _generateRules.call(this);
-  _updatePath.call(this);
-}
-
 // build the DOM for lazy-img mode
@@ -99,3 +70,4 @@ function _setPlaceholder() {
 
-  if (this.mode !== 'lazy-img' || isNotReady) return;
+  if (this.mode !== 'lazy-img' || isNotReady)
+    return;
 
@@ -117,10 +89,4 @@ this.el.innerHTML = '';
   imgNode.style.position = 'absolute';
-  imgNode.style.top = 0;
-  imgNode.style.right = 0;
-  imgNode.style.bottom = 0;
-  imgNode.style.left = 0;
-  imgNode.style.maxHeight = '100%';
-  imgNode.style.minHeight = '100%';
-  imgNode.style.maxWidth = '100%';
-  imgNode.style.minWidth = '100%';
+  imgNode.style.top = imgNode.style.right = imgNode.style.bottom = imgNode.style.left = 0;
+  imgNode.style.maxHeight = imgNode.style.minHeight = imgNode.style.maxWidth = imgNode.style.minWidth = '100%';
   imgNode.style.height = 0;
@@ -140,3 +106,3 @@ imgNode.alt = (alt === null) ? '' : alt; // always put an 'alt'
 
-  var event = new CustomEvent('replaced.ab-interchange', {
+  var event = new CustomEvent(pluginName +'.replaced', {
     detail: { element: this.el }
@@ -166,2 +132,3 @@ });
     } else {
+      // 'ab-scroll' is a custom event from AB dependency
       window.addEventListener('ab-scroll', _onScroll.bind(this));
@@ -174,5 +141,5 @@ }
 function _generateRules() {
+  // retro compatibility: sources inside 'attr'
+  var getAttrSrc = this.el.getAttribute(attrSrc) || this.el.getAttribute(attr);
   var rulesList  = [];
-  // retro compatibility: sources inside 'attr'
-  var getAttrSrc = this.el.getAttribute(attrSrc) ? this.el.getAttribute(attrSrc) : this.el.getAttribute(attr);
   var rules = getAttrSrc.match(/\[[^\]]+\]/g);
@@ -217,3 +184,2 @@ var rule, path, query;
   if (this.inView() && !this._replaced) {
-    clearTimeout(this._lazyTimer);
     _replace.call(this);
@@ -223,10 +189,2 @@ }
 
-// define the right mode
-function _defineMode() {
-  // if img tag: no choice
-  if (this.el.tagName === 'IMG') return 'img';
-
-  return this.settings.mode;
-}
-
 // get width and height from attributes and manage multiple dimensions
@@ -257,2 +215,9 @@ function _getWidthHeight() {
 
+// init instance
+function _init() {
+  _setPlaceholder.call(this);
+  _events.call(this);
+  _generateRules.call(this);
+  _updatePath.call(this);
+}
 
@@ -267,7 +232,10 @@ var Plugin = function (el, options) {
   this.currentPath = '';
-  this.mode = _defineMode.call(this);
+  this.mode = this.settings.mode;
   this.replaced = false;
-  this._lazyTimer; // for delayed setTimeout
   this._imgNode = this.el; // where the source will be updated
 
+  // no need when using 'img' on browsers supporting that, except when using lazy loading
+  if ((this.el.tagName === 'IMG' || this.el.parentNode.tagName === 'PICTURE' || this.el.getAttribute('srcset')) && window.HTMLPictureElement)
+    return;
+
   _init.call(this);
@@ -277,6 +245,5 @@ };
 Plugin.prototype = {
-  // Force elmeent refresh
+  // Force element refresh
   resetDisplay: function() {
     this._replaced = false;
-
     _setPlaceholder.call(this);
@@ -283,0 +250,0 @@ _updatePath.call(this);

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

4

decreased by-33.33%

Number of package files

15

increased by7.14%

Worsened metrics

Total package byte prevSize

152257

decreased by-7.72%

Lines of code

780

decreased by-6.14%

Number of lines in readme file

138

decreased by-17.86%

Dependency changes

• Updatedab-mediaquery@^2.7.2