scalable - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/scalable.js

@@ -340,2 +340,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
     function Scalable(containerElement, options) {
+        var _this = this;
+
         _classCallCheck(this, Scalable);
@@ -366,10 +368,24 @@
         // Events
-        window.addEventListener('resize', this.update.bind(this));
-        this.element.addEventListener('DOMSubtreeModified', this.update.bind(this));
+        window.addEventListener('resize', function () {
+            return _this.update();
+        });
 
-        var elementEvent = new _ResizeSensor2.default(this.element, this.update.bind(this));
-        var containerElementEvent = new _ResizeSensor2.default(this.containerElement, this.update.bind(this));
+        var observer = new MutationObserver(function (mutations) {
+            _this.update();
+            // clear mutation stack to omit infinity loop
+            observer.takeRecords();
+        });
+        observer.observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
 
+        var elementEvent = new _ResizeSensor2.default(this.element, function () {
+            return _this.update();
+        });
+        var containerElementEvent = new _ResizeSensor2.default(this.containerElement, function () {
+            return _this.update();
+        });
+
         // initial update
-        setTimeout(this.update.bind(this), 0);
+        setTimeout(function () {
+            return _this.update();
+        });
     }
@@ -376,0 +392,0 @@

dist/scalable.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Scalable",[],t):"object"==typeof exports?exports.Scalable=t():e.Scalable=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){var i,o;!function(r,s){i=s,void 0!==(o="function"==typeof i?i.call(t,n,t,e):i)&&(e.exports=o)}(0,function(){function e(e,t){var n=Object.prototype.toString.call(e),i="[object Array]"===n||"[object NodeList]"===n||"[object HTMLCollection]"===n||"[object Object]"===n||"undefined"!=typeof jQuery&&e instanceof jQuery||"undefined"!=typeof Elements&&e instanceof Elements,o=0,r=e.length;if(i)for(;o<r;o++)t(e[o]);else t(e)}if("undefined"==typeof window)return null;var t=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)},n=function(i,o){function r(){var e=[];this.add=function(t){e.push(t)};var t,n;this.call=function(){for(t=0,n=e.length;t<n;t++)e[t].call()},this.remove=function(i){var o=[];for(t=0,n=e.length;t<n;t++)e[t]!==i&&o.push(e[t]);e=o},this.length=function(){return e.length}}function s(e,t){return e.currentStyle?e.currentStyle[t]:window.getComputedStyle?window.getComputedStyle(e,null).getPropertyValue(t):e.style[t]}function a(e,n){if(e.resizedAttached){if(e.resizedAttached)return void e.resizedAttached.add(n)}else e.resizedAttached=new r,e.resizedAttached.add(n);e.resizeSensor=document.createElement("div"),e.resizeSensor.className="resize-sensor";var i="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;",o="position: absolute; left: 0; top: 0; transition: 0s;";e.resizeSensor.style.cssText=i,e.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+i+'"><div style="'+o+'"></div></div><div class="resize-sensor-shrink" style="'+i+'"><div style="'+o+' width: 200%; height: 200%"></div></div>',e.appendChild(e.resizeSensor),"static"==s(e,"position")&&(e.style.position="relative");var a,l,c,d,u=e.resizeSensor.childNodes[0],h=u.childNodes[0],f=e.resizeSensor.childNodes[1],m=e.offsetWidth,p=e.offsetHeight,y=function(){h.style.width="100000px",h.style.height="100000px",u.scrollLeft=1e5,u.scrollTop=1e5,f.scrollLeft=1e5,f.scrollTop=1e5};y();var v=function(){l=0,a&&(m=c,p=d,e.resizedAttached&&e.resizedAttached.call())},g=function(){c=e.offsetWidth,d=e.offsetHeight,a=c!=m||d!=p,a&&!l&&(l=t(v)),y()},w=function(e,t,n){e.attachEvent?e.attachEvent("on"+t,n):e.addEventListener(t,n)};w(u,"scroll",g),w(f,"scroll",g)}e(i,function(e){a(e,o)}),this.detach=function(e){n.detach(i,e)}};return n.detach=function(t,n){e(t,function(e){e.resizedAttached&&"function"==typeof n&&(e.resizedAttached.remove(n),e.resizedAttached.length())||e.resizeSensor&&(e.contains(e.resizeSensor)&&e.removeChild(e.resizeSensor),delete e.resizeSensor,delete e.resizedAttached)})},n})},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();n(2);var s=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(s),l=function(){function e(t,n){i(this,e),"object"==(void 0===t?"undefined":o(t))?this.containerElement=t:"string"==typeof t&&(this.containerElement=document.querySelector(t)),this.element=this.containerElement.firstElementChild,this.options={align:"left",verticalAlign:"top",containerHeight:"fixed"},Object.assign(this.options,n),this.containerElement.style.position="relative",this.element.style.position="absolute",window.addEventListener("resize",this.update.bind(this)),this.element.addEventListener("DOMSubtreeModified",this.update.bind(this));new a.default(this.element,this.update.bind(this)),new a.default(this.containerElement,this.update.bind(this));setTimeout(this.update.bind(this),0)}return r(e,[{key:"update",value:function(){var e=this.containerElement.clientWidth,t=this.containerElement.clientHeight,n=this.element.clientWidth,i=this.element.clientHeight;this.element.clientWidth,this.element.clientHeight;switch(this.element.style.transform="",this.options.align){case"left":this.element.style.left="0";break;case"center":this.element.style.left="50%",this.element.style.transform+="translateX(-50%) ";break;case"right":this.element.style.right="0"}switch(this.options.verticalAlign){case"top":this.element.style.top="0";break;case"center":this.element.style.top="50%",this.element.style.transform+="translateY(-50%) ";break;case"bottom":this.element.style.bottom="0"}this.element.style.transformOrigin=this.options.align+" "+this.options.verticalAlign,this.options.minWidth&&(e=Math.max(e,this.options.minWidth)),this.options.maxWidth&&(e=Math.min(e,this.options.maxWidth));var o=e/n;"fixed"==this.options.containerHeight&&t<i*o&&(o=t/i),this.options.minScale&&(o=Math.max(o,this.options.minScale)),this.options.maxScale&&(o=Math.min(o,this.options.maxScale)),this.element.style.transform+="scale("+o+", "+o+")","auto"==this.options.containerHeight&&(this.containerElement.style.height=Math.ceil(this.element.clientHeight*o)+"px")}}]),e}();t.default=l},function(e,t,n){var i,o,r;!function(s,a){o=[n(0)],i=a,void 0!==(r="function"==typeof i?i.apply(t,o):i)&&(e.exports=r)}(0,function(t){var n=function(){function e(e){e||(e=document.documentElement);var t=window.getComputedStyle(e,null).fontSize;return parseFloat(t)||16}function i(t,n){var i=n.split(/\d/),o=i[i.length-1];switch(n=parseFloat(n),o){case"px":return n;case"em":return n*e(t);case"rem":return n*e();case"vw":return n*document.documentElement.clientWidth/100;case"vh":return n*document.documentElement.clientHeight/100;case"vmin":case"vmax":var r=document.documentElement.clientWidth/100,s=document.documentElement.clientHeight/100;return n*(0,Math["vmin"===o?"min":"max"])(r,s);default:return n}}function o(e){this.element=e,this.options={};var t,n,o,r,s,a,l,c=0,d=0;this.addOption=function(e){var t=[e.mode,e.property,e.value].join(",");this.options[t]=e};var u=["min-width","min-height","max-width","max-height"];this.call=function(){c=this.element.offsetWidth,d=this.element.offsetHeight,s={};for(t in this.options)this.options.hasOwnProperty(t)&&(n=this.options[t],o=i(this.element,n.value),r="width"==n.property?c:d,l=n.mode+"-"+n.property,a="","min"==n.mode&&r>=o&&(a+=n.value),"max"==n.mode&&r<=o&&(a+=n.value),s[l]||(s[l]=""),a&&-1===(" "+s[l]+" ").indexOf(" "+a+" ")&&(s[l]+=" "+a));for(var e in u)u.hasOwnProperty(e)&&(s[u[e]]?this.element.setAttribute(u[e],s[u[e]].substr(1)):this.element.removeAttribute(u[e]))}}function r(e,n){e.elementQueriesSetupInformation?e.elementQueriesSetupInformation.addOption(n):(e.elementQueriesSetupInformation=new o(e),e.elementQueriesSetupInformation.addOption(n),e.elementQueriesSensor=new t(e,function(){e.elementQueriesSetupInformation.call()})),e.elementQueriesSetupInformation.call(),f&&m.indexOf(e)<0&&m.push(e)}function s(e,t,n,i){void 0===p[t]&&(p[t]={}),void 0===p[t][n]&&(p[t][n]={}),void 0===p[t][n][i]?p[t][n][i]=e:p[t][n][i]+=","+e}function a(){var e;if(document.querySelectorAll&&(e=document.querySelectorAll.bind(document)),e||"undefined"==typeof $$||(e=$$),e||"undefined"==typeof jQuery||(e=jQuery),!e)throw"No document.querySelectorAll, jQuery or Mootools's $$ found.";return e}function l(){var e=a();for(var t in p)if(p.hasOwnProperty(t))for(var n in p[t])if(p[t].hasOwnProperty(n))for(var i in p[t][n])if(p[t][n].hasOwnProperty(i))for(var o=e(p[t][n][i]),s=0,l=o.length;s<l;s++)r(o[s],{mode:t,property:n,value:i})}function c(e){function n(){var t,n=!1;for(t in i)i.hasOwnProperty(t)&&o[t].minWidth&&e.offsetWidth>o[t].minWidth&&(n=t);if(n||(n=s),a!=n)if(l[n])i[a].style.display="none",i[n].style.display="block",a=n;else{var c=new Image;c.onload=function(){i[n].src=r[n],i[a].style.display="none",i[n].style.display="block",l[n]=!0,a=n},c.src=r[n]}else i[n].src=r[n]}var i=[],o=[],r=[],s=0,a=-1,l=[];for(var c in e.children)if(e.children.hasOwnProperty(c)&&e.children[c].tagName&&"img"===e.children[c].tagName.toLowerCase()){i.push(e.children[c]);var d=e.children[c].getAttribute("min-width")||e.children[c].getAttribute("data-min-width"),u=e.children[c].getAttribute("data-src")||e.children[c].getAttribute("url");r.push(u);var h={minWidth:d};o.push(h),d?e.children[c].style.display="none":(s=i.length-1,e.children[c].style.display="block")}a=s,e.resizeSensor=new t(e,n),n(),f&&m.push(e)}function d(){for(var e=a(),t=e("[data-responsive-image],[responsive-image]"),n=0,i=t.length;n<i;n++)c(t[n])}function u(e){var t,n;for(e=e.replace(/'/g,'"');null!==(t=y.exec(e));)for(n=t[1]+t[3],attrs=t[2];null!==(attrMatch=v.exec(attrs));)s(n,attrMatch[1],attrMatch[2],attrMatch[3])}function h(e){var t="";if(e)if("string"==typeof e)e=e.toLowerCase(),-1===e.indexOf("min-width")&&-1===e.indexOf("max-width")||u(e);else for(var n=0,i=e.length;n<i;n++)1===e[n].type?(t=e[n].selectorText||e[n].cssText,-1!==t.indexOf("min-height")||-1!==t.indexOf("max-height")?u(t):-1===t.indexOf("min-width")&&-1===t.indexOf("max-width")||u(t)):4===e[n].type&&h(e[n].cssRules||e[n].rules)}var f=!1,m=[],p={},y=/,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/gim,v=/\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/gim,g=!1;this.init=function(e){f=void 0!==e&&e;for(var t=0,n=document.styleSheets.length;t<n;t++)try{h(document.styleSheets[t].cssRules||document.styleSheets[t].rules||document.styleSheets[t].cssText)}catch(e){if("SecurityError"!==e.name)throw e}if(!g){var i=document.createElement("style");i.type="text/css",i.innerHTML="[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img { width: 100%;}",document.getElementsByTagName("head")[0].appendChild(i),g=!0}l(),d()},this.update=function(e){this.init(e)},this.detach=function(){if(!this.withTracking)throw"withTracking is not enabled. We can not detach elements since we don not store it.Use ElementQueries.withTracking = true; before domready or call ElementQueryes.update(true).";for(var e;e=m.pop();)n.detach(e);m=[]}};n.update=function(e){n.instance.update(e)},n.detach=function(e){e.elementQueriesSetupInformation?(e.elementQueriesSensor.detach(),delete e.elementQueriesSetupInformation,delete e.elementQueriesSensor):e.resizeSensor&&(e.resizeSensor.detach(),delete e.resizeSensor)},n.withTracking=!1,n.init=function(){n.instance||(n.instance=new n),n.instance.init(n.withTracking)};var i=function(e){if(document.addEventListener)document.addEventListener("DOMContentLoaded",e,!1);else if(/KHTML|WebKit|iCab/i.test(navigator.userAgent))var t=setInterval(function(){/loaded|complete/i.test(document.readyState)&&(e(),clearInterval(t))},10);else window.onload=e};return n.listen=function(){i(n.init)},void 0!==e&&void 0!==e.exports?e.exports=n:(window.ElementQueries=n,n.listen()),n})}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Scalable",[],t):"object"==typeof exports?exports.Scalable=t():e.Scalable=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){var i,o;!function(r,s){i=s,void 0!==(o="function"==typeof i?i.call(t,n,t,e):i)&&(e.exports=o)}(0,function(){function e(e,t){var n=Object.prototype.toString.call(e),i="[object Array]"===n||"[object NodeList]"===n||"[object HTMLCollection]"===n||"[object Object]"===n||"undefined"!=typeof jQuery&&e instanceof jQuery||"undefined"!=typeof Elements&&e instanceof Elements,o=0,r=e.length;if(i)for(;o<r;o++)t(e[o]);else t(e)}if("undefined"==typeof window)return null;var t=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)},n=function(i,o){function r(){var e=[];this.add=function(t){e.push(t)};var t,n;this.call=function(){for(t=0,n=e.length;t<n;t++)e[t].call()},this.remove=function(i){var o=[];for(t=0,n=e.length;t<n;t++)e[t]!==i&&o.push(e[t]);e=o},this.length=function(){return e.length}}function s(e,t){return e.currentStyle?e.currentStyle[t]:window.getComputedStyle?window.getComputedStyle(e,null).getPropertyValue(t):e.style[t]}function a(e,n){if(e.resizedAttached){if(e.resizedAttached)return void e.resizedAttached.add(n)}else e.resizedAttached=new r,e.resizedAttached.add(n);e.resizeSensor=document.createElement("div"),e.resizeSensor.className="resize-sensor";var i="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;",o="position: absolute; left: 0; top: 0; transition: 0s;";e.resizeSensor.style.cssText=i,e.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+i+'"><div style="'+o+'"></div></div><div class="resize-sensor-shrink" style="'+i+'"><div style="'+o+' width: 200%; height: 200%"></div></div>',e.appendChild(e.resizeSensor),"static"==s(e,"position")&&(e.style.position="relative");var a,l,c,d,u=e.resizeSensor.childNodes[0],h=u.childNodes[0],f=e.resizeSensor.childNodes[1],m=e.offsetWidth,p=e.offsetHeight,y=function(){h.style.width="100000px",h.style.height="100000px",u.scrollLeft=1e5,u.scrollTop=1e5,f.scrollLeft=1e5,f.scrollTop=1e5};y();var v=function(){l=0,a&&(m=c,p=d,e.resizedAttached&&e.resizedAttached.call())},g=function(){c=e.offsetWidth,d=e.offsetHeight,a=c!=m||d!=p,a&&!l&&(l=t(v)),y()},w=function(e,t,n){e.attachEvent?e.attachEvent("on"+t,n):e.addEventListener(t,n)};w(u,"scroll",g),w(f,"scroll",g)}e(i,function(e){a(e,o)}),this.detach=function(e){n.detach(i,e)}};return n.detach=function(t,n){e(t,function(e){e.resizedAttached&&"function"==typeof n&&(e.resizedAttached.remove(n),e.resizedAttached.length())||e.resizeSensor&&(e.contains(e.resizeSensor)&&e.removeChild(e.resizeSensor),delete e.resizeSensor,delete e.resizedAttached)})},n})},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();n(2);var s=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(s),l=function(){function e(t,n){var r=this;i(this,e),"object"==(void 0===t?"undefined":o(t))?this.containerElement=t:"string"==typeof t&&(this.containerElement=document.querySelector(t)),this.element=this.containerElement.firstElementChild,this.options={align:"left",verticalAlign:"top",containerHeight:"fixed"},Object.assign(this.options,n),this.containerElement.style.position="relative",this.element.style.position="absolute",window.addEventListener("resize",function(){return r.update()});var s=new MutationObserver(function(e){r.update(),s.takeRecords()});s.observe(this.element,{attributes:!0,childList:!0,characterData:!0,subtree:!0});new a.default(this.element,function(){return r.update()}),new a.default(this.containerElement,function(){return r.update()});setTimeout(function(){return r.update()})}return r(e,[{key:"update",value:function(){var e=this.containerElement.clientWidth,t=this.containerElement.clientHeight,n=this.element.clientWidth,i=this.element.clientHeight;this.element.clientWidth,this.element.clientHeight;switch(this.element.style.transform="",this.options.align){case"left":this.element.style.left="0";break;case"center":this.element.style.left="50%",this.element.style.transform+="translateX(-50%) ";break;case"right":this.element.style.right="0"}switch(this.options.verticalAlign){case"top":this.element.style.top="0";break;case"center":this.element.style.top="50%",this.element.style.transform+="translateY(-50%) ";break;case"bottom":this.element.style.bottom="0"}this.element.style.transformOrigin=this.options.align+" "+this.options.verticalAlign,this.options.minWidth&&(e=Math.max(e,this.options.minWidth)),this.options.maxWidth&&(e=Math.min(e,this.options.maxWidth));var o=e/n;"fixed"==this.options.containerHeight&&t<i*o&&(o=t/i),this.options.minScale&&(o=Math.max(o,this.options.minScale)),this.options.maxScale&&(o=Math.min(o,this.options.maxScale)),this.element.style.transform+="scale("+o+", "+o+")","auto"==this.options.containerHeight&&(this.containerElement.style.height=Math.ceil(this.element.clientHeight*o)+"px")}}]),e}();t.default=l},function(e,t,n){var i,o,r;!function(s,a){o=[n(0)],i=a,void 0!==(r="function"==typeof i?i.apply(t,o):i)&&(e.exports=r)}(0,function(t){var n=function(){function e(e){e||(e=document.documentElement);var t=window.getComputedStyle(e,null).fontSize;return parseFloat(t)||16}function i(t,n){var i=n.split(/\d/),o=i[i.length-1];switch(n=parseFloat(n),o){case"px":return n;case"em":return n*e(t);case"rem":return n*e();case"vw":return n*document.documentElement.clientWidth/100;case"vh":return n*document.documentElement.clientHeight/100;case"vmin":case"vmax":var r=document.documentElement.clientWidth/100,s=document.documentElement.clientHeight/100;return n*(0,Math["vmin"===o?"min":"max"])(r,s);default:return n}}function o(e){this.element=e,this.options={};var t,n,o,r,s,a,l,c=0,d=0;this.addOption=function(e){var t=[e.mode,e.property,e.value].join(",");this.options[t]=e};var u=["min-width","min-height","max-width","max-height"];this.call=function(){c=this.element.offsetWidth,d=this.element.offsetHeight,s={};for(t in this.options)this.options.hasOwnProperty(t)&&(n=this.options[t],o=i(this.element,n.value),r="width"==n.property?c:d,l=n.mode+"-"+n.property,a="","min"==n.mode&&r>=o&&(a+=n.value),"max"==n.mode&&r<=o&&(a+=n.value),s[l]||(s[l]=""),a&&-1===(" "+s[l]+" ").indexOf(" "+a+" ")&&(s[l]+=" "+a));for(var e in u)u.hasOwnProperty(e)&&(s[u[e]]?this.element.setAttribute(u[e],s[u[e]].substr(1)):this.element.removeAttribute(u[e]))}}function r(e,n){e.elementQueriesSetupInformation?e.elementQueriesSetupInformation.addOption(n):(e.elementQueriesSetupInformation=new o(e),e.elementQueriesSetupInformation.addOption(n),e.elementQueriesSensor=new t(e,function(){e.elementQueriesSetupInformation.call()})),e.elementQueriesSetupInformation.call(),f&&m.indexOf(e)<0&&m.push(e)}function s(e,t,n,i){void 0===p[t]&&(p[t]={}),void 0===p[t][n]&&(p[t][n]={}),void 0===p[t][n][i]?p[t][n][i]=e:p[t][n][i]+=","+e}function a(){var e;if(document.querySelectorAll&&(e=document.querySelectorAll.bind(document)),e||"undefined"==typeof $$||(e=$$),e||"undefined"==typeof jQuery||(e=jQuery),!e)throw"No document.querySelectorAll, jQuery or Mootools's $$ found.";return e}function l(){var e=a();for(var t in p)if(p.hasOwnProperty(t))for(var n in p[t])if(p[t].hasOwnProperty(n))for(var i in p[t][n])if(p[t][n].hasOwnProperty(i))for(var o=e(p[t][n][i]),s=0,l=o.length;s<l;s++)r(o[s],{mode:t,property:n,value:i})}function c(e){function n(){var t,n=!1;for(t in i)i.hasOwnProperty(t)&&o[t].minWidth&&e.offsetWidth>o[t].minWidth&&(n=t);if(n||(n=s),a!=n)if(l[n])i[a].style.display="none",i[n].style.display="block",a=n;else{var c=new Image;c.onload=function(){i[n].src=r[n],i[a].style.display="none",i[n].style.display="block",l[n]=!0,a=n},c.src=r[n]}else i[n].src=r[n]}var i=[],o=[],r=[],s=0,a=-1,l=[];for(var c in e.children)if(e.children.hasOwnProperty(c)&&e.children[c].tagName&&"img"===e.children[c].tagName.toLowerCase()){i.push(e.children[c]);var d=e.children[c].getAttribute("min-width")||e.children[c].getAttribute("data-min-width"),u=e.children[c].getAttribute("data-src")||e.children[c].getAttribute("url");r.push(u);var h={minWidth:d};o.push(h),d?e.children[c].style.display="none":(s=i.length-1,e.children[c].style.display="block")}a=s,e.resizeSensor=new t(e,n),n(),f&&m.push(e)}function d(){for(var e=a(),t=e("[data-responsive-image],[responsive-image]"),n=0,i=t.length;n<i;n++)c(t[n])}function u(e){var t,n;for(e=e.replace(/'/g,'"');null!==(t=y.exec(e));)for(n=t[1]+t[3],attrs=t[2];null!==(attrMatch=v.exec(attrs));)s(n,attrMatch[1],attrMatch[2],attrMatch[3])}function h(e){var t="";if(e)if("string"==typeof e)e=e.toLowerCase(),-1===e.indexOf("min-width")&&-1===e.indexOf("max-width")||u(e);else for(var n=0,i=e.length;n<i;n++)1===e[n].type?(t=e[n].selectorText||e[n].cssText,-1!==t.indexOf("min-height")||-1!==t.indexOf("max-height")?u(t):-1===t.indexOf("min-width")&&-1===t.indexOf("max-width")||u(t)):4===e[n].type&&h(e[n].cssRules||e[n].rules)}var f=!1,m=[],p={},y=/,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/gim,v=/\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/gim,g=!1;this.init=function(e){f=void 0!==e&&e;for(var t=0,n=document.styleSheets.length;t<n;t++)try{h(document.styleSheets[t].cssRules||document.styleSheets[t].rules||document.styleSheets[t].cssText)}catch(e){if("SecurityError"!==e.name)throw e}if(!g){var i=document.createElement("style");i.type="text/css",i.innerHTML="[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img { width: 100%;}",document.getElementsByTagName("head")[0].appendChild(i),g=!0}l(),d()},this.update=function(e){this.init(e)},this.detach=function(){if(!this.withTracking)throw"withTracking is not enabled. We can not detach elements since we don not store it.Use ElementQueries.withTracking = true; before domready or call ElementQueryes.update(true).";for(var e;e=m.pop();)n.detach(e);m=[]}};n.update=function(e){n.instance.update(e)},n.detach=function(e){e.elementQueriesSetupInformation?(e.elementQueriesSensor.detach(),delete e.elementQueriesSetupInformation,delete e.elementQueriesSensor):e.resizeSensor&&(e.resizeSensor.detach(),delete e.resizeSensor)},n.withTracking=!1,n.init=function(){n.instance||(n.instance=new n),n.instance.init(n.withTracking)};var i=function(e){if(document.addEventListener)document.addEventListener("DOMContentLoaded",e,!1);else if(/KHTML|WebKit|iCab/i.test(navigator.userAgent))var t=setInterval(function(){/loaded|complete/i.test(document.readyState)&&(e(),clearInterval(t))},10);else window.onload=e};return n.listen=function(){i(n.init)},void 0!==e&&void 0!==e.exports?e.exports=n:(window.ElementQueries=n,n.listen()),n})}]).default});

docs/assets/scalable.js

@@ -340,2 +340,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
     function Scalable(containerElement, options) {
+        var _this = this;
+
         _classCallCheck(this, Scalable);
@@ -366,10 +368,24 @@
         // Events
-        window.addEventListener('resize', this.update.bind(this));
-        this.element.addEventListener('DOMSubtreeModified', this.update.bind(this));
+        window.addEventListener('resize', function () {
+            return _this.update();
+        });
 
-        var elementEvent = new _ResizeSensor2.default(this.element, this.update.bind(this));
-        var containerElementEvent = new _ResizeSensor2.default(this.containerElement, this.update.bind(this));
+        var observer = new MutationObserver(function (mutations) {
+            _this.update();
+            // clear mutation stack to omit infinity loop
+            observer.takeRecords();
+        });
+        observer.observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
 
+        var elementEvent = new _ResizeSensor2.default(this.element, function () {
+            return _this.update();
+        });
+        var containerElementEvent = new _ResizeSensor2.default(this.containerElement, function () {
+            return _this.update();
+        });
+
         // initial update
-        setTimeout(this.update.bind(this), 0);
+        setTimeout(function () {
+            return _this.update();
+        });
     }
@@ -376,0 +392,0 @@

package.json

 {
   "name": "scalable",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

src/scalable.js

@@ -30,10 +30,16 @@ import "../node_modules/css-element-queries/src/ElementQueries";
         // Events
-        window.addEventListener('resize', this.update.bind(this));
-        this.element.addEventListener('DOMSubtreeModified', this.update.bind(this));
+        window.addEventListener('resize', () => this.update());
 
-        var elementEvent = new ResizeSensor(this.element, this.update.bind(this));
-        var containerElementEvent = new ResizeSensor(this.containerElement, this.update.bind(this));
+        var observer = new MutationObserver((mutations) => {
+            this.update();
+            // clear mutation stack to omit infinity loop
+            observer.takeRecords();
+        });
+        observer.observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
 
+        var elementEvent = new ResizeSensor(this.element, () => this.update());
+        var containerElementEvent = new ResizeSensor(this.containerElement, () => this.update());
+
         // initial update
-        setTimeout(this.update.bind(this), 0);
+        setTimeout(() => this.update());
     }
@@ -40,0 +46,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3585954

increased by0.04%

Lines of code

8817

increased by0.38%

No dependency changes