js-cloudimg-responsive - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

build/js-cloudimage-responsive.v0.0.4.min.js

@@ -1,1 +0,1 @@
-!function(e){var t={};function i(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=3)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"n",function(){return isResponsiveAndLoaded}),__webpack_require__.d(__webpack_exports__,"j",function(){return getPresets}),__webpack_require__.d(__webpack_exports__,"c",function(){return checkOnMedia}),__webpack_require__.d(__webpack_exports__,"b",function(){return checkIfRelativeUrlPath}),__webpack_require__.d(__webpack_exports__,"h",function(){return getImgSrc}),__webpack_require__.d(__webpack_exports__,"l",function(){return getSizeAccordingToPixelRatio}),__webpack_require__.d(__webpack_exports__,"f",function(){return generateUrl}),__webpack_require__.d(__webpack_exports__,"i",function(){return getParentWidth}),__webpack_require__.d(__webpack_exports__,"e",function(){return generateSources}),__webpack_require__.d(__webpack_exports__,"k",function(){return getRatioBySize}),__webpack_require__.d(__webpack_exports__,"d",function(){return filterImages}),__webpack_require__.d(__webpack_exports__,"g",function(){return getImageProps}),__webpack_require__.d(__webpack_exports__,"m",function(){return insertSource}),__webpack_require__.d(__webpack_exports__,"a",function(){return addClass});var _typeof="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},getPresets=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments[1],i=e.split("|"),r={presets:{},order:[]},n=0;n<i.length;n++){var o=i[n]&&i[n].split(":"),a=o[0]&&o[0].trim(),s=o[1]&&o[1].trim();a&&s&&(r.presets[a]=s,r.order.unshift(a))}return r[t]},checkOnMedia=function checkOnMedia(size){try{var object=eval("("+size+")");return object&&"object"===(void 0===object?"undefined":_typeof(object))}catch(e){return!1}},checkIfRelativeUrlPath=function(e){return 0===e.indexOf("//")&&(e=window.location.protocol+e),0!==e.indexOf("http://")&&0!==e.indexOf("https://")&&0!==e.indexOf("//")},getImgSrc=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return t?i+e:e},getSizeAccordingToPixelRatio=function(e){var t=e.toString().split("x"),i=[];return[].forEach.call(t,function(e){i.push(e*Math.round(window.devicePixelRatio||1))}),i.join("x")},generateUrl=function(e,t,i,r,n){return(n.ultraFast?"https://scaleflex.ultrafast.io/":"https://")+n.token+"."+n.container+"/"+e+"/"+t+"/"+i+"/"+r+n.queryString},getParentWidth=function(e,t){if(!(e&&e.parentElement&&e.parentElement.getBoundingClientRect||e&&e.width))return t.width;var i=getParentContainerWithWidth(e),r=parseInt(i,10),n=parseInt(window.getComputedStyle(e).width);return n&&n<r&&n>15||!r?getSizeLimit(n):r?getSizeLimit(r):e.width||t.width},getParentContainerWithWidth=function(e){var t=null,i=0;do{i=(t=t&&t.parentNode||e.parentNode).getBoundingClientRect().width}while(t&&!i);return i},generateSources=function(e,t,i,r,n,o,a){var s=[];if(n){for(var c=[],_=0;_<o.order.length;_++){t[o.order[_]]&&c.unshift(o.order[_])}for(var u=0;u<c.length;u++){var l=!(u<c.length-1),d=l?c[u-1]:c[u],p=t[c[u]];a&&(p=p.split("x").map(function(e){return e/5}).join("x"),i="q10.foil1");var f=generateSrcset(e,p,i,r,o),g="("+(l?"min":"max")+"-width: "+(o.presets[d]+(l?1:0))+"px)";s.push({mediaQuery:g,srcSet:f})}}else a&&(t=t.split("x").map(function(e){return e/5}).join("x"),i="q10.foil1"),s.push({srcSet:generateSrcset(e,t,i,r,o)});return s},generateSrcset=function(e,t,i,r,n){var o=t.toString().split("x")[0],a=t.toString().split("x")[1];return generateImgSrc(e,i,r,o,a,1,n)},getRatioBySize=function(e,t){var i=void 0,r=void 0;if("object"===(void 0===e?"undefined":_typeof(e))){var n=getBreakPoint(t),o=t.order.indexOf(n),a=null;do{a=e[t.order[o]],o--}while(!a&&o>=0);if(!a){var s=t.order.indexOf(n);do{a=e[t.order[s]],s++}while(!a&&s<=t.order.length)}i=a.toString().split("x")[0],r=a.toString().split("x")[1]}else i=e.toString().split("x")[0],r=e.toString().split("x")[1];return i&&r?i/r:null},getBreakPoint=function(e){var t=e.presets,i=e.order,r=window.innerWidth,n=i.findIndex(function(e){return t[e]<r});return i[n-1]||i[n]||i[i.length-1]},generateImgSrc=function(e,t,i,r,n,o,a){var s=Math.trunc(r*o);return n&&(s+="x"+Math.trunc(n*o)),generateUrl(e,getSizeAccordingToPixelRatio(s),t,i,a).replace("http://scaleflex.ultrafast.io/","").replace("https://scaleflex.ultrafast.io/","").replace("//scaleflex.ultrafast.io/","").replace("///","/")},getSizeLimit=function(e){return e<=25?"25":e<=50?"50":e<=100?"100":e<=200?"200":e<=300?"300":e<=400?"400":e<=500?"500":e<=600?"600":e<=700?"700":e<=800?"800":e<=900?"900":e<=1e3?"1000":e<=1100?"1100":e<=1200?"1200":e<=1300?"1300":e<=1400?"1400":e<=1500?"1500":e<=1600?"1600":e<=1700?"1700":e<=1800?"1800":e<=1900?"1900":e<=2400?"2400":e<=2800?"2800":"3600"},filterImages=function(e,t){for(var i=[],r=0;r<e.length;r++){var n=e[r],o=n.getAttribute(t)||"",a="true"===n.getAttribute("data-is-ci-processed");".svg"===o.slice(-4).toLowerCase()||a||i.push(n)}return i},getImageProps=function(e){return{operation:attr(e,"o")||attr(e,"operation")||attr(e,"data-operation")||void 0,size:attr(e,"s")||attr(e,"size")||attr(e,"data-size")||void 0,filters:attr(e,"f")||attr(e,"filters")||attr(e,"data-filters")||void 0,ratio:attr(e,"r")||attr(e,"ratio")||attr(e,"data-ratio")||void 0,src:attr(e,"ci-src")||attr(e,"data-src")||void 0}},attr=function(e,t){return e.getAttribute(t)},isResponsiveAndLoaded=function(e){return!(attr(e,"s")||attr(e,"size")||attr(e,"data-size"))&&e.className.includes("ci-image-loaded")},insertSource=function(e,t){e.parentNode.insertBefore(t,e)},addClass=function(e,t){e.classList.contains(t)||e.classList.add(t)},removeClass=function(e,t){e.classList.contains(t)&&e.classList.remove(t)}},function(module,__webpack_exports__,__webpack_require__){"use strict";var _ci_utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),throttle_debounce__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(2),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,i,r){return i&&e(t.prototype,i),r&&e(t,r),t}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var CIResponsive=function(){function CIResponsive(e){var t=this;_classCallCheck(this,CIResponsive);var i=e.token,r=void 0===i?"":i,n=e.container,o=void 0===n?"cloudimg.io":n,a=e.ultraFast,s=void 0!==a&&a,c=e.lazyLoading,_=void 0!==c&&c,u=e.imgLoadingAnimation,l=void 0===u||u,d=e.lazyLoadOffset,p=void 0===d?100:d,f=e.width,g=void 0===f?"400":f,m=e.height,h=void 0===m?"300":m,v=e.operation,b=void 0===v?"width":v,w=e.filters,y=void 0===w?"n":w,O=e.placeholderBackground,E=void 0===O?"#f4f4f4":O,P=e.baseUrl,S=void 0===P?"/":P,I=e.ratio,x=void 0===I?1.5:I,M=e.presets,k=e.queryString,A=void 0===k?"":k;this.head=document.head||document.getElementsByTagName("head")[0],this.backgroundImgIndex=0,this.forceUpdate=!1,this.config={token:r,container:o,ultraFast:s,lazyLoading:_,imgLoadingAnimation:l,lazyLoadOffset:p,width:g,height:h,operation:b,filters:y,placeholderBackground:E,baseUrl:S,ratio:x,presets:M?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.j)(M,"presets"):{xs:575,sm:767,md:991,lg:1199,xl:3e3},order:M?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.j)(M,"order"):["xl","lg","md","sm","xs"],queryString:A,innerWidth:window.innerWidth},this.updateDimensions=Object(throttle_debounce__WEBPACK_IMPORTED_MODULE_1__.a)(100,function(){t.config.innerWidth;t.process(!0),t.config.innerWidth<window.innerWidth&&(t.config.innerWidth=window.innerWidth)}),window.addEventListener("resize",this.updateDimensions)}return _createClass(CIResponsive,[{key:"init",value:function(){this.process()}},{key:"setForceUpdate",value:function(){this.forceUpdate=value,value&&this.process(!0)}},{key:"process",value:function(e){var t=this,i=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.d)(document.querySelectorAll("img[ci-src]"),"ci-src"),r=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.d)(document.querySelectorAll("[ci-background]"),"ci-background");i.forEach(function(i){t.processImage(i,e)}),r.forEach(function(e){t.processBackgroundImage(e)})}},{key:"processImage",value:function processImage(image,isUpdate){var _this3=this;if(!Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.n)(image)||this.config.innerWidth<window.innerWidth){Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"ci-image"),this.config.lazyLoading&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"lazyload");var parentContainerWidth=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.i)(image,this.config),_getImageProps=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.g)(image),_getImageProps$operat=_getImageProps.operation,operation=void 0===_getImageProps$operat?this.config.operation:_getImageProps$operat,_getImageProps$size=_getImageProps.size,size=void 0===_getImageProps$size?this.config.size||parentContainerWidth:_getImageProps$size,_getImageProps$filter=_getImageProps.filters,filters=void 0===_getImageProps$filter?this.config.filters:_getImageProps$filter,_getImageProps$ratio=_getImageProps.ratio,ratio=void 0===_getImageProps$ratio?this.config.ratio:_getImageProps$ratio,src=_getImageProps.src,isAdaptive=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.c)(size);size=isAdaptive?eval("("+size+")"):size;var isRelativeUrlPath=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.b)(src),imgSrc=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.h)(src,isRelativeUrlPath,this.config.baseUrl),resultSize=isAdaptive?size:Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.l)(size),isPreview=parentContainerWidth>400&&this.config.lazyLoading,cloudimageUrl=isAdaptive?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)("width",parentContainerWidth,filters,imgSrc,this.config):Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)(operation,resultSize,filters,imgSrc,this.config),ratioBySize=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.k)(size,this.config),imageHeight=Math.floor(parentContainerWidth/(ratioBySize||ratio)),isRatio=!(!ratioBySize&&!ratio);if(this.config.imgLoadingAnimation&&this.setAnimation(image,parentContainerWidth),isUpdate){var wrapper=this.getWrapper(image);if(wrapper.style.paddingBottom=100/(ratioBySize||ratio)+"%",isAdaptive)return}else this.wrap(image,null,isRatio,ratioBySize,ratio,isPreview);if(isRatio&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"ci-image-ratio"),isAdaptive&&!isPreview){this.wrapWithPicture(image);var sources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,filters,imgSrc,isAdaptive,this.config);this.addSources(image,sources),this.setSrc(image,cloudimageUrl),this.config.imgLoadingAnimation&&(image.onload=function(){_this3.finishAnimation(image)})}else if(isAdaptive&&isPreview){this.wrapWithPicture(image);var previewImg=null,container=image.parentNode.parentNode,isPreviewImg=container.className.indexOf("ci-with-preview-image")>-1;if(isPreviewImg)previewImg=container.querySelector("img.ci-image-preview");else{var pictureElem=container.querySelector("picture");previewImg=document.createElement("img"),previewImg.className="ci-image-ratio ci-image-preview lazyload",container.classList.add("ci-with-preview-image"),container.insertBefore(previewImg,pictureElem)}this.wrapWithPicture(previewImg),this.setAnimation(previewImg,parentContainerWidth);var config=_extends({},this.config,{queryString:""}),url=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)("width",parentContainerWidth/5,"q5.foil1",imgSrc,config),_sources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,filters,imgSrc,isAdaptive,this.config),previewSources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,"q5.foil1",imgSrc,isAdaptive,config,!0);this.addSources(previewImg,previewSources),this.addSources(image,_sources),this.setSrc(previewImg,url),this.setSrc(image,cloudimageUrl),image.onload=function(){_this3.finishAnimation(image)}}else if(isPreview){var _container=image.parentNode,_isPreviewImg=_container.className.indexOf("ci-with-preview-image")>-1,_config=_extends({},this.config,{queryString:""}),_size=resultSize.split("x").map(function(e){return e/5}).join("x"),_url=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)(operation,_size,"q5.foil1",imgSrc,_config),_previewImg=null;_isPreviewImg?_previewImg=_container.querySelector("img.ci-image-preview"):(_previewImg=document.createElement("img"),_previewImg.className="ci-image-ratio ci-image-preview lazyload",_container.classList.add("ci-with-preview-image"),image.parentNode.insertBefore(_previewImg,image)),this.setAnimation(_previewImg,parentContainerWidth),this.setSrc(_previewImg,_url,"data-src"),this.setSrc(image,cloudimageUrl,"data-src"),image.onload=function(){_this3.finishAnimation(image)}}else image.onload=function(){_this3.finishAnimation(image)},this.setSrc(image,cloudimageUrl)}}},{key:"getWrapper",value:function(e){return(e.parentNode.className||"").indexOf("ci-image-wrapper")>-1?e.parentNode:(e.parentNode.parentNode.className||"").indexOf("ci-image-wrapper")>-1?e.parentNode.parentNode:void 0}},{key:"setSrc",value:function(e,t,i){var r=this.config,n=r.lazyLoading,o=r.dataSrcAttr;e.setAttribute(i||(n?"data-src":o||"src"),t)}},{key:"setSrcset",value:function(e,t){var i=this.config,r=i.lazyLoading,n=i.dataSrcsetAttr;e.setAttribute(r?"data-srcset":n||"srcset",t)}},{key:"setAnimation",value:function(e,t){e.style.filter="blur("+Math.floor(t/100)+"px)",e.style.transform="scale3d(1.1, 1.1, 1)",setTimeout(function(){e.style.transition="all 0.3s ease-in-out"})}},{key:"finishAnimation",value:function(e){e.style.filter="blur(0px)",e.style.transform="translateZ(0) scale3d(1, 1, 1)",Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(e,"ci-image-loaded")}},{key:"wrap",value:function(e,t,i,r,n){if((e.parentNode.className||"").indexOf("ci-image-wrapper")>-1||(e.parentNode.parentNode.className||"").indexOf("ci-image-wrapper")>-1)return t=e.parentNode,Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper"),t.style.background=this.config.placeholderBackground,void(i&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper-ratio"));t=t||document.createElement("div"),Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper"),t.style.background=this.config.placeholderBackground,i&&(Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper-ratio"),t.style.paddingBottom=100/(r||n)+"%"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e)}},{key:"wrapWithPicture",value:function(e,t){"picture"!==(e.parentNode.nodeName||"").toLowerCase()&&(t=t||document.createElement("picture"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e))}},{key:"addSources",value:function(e,t){var i=this;t.forEach(function(t,r){var n=document.createElement("source");n.media=t.mediaQuery,i.setSrcset(n,t.srcSet),Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.m)(e,n)})}},{key:"updateSources",value:function(e,t,i){var r=this;e.parentNode.querySelectorAll("source").forEach(function(e,t){r.config.lazyLoading&&r.setSrcset(e,i[t].srcSet),e.srcset=i[t].srcSet})}},{key:"processBackgroundImage",value:function(){}}]),CIResponsive}();__webpack_exports__.a=CIResponsive},function(e,t,i){"use strict";function r(e,t,i,r){var n,o=0;return"boolean"!=typeof t&&(r=i,i=t,t=void 0),function(){var a=this,s=Number(new Date)-o,c=arguments;function _(){o=Number(new Date),i.apply(a,c)}r&&!n&&_(),n&&clearTimeout(n),void 0===r&&s>e?_():!0!==t&&(n=setTimeout(r?function(){n=void 0}:_,void 0===r?e-s:e))}}function n(e,t,i){return void 0===i?r(e,t,!1):r(e,i,!1!==t)}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.r(t);var r=i(1);i(4);window.CIResponsive=r.a},function(e,t,i){var r=i(5);"string"==typeof r&&(r=[[e.i,r,""]]);var n={hmr:!0,transform:void 0,insertInto:void 0};i(7)(r,n);r.locals&&(e.exports=r.locals)},function(e,t,i){(e.exports=i(6)(!1)).push([e.i,"div.ci-image-wrapper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\ndiv.ci-image-wrapper-ratio {\n\n}\n\nimg.ci-image {\n  opacity: 1;\n  display: block;\n  width: 100%;\n}\n\nimg.ci-image-ratio {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n/*img.ci-image-animation {*/\n  /*transition: all 0.3s ease-in-out;*/\n/*}*/\n\n/*img.ci-image-animation:not(.ci-image-loaded) {*/\n  /*transform: scale3d(1.1, 1.1, 1);*/\n/*}*/\n\n/*img.ci-image-animation.ci-image-loaded {*/\n  /*opacity: 1;*/\n  /*transform: translateZ(0) scale3d(1, 1, 1);*/\n/*}*/",""])},function(e,t,i){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=function(e,t){var i=e[1]||"",r=e[3];if(!r)return i;if(t&&"function"==typeof btoa){var n=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),o=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[i].concat(o).concat([n]).join("\n")}var a;return[i].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},n=0;n<this.length;n++){var o=this[n][0];null!=o&&(r[o]=!0)}for(n=0;n<e.length;n++){var a=e[n];null!=a[0]&&r[a[0]]||(i&&!a[2]?a[2]=i:i&&(a[2]="("+a[2]+") and ("+i+")"),t.push(a))}},t}},function(e,t,i){var r,n,o={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===n&&(n=r.apply(this,arguments)),n}),s=function(e){var t={};return function(e,i){if("function"==typeof e)return e();if(void 0===t[e]){var r=function(e,t){return t?t.querySelector(e):document.querySelector(e)}.call(this,e,i);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}}(),c=null,_=0,u=[],l=i(8);function d(e,t){for(var i=0;i<e.length;i++){var r=e[i],n=o[r.id];if(n){n.refs++;for(var a=0;a<n.parts.length;a++)n.parts[a](r.parts[a]);for(;a<r.parts.length;a++)n.parts.push(v(r.parts[a],t))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(v(r.parts[a],t));o[r.id]={id:r.id,refs:1,parts:s}}}}function p(e,t){for(var i=[],r={},n=0;n<e.length;n++){var o=e[n],a=t.base?o[0]+t.base:o[0],s={css:o[1],media:o[2],sourceMap:o[3]};r[a]?r[a].parts.push(s):i.push(r[a]={id:a,parts:[s]})}return i}function f(e,t){var i=s(e.insertInto);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=u[u.length-1];if("top"===e.insertAt)r?r.nextSibling?i.insertBefore(t,r.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),u.push(t);else if("bottom"===e.insertAt)i.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var n=s(e.insertAt.before,i);i.insertBefore(t,n)}}function g(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=u.indexOf(e);t>=0&&u.splice(t,1)}function m(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var r=function(){0;return i.nc}();r&&(e.attrs.nonce=r)}return h(t,e.attrs),f(e,t),t}function h(e,t){Object.keys(t).forEach(function(i){e.setAttribute(i,t[i])})}function v(e,t){var i,r,n,o;if(t.transform&&e.css){if(!(o="function"==typeof t.transform?t.transform(e.css):t.transform.default(e.css)))return function(){};e.css=o}if(t.singleton){var a=_++;i=c||(c=m(t)),r=y.bind(null,i,a,!1),n=y.bind(null,i,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",h(t,e.attrs),f(e,t),t}(t),r=function(e,t,i){var r=i.css,n=i.sourceMap,o=void 0===t.convertToAbsoluteUrls&&n;(t.convertToAbsoluteUrls||o)&&(r=l(r));n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var a=new Blob([r],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,i,t),n=function(){g(i),i.href&&URL.revokeObjectURL(i.href)}):(i=m(t),r=function(e,t){var i=t.css,r=t.media;r&&e.setAttribute("media",r);if(e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}.bind(null,i),n=function(){g(i)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var i=p(e,t);return d(i,t),function(e){for(var r=[],n=0;n<i.length;n++){var a=i[n];(s=o[a.id]).refs--,r.push(s)}e&&d(p(e,t),t);for(n=0;n<r.length;n++){var s;if(0===(s=r[n]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete o[s.id]}}}};var b,w=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function y(e,t,i,r){var n=i?"":r.css;if(e.styleSheet)e.styleSheet.cssText=w(t,n);else{var o=document.createTextNode(n),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var i=t.protocol+"//"+t.host,r=i+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var n,o=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(o)?e:(n=0===o.indexOf("//")?o:0===o.indexOf("/")?i+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(n)+")")})}}]);
+!function(e){var t={};function i(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=3)}([function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"n",function(){return isResponsiveAndLoaded}),__webpack_require__.d(__webpack_exports__,"j",function(){return getPresets}),__webpack_require__.d(__webpack_exports__,"c",function(){return checkOnMedia}),__webpack_require__.d(__webpack_exports__,"b",function(){return checkIfRelativeUrlPath}),__webpack_require__.d(__webpack_exports__,"h",function(){return getImgSrc}),__webpack_require__.d(__webpack_exports__,"l",function(){return getSizeAccordingToPixelRatio}),__webpack_require__.d(__webpack_exports__,"f",function(){return generateUrl}),__webpack_require__.d(__webpack_exports__,"i",function(){return getParentWidth}),__webpack_require__.d(__webpack_exports__,"e",function(){return generateSources}),__webpack_require__.d(__webpack_exports__,"k",function(){return getRatioBySize}),__webpack_require__.d(__webpack_exports__,"d",function(){return filterImages}),__webpack_require__.d(__webpack_exports__,"g",function(){return getImageProps}),__webpack_require__.d(__webpack_exports__,"m",function(){return insertSource}),__webpack_require__.d(__webpack_exports__,"a",function(){return addClass});var _typeof="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},getPresets=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments[1],i=e.split("|"),r={presets:{},order:[]},n=0;n<i.length;n++){var o=i[n]&&i[n].split(":"),a=o[0]&&o[0].trim(),s=o[1]&&o[1].trim();a&&s&&(r.presets[a]=s,r.order.unshift(a))}return r[t]},checkOnMedia=function checkOnMedia(size){try{var object=eval("("+size+")");return object&&"object"===(void 0===object?"undefined":_typeof(object))}catch(e){return!1}},checkIfRelativeUrlPath=function(e){return 0===e.indexOf("//")&&(e=window.location.protocol+e),0!==e.indexOf("http://")&&0!==e.indexOf("https://")&&0!==e.indexOf("//")},getImgSrc=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return t?i+e:e},getSizeAccordingToPixelRatio=function(e){var t=e.toString().split("x"),i=[];return[].forEach.call(t,function(e){i.push(e*Math.round(window.devicePixelRatio||1))}),i.join("x")},generateUrl=function(e,t,i,r,n){return(n.ultraFast?"https://scaleflex.ultrafast.io/":"https://")+n.token+"."+n.container+"/"+e+"/"+t+"/"+i+"/"+r+n.queryString},getParentWidth=function(e,t){if(!(e&&e.parentElement&&e.parentElement.getBoundingClientRect||e&&e.width))return t.width;var i=getParentContainerWithWidth(e),r=parseInt(i,10),n=parseInt(window.getComputedStyle(e).width);return n&&n<r&&n>15||!r?getSizeLimit(n):r?getSizeLimit(r):e.width||t.width},getParentContainerWithWidth=function(e){var t=null,i=0;do{i=(t=t&&t.parentNode||e.parentNode).getBoundingClientRect().width}while(t&&!i);return i},generateSources=function(e,t,i,r,n,o,a){var s=[];if(n){for(var c=[],_=0;_<o.order.length;_++){t[o.order[_]]&&c.unshift(o.order[_])}for(var u=0;u<c.length;u++){var l=!(u<c.length-1),p=l?c[u-1]:c[u],d=t[c[u]];a&&(d=d.split("x").map(function(e){return e/5}).join("x"),i="q10.foil1");var f=generateSrcset(e,d,i,r,o),g="("+(l?"min":"max")+"-width: "+(o.presets[p]+(l?1:0))+"px)";s.push({mediaQuery:g,srcSet:f})}}else a&&(t=t.split("x").map(function(e){return e/5}).join("x"),i="q10.foil1"),s.push({srcSet:generateSrcset(e,t,i,r,o)});return s},generateSrcset=function(e,t,i,r,n){var o=t.toString().split("x")[0],a=t.toString().split("x")[1];return generateImgSrc(e,i,r,o,a,1,n)},getRatioBySize=function(e,t){var i=void 0,r=void 0;if("object"===(void 0===e?"undefined":_typeof(e))){var n=getBreakPoint(t),o=t.order.indexOf(n),a=null;do{a=e[t.order[o]],o--}while(!a&&o>=0);if(!a){var s=t.order.indexOf(n);do{a=e[t.order[s]],s++}while(!a&&s<=t.order.length)}i=a.toString().split("x")[0],r=a.toString().split("x")[1]}else i=e.toString().split("x")[0],r=e.toString().split("x")[1];return i&&r?i/r:null},getBreakPoint=function(e){var t=e.presets,i=e.order,r=window.innerWidth,n=i.findIndex(function(e){return t[e]<r});return i[n-1]||i[n]||i[i.length-1]},generateImgSrc=function(e,t,i,r,n,o,a){var s=Math.trunc(r*o);return n&&(s+="x"+Math.trunc(n*o)),generateUrl(e,getSizeAccordingToPixelRatio(s),t,i,a).replace("http://scaleflex.ultrafast.io/","").replace("https://scaleflex.ultrafast.io/","").replace("//scaleflex.ultrafast.io/","").replace("///","/")},getSizeLimit=function(e){return e<=25?"25":e<=50?"50":e<=100?"100":e<=200?"200":e<=300?"300":e<=400?"400":e<=500?"500":e<=600?"600":e<=700?"700":e<=800?"800":e<=900?"900":e<=1e3?"1000":e<=1100?"1100":e<=1200?"1200":e<=1300?"1300":e<=1400?"1400":e<=1500?"1500":e<=1600?"1600":e<=1700?"1700":e<=1800?"1800":e<=1900?"1900":e<=2400?"2400":e<=2800?"2800":"3600"},filterImages=function(e,t){for(var i=[],r=0;r<e.length;r++){var n=e[r],o=n.getAttribute(t)||"",a="true"===n.getAttribute("data-is-ci-processed");".svg"===o.slice(-4).toLowerCase()||a||i.push(n)}return i},getImageProps=function(e){return{operation:attr(e,"o")||attr(e,"operation")||attr(e,"data-operation")||void 0,size:attr(e,"s")||attr(e,"size")||attr(e,"data-size")||void 0,filters:attr(e,"f")||attr(e,"filters")||attr(e,"data-filters")||void 0,ratio:attr(e,"r")||attr(e,"ratio")||attr(e,"data-ratio")||void 0,src:attr(e,"ci-src")||attr(e,"data-src")||void 0}},attr=function(e,t){return e.getAttribute(t)},isResponsiveAndLoaded=function(e){return!(attr(e,"s")||attr(e,"size")||attr(e,"data-size"))&&e.className.includes("ci-image-loaded")},insertSource=function(e,t){e.parentNode.insertBefore(t,e)},addClass=function(e,t){e.classList.contains(t)||e.classList.add(t)},removeClass=function(e,t){e.classList.contains(t)&&e.classList.remove(t)}},function(module,__webpack_exports__,__webpack_require__){"use strict";var _ci_utils__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),throttle_debounce__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(2),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},_createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,i,r){return i&&e(t.prototype,i),r&&e(t,r),t}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var CIResponsive=function(){function CIResponsive(e){var t=this;_classCallCheck(this,CIResponsive);var i=e.token,r=void 0===i?"":i,n=e.container,o=void 0===n?"cloudimg.io":n,a=e.ultraFast,s=void 0!==a&&a,c=e.lazyLoading,_=void 0!==c&&c,u=e.imgLoadingAnimation,l=void 0===u||u,p=e.lazyLoadOffset,d=void 0===p?100:p,f=e.width,g=void 0===f?"400":f,m=e.height,h=void 0===m?"300":m,v=e.operation,b=void 0===v?"width":v,w=e.filters,y=void 0===w?"n":w,O=e.placeholderBackground,E=void 0===O?"#f4f4f4":O,P=e.baseUrl,S=void 0===P?"/":P,I=e.ratio,x=void 0===I?1.5:I,k=e.presets,M=e.queryString,A=void 0===M?"":M;this.head=document.head||document.getElementsByTagName("head")[0],this.backgroundImgIndex=0,this.forceUpdate=!1,this.config={token:r,container:o,ultraFast:s,lazyLoading:_,imgLoadingAnimation:l,lazyLoadOffset:d,width:g,height:h,operation:b,filters:y,placeholderBackground:E,baseUrl:S,ratio:x,presets:k?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.j)(k,"presets"):{xs:575,sm:767,md:991,lg:1199,xl:3e3},order:k?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.j)(k,"order"):["xl","lg","md","sm","xs"],queryString:A,innerWidth:window.innerWidth},this.updateDimensions=Object(throttle_debounce__WEBPACK_IMPORTED_MODULE_1__.a)(100,function(){t.config.innerWidth;t.process(!0),t.config.innerWidth<window.innerWidth&&(t.config.innerWidth=window.innerWidth)}),window.addEventListener("resize",this.updateDimensions)}return _createClass(CIResponsive,[{key:"init",value:function(){this.process()}},{key:"setForceUpdate",value:function(){this.forceUpdate=value,value&&this.process(!0)}},{key:"process",value:function(e){var t=this,i=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.d)(document.querySelectorAll("img[ci-src]"),"ci-src"),r=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.d)(document.querySelectorAll("[ci-background]"),"ci-background");i.forEach(function(i){t.processImage(i,e)}),r.forEach(function(e){t.processBackgroundImage(e)})}},{key:"processImage",value:function processImage(image,isUpdate){var _this3=this;if(!Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.n)(image)||this.config.innerWidth<window.innerWidth){Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"ci-image"),this.config.lazyLoading&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"lazyload");var parentContainerWidth=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.i)(image,this.config),_getImageProps=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.g)(image),_getImageProps$operat=_getImageProps.operation,operation=void 0===_getImageProps$operat?this.config.operation:_getImageProps$operat,_getImageProps$size=_getImageProps.size,size=void 0===_getImageProps$size?this.config.size||parentContainerWidth:_getImageProps$size,_getImageProps$filter=_getImageProps.filters,filters=void 0===_getImageProps$filter?this.config.filters:_getImageProps$filter,ratio=_getImageProps.ratio,src=_getImageProps.src,isAdaptive=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.c)(size),ratioBySize=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.k)(size,this.config),imageHeight=Math.floor(parentContainerWidth/(ratioBySize||ratio)),isRatio=!(!ratioBySize&&!ratio),wrapper=null;ratio=ratio||this.config.ratio,size=isAdaptive?eval("("+size+")"):size;var isRelativeUrlPath=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.b)(src),imgSrc=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.h)(src,isRelativeUrlPath,this.config.baseUrl),resultSize=isAdaptive?size:Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.l)(size),isPreview=parentContainerWidth>400&&this.config.lazyLoading,cloudimageUrl=isAdaptive?Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)("width",parentContainerWidth,filters,imgSrc,this.config):Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)(operation,resultSize,filters,imgSrc,this.config);if(this.config.imgLoadingAnimation&&this.setAnimation(image,parentContainerWidth),isUpdate){if(wrapper=this.getWrapper(image),wrapper.style.paddingBottom=100/(ratioBySize||ratio)+"%",isAdaptive)return}else wrapper=this.wrap(image,null,isRatio,ratioBySize,ratio,isPreview);if(isRatio&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(image,"ci-image-ratio"),isAdaptive&&!isPreview){this.wrapWithPicture(image);var sources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,filters,imgSrc,isAdaptive,this.config);this.addSources(image,sources),this.setSrc(image,cloudimageUrl),this.config.imgLoadingAnimation&&(image.onload=function(){wrapper.style.background="transparent",_this3.finishAnimation(image)})}else if(isAdaptive&&isPreview&&isRatio){this.wrapWithPicture(image);var previewImg=null,container=image.parentNode.parentNode,isPreviewImg=container.className.indexOf("ci-with-preview-image")>-1;if(isPreviewImg)previewImg=container.querySelector("img.ci-image-preview");else{var pictureElem=container.querySelector("picture");previewImg=document.createElement("img"),previewImg.className=(isRatio?"ci-image-ratio ":"")+"ci-image-preview lazyload",container.classList.add("ci-with-preview-image"),container.insertBefore(previewImg,pictureElem)}this.wrapWithPicture(previewImg),this.setAnimation(previewImg,parentContainerWidth);var config=_extends({},this.config,{queryString:""}),url=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)("width",parentContainerWidth/5,"q5.foil1",imgSrc,config),_sources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,filters,imgSrc,isAdaptive,this.config),previewSources=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.e)(operation,resultSize,"q5.foil1",imgSrc,isAdaptive,config,!0);this.addSources(previewImg,previewSources),this.addSources(image,_sources),this.setSrc(previewImg,url),this.setSrc(image,cloudimageUrl),image.onload=function(){wrapper.style.background="transparent",previewImg.style.display="none",_this3.finishAnimation(image)}}else if(isPreview&&isRatio){var _container=image.parentNode,_isPreviewImg=_container.className.indexOf("ci-with-preview-image")>-1,_config=_extends({},this.config,{queryString:""}),_size=resultSize.split("x").map(function(e){return e/5}).join("x"),_url=Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.f)(operation,_size,"q5.foil1",imgSrc,_config),_previewImg=null;_isPreviewImg?_previewImg=_container.querySelector("img.ci-image-preview"):(_previewImg=document.createElement("img"),_previewImg.className=(isRatio?"ci-image-ratio ":"")+" ci-image-preview lazyload",_container.classList.add("ci-with-preview-image"),image.parentNode.insertBefore(_previewImg,image)),this.setAnimation(_previewImg,parentContainerWidth),this.setSrc(_previewImg,_url,"data-src"),this.setSrc(image,cloudimageUrl,"data-src"),image.onload=function(){wrapper.style.background="transparent",_previewImg.style.display="none",_this3.finishAnimation(image)}}else image.onload=function(){wrapper.style.background="transparent",_this3.finishAnimation(image)},this.setSrc(image,cloudimageUrl)}}},{key:"getWrapper",value:function(e){return(e.parentNode.className||"").indexOf("ci-image-wrapper")>-1?e.parentNode:(e.parentNode.parentNode.className||"").indexOf("ci-image-wrapper")>-1?e.parentNode.parentNode:void 0}},{key:"setSrc",value:function(e,t,i){var r=this.config,n=r.lazyLoading,o=r.dataSrcAttr;e.setAttribute(i||(n?"data-src":o||"src"),t)}},{key:"setSrcset",value:function(e,t){var i=this.config,r=i.lazyLoading,n=i.dataSrcsetAttr;e.setAttribute(r?"data-srcset":n||"srcset",t)}},{key:"setAnimation",value:function(e,t){e.style.filter="blur("+Math.floor(t/100)+"px)",e.style.transform="scale3d(1.1, 1.1, 1)",setTimeout(function(){e.style.transition="all 0.3s ease-in-out"})}},{key:"finishAnimation",value:function(e){e.style.filter="blur(0px)",e.style.transform="translateZ(0) scale3d(1, 1, 1)",Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(e,"ci-image-loaded")}},{key:"wrap",value:function(e,t,i,r,n){return(e.parentNode.className||"").indexOf("ci-image-wrapper")>-1||(e.parentNode.parentNode.className||"").indexOf("ci-image-wrapper")>-1?(t=e.parentNode,Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper"),t.style.background=this.config.placeholderBackground,void(i&&Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper-ratio"))):(t=t||document.createElement("div"),Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper"),t.style.background=this.config.placeholderBackground,i&&(Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.a)(t,"ci-image-wrapper-ratio"),t.style.paddingBottom=100/(r||n)+"%"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e),t)}},{key:"wrapWithPicture",value:function(e,t){"picture"!==(e.parentNode.nodeName||"").toLowerCase()&&(t=t||document.createElement("picture"),e.nextSibling?e.parentNode.insertBefore(t,e.nextSibling):e.parentNode.appendChild(t),t.appendChild(e))}},{key:"addSources",value:function(e,t){var i=this;t.forEach(function(t,r){var n=document.createElement("source");n.media=t.mediaQuery,i.setSrcset(n,t.srcSet),Object(_ci_utils__WEBPACK_IMPORTED_MODULE_0__.m)(e,n)})}},{key:"updateSources",value:function(e,t,i){var r=this;e.parentNode.querySelectorAll("source").forEach(function(e,t){r.config.lazyLoading&&r.setSrcset(e,i[t].srcSet),e.srcset=i[t].srcSet})}},{key:"processBackgroundImage",value:function(){}}]),CIResponsive}();__webpack_exports__.a=CIResponsive},function(e,t,i){"use strict";function r(e,t,i,r){var n,o=0;return"boolean"!=typeof t&&(r=i,i=t,t=void 0),function(){var a=this,s=Number(new Date)-o,c=arguments;function _(){o=Number(new Date),i.apply(a,c)}r&&!n&&_(),n&&clearTimeout(n),void 0===r&&s>e?_():!0!==t&&(n=setTimeout(r?function(){n=void 0}:_,void 0===r?e-s:e))}}function n(e,t,i){return void 0===i?r(e,t,!1):r(e,i,!1!==t)}i.d(t,"a",function(){return n})},function(e,t,i){"use strict";i.r(t);var r=i(1);i(4);window.CIResponsive=r.a},function(e,t,i){var r=i(5);"string"==typeof r&&(r=[[e.i,r,""]]);var n={hmr:!0,transform:void 0,insertInto:void 0};i(7)(r,n);r.locals&&(e.exports=r.locals)},function(e,t,i){(e.exports=i(6)(!1)).push([e.i,"div.ci-image-wrapper {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\ndiv.ci-image-wrapper-ratio {\n\n}\n\nimg.ci-image {\n  opacity: 1;\n  display: block;\n  width: 100%;\n}\n\nimg.ci-image-ratio {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n\n/*img.ci-image-animation {*/\n  /*transition: all 0.3s ease-in-out;*/\n/*}*/\n\n/*img.ci-image-animation:not(.ci-image-loaded) {*/\n  /*transform: scale3d(1.1, 1.1, 1);*/\n/*}*/\n\n/*img.ci-image-animation.ci-image-loaded {*/\n  /*opacity: 1;*/\n  /*transform: translateZ(0) scale3d(1, 1, 1);*/\n/*}*/",""])},function(e,t,i){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=function(e,t){var i=e[1]||"",r=e[3];if(!r)return i;if(t&&"function"==typeof btoa){var n=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),o=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[i].concat(o).concat([n]).join("\n")}var a;return[i].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},n=0;n<this.length;n++){var o=this[n][0];null!=o&&(r[o]=!0)}for(n=0;n<e.length;n++){var a=e[n];null!=a[0]&&r[a[0]]||(i&&!a[2]?a[2]=i:i&&(a[2]="("+a[2]+") and ("+i+")"),t.push(a))}},t}},function(e,t,i){var r,n,o={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===n&&(n=r.apply(this,arguments)),n}),s=function(e){var t={};return function(e,i){if("function"==typeof e)return e();if(void 0===t[e]){var r=function(e,t){return t?t.querySelector(e):document.querySelector(e)}.call(this,e,i);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}}(),c=null,_=0,u=[],l=i(8);function p(e,t){for(var i=0;i<e.length;i++){var r=e[i],n=o[r.id];if(n){n.refs++;for(var a=0;a<n.parts.length;a++)n.parts[a](r.parts[a]);for(;a<r.parts.length;a++)n.parts.push(v(r.parts[a],t))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(v(r.parts[a],t));o[r.id]={id:r.id,refs:1,parts:s}}}}function d(e,t){for(var i=[],r={},n=0;n<e.length;n++){var o=e[n],a=t.base?o[0]+t.base:o[0],s={css:o[1],media:o[2],sourceMap:o[3]};r[a]?r[a].parts.push(s):i.push(r[a]={id:a,parts:[s]})}return i}function f(e,t){var i=s(e.insertInto);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=u[u.length-1];if("top"===e.insertAt)r?r.nextSibling?i.insertBefore(t,r.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),u.push(t);else if("bottom"===e.insertAt)i.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var n=s(e.insertAt.before,i);i.insertBefore(t,n)}}function g(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=u.indexOf(e);t>=0&&u.splice(t,1)}function m(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var r=function(){0;return i.nc}();r&&(e.attrs.nonce=r)}return h(t,e.attrs),f(e,t),t}function h(e,t){Object.keys(t).forEach(function(i){e.setAttribute(i,t[i])})}function v(e,t){var i,r,n,o;if(t.transform&&e.css){if(!(o="function"==typeof t.transform?t.transform(e.css):t.transform.default(e.css)))return function(){};e.css=o}if(t.singleton){var a=_++;i=c||(c=m(t)),r=y.bind(null,i,a,!1),n=y.bind(null,i,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",h(t,e.attrs),f(e,t),t}(t),r=function(e,t,i){var r=i.css,n=i.sourceMap,o=void 0===t.convertToAbsoluteUrls&&n;(t.convertToAbsoluteUrls||o)&&(r=l(r));n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var a=new Blob([r],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,i,t),n=function(){g(i),i.href&&URL.revokeObjectURL(i.href)}):(i=m(t),r=function(e,t){var i=t.css,r=t.media;r&&e.setAttribute("media",r);if(e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}.bind(null,i),n=function(){g(i)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var i=d(e,t);return p(i,t),function(e){for(var r=[],n=0;n<i.length;n++){var a=i[n];(s=o[a.id]).refs--,r.push(s)}e&&p(d(e,t),t);for(n=0;n<r.length;n++){var s;if(0===(s=r[n]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete o[s.id]}}}};var b,w=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function y(e,t,i,r){var n=i?"":r.css;if(e.styleSheet)e.styleSheet.cssText=w(t,n);else{var o=document.createTextNode(n),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var i=t.protocol+"//"+t.host,r=i+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var n,o=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(o)?e:(n=0===o.indexOf("//")?o:0===o.indexOf("/")?i+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(n)+")")})}}]);

dist/ci.service.js

@@ -0,1 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -5,7 +11,8 @@
 
+var _ci = require('./ci.utils');
+
+var _throttleDebounce = require('throttle-debounce');
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import { getPresets, filterImages, getImageProps, getParentWidth, checkOnMedia, checkIfRelativeUrlPath, getImgSrc, getSizeAccordingToPixelRatio, generateUrl, generateSources, insertSource, addClass, getRatioBySize, isResponsiveAndLoaded } from './ci.utils';
-import { debounce } from 'throttle-debounce';
-
 var CIResponsive = function () {
@@ -65,3 +72,3 @@ function CIResponsive(config) {
       ratio: ratio,
-      presets: presets ? getPresets(presets, 'presets') : {
+      presets: presets ? (0, _ci.getPresets)(presets, 'presets') : {
         xs: 575, // up to 576    PHONE
@@ -73,3 +80,3 @@ sm: 767, // 577 - 768    PHABLET
       },
-      order: presets ? getPresets(presets, 'order') : ['xl', 'lg', 'md', 'sm', 'xs'],
+      order: presets ? (0, _ci.getPresets)(presets, 'order') : ['xl', 'lg', 'md', 'sm', 'xs'],
       queryString: queryString,
@@ -80,3 +87,3 @@ innerWidth: window.innerWidth
 
-    this.updateDimensions = debounce(100, function () {
+    this.updateDimensions = (0, _throttleDebounce.debounce)(100, function () {
       var innerWidth = _this.config.innerWidth;
@@ -110,4 +117,4 @@
 
-      var images = filterImages(document.querySelectorAll('img[ci-src]'), 'ci-src');
-      var backgroundImages = filterImages(document.querySelectorAll('[ci-background]'), 'ci-background');
+      var images = (0, _ci.filterImages)(document.querySelectorAll('img[ci-src]'), 'ci-src');
+      var backgroundImages = (0, _ci.filterImages)(document.querySelectorAll('[ci-background]'), 'ci-background');
 
@@ -126,10 +133,10 @@ images.forEach(function (image) {
 
-      if (isResponsiveAndLoaded(image) && !(this.config.innerWidth < window.innerWidth)) return;
-      addClass(image, 'ci-image');
+      if ((0, _ci.isResponsiveAndLoaded)(image) && !(this.config.innerWidth < window.innerWidth)) return;
+      (0, _ci.addClass)(image, 'ci-image');
 
-      if (this.config.lazyLoading) addClass(image, 'lazyload');
+      if (this.config.lazyLoading) (0, _ci.addClass)(image, 'lazyload');
 
-      var parentContainerWidth = getParentWidth(image, this.config);
+      var parentContainerWidth = (0, _ci.getParentWidth)(image, this.config);
 
-      var _getImageProps = getImageProps(image),
+      var _getImageProps = (0, _ci.getImageProps)(image),
           _getImageProps$operat = _getImageProps.operation,
@@ -141,19 +148,20 @@ operation = _getImageProps$operat === undefined ? this.config.operation : _getImageProps$operat,
           filters = _getImageProps$filter === undefined ? this.config.filters : _getImageProps$filter,
-          _getImageProps$ratio = _getImageProps.ratio,
-          ratio = _getImageProps$ratio === undefined ? this.config.ratio : _getImageProps$ratio,
+          ratio = _getImageProps.ratio,
           src = _getImageProps.src;
 
-      var isAdaptive = checkOnMedia(size);
+      var isAdaptive = (0, _ci.checkOnMedia)(size);
+      var ratioBySize = (0, _ci.getRatioBySize)(size, this.config);
+      var imageHeight = Math.floor(parentContainerWidth / (ratioBySize || ratio));
+      var isRatio = !!(ratioBySize || ratio);
+      var wrapper = null;
 
+      ratio = ratio || this.config.ratio;
       size = isAdaptive ? eval('(' + size + ')') : size;
 
-      var isRelativeUrlPath = checkIfRelativeUrlPath(src);
-      var imgSrc = getImgSrc(src, isRelativeUrlPath, this.config.baseUrl);
-      var resultSize = isAdaptive ? size : getSizeAccordingToPixelRatio(size);
+      var isRelativeUrlPath = (0, _ci.checkIfRelativeUrlPath)(src);
+      var imgSrc = (0, _ci.getImgSrc)(src, isRelativeUrlPath, this.config.baseUrl);
+      var resultSize = isAdaptive ? size : (0, _ci.getSizeAccordingToPixelRatio)(size);
       //const isPreview = !this.config.isChrome && (parentContainerWidth > 400) && this.config.lazyLoading;
       var isPreview = parentContainerWidth > 400 && this.config.lazyLoading;
-      var cloudimageUrl = isAdaptive ? generateUrl('width', parentContainerWidth, filters, imgSrc, this.config) : generateUrl(operation, resultSize, filters, imgSrc, this.config);
-      var ratioBySize = getRatioBySize(size, this.config);
-      var imageHeight = Math.floor(parentContainerWidth / (ratioBySize || ratio));
-      var isRatio = !!(ratioBySize || ratio);
+      var cloudimageUrl = isAdaptive ? (0, _ci.generateUrl)('width', parentContainerWidth, filters, imgSrc, this.config) : (0, _ci.generateUrl)(operation, resultSize, filters, imgSrc, this.config);
 
@@ -165,7 +173,9 @@ if (this.config.imgLoadingAnimation) {
       if (!isUpdate) {
-        this.wrap(image, null, isRatio, ratioBySize, ratio, isPreview);
+        wrapper = this.wrap(image, null, isRatio, ratioBySize, ratio, isPreview);
       } else {
-        var wrapper = this.getWrapper(image);
+        wrapper = this.getWrapper(image);
 
-        wrapper.style.paddingBottom = 100 / (ratioBySize || ratio) + '%';
+        if (isRatio) {
+          wrapper.style.paddingBottom = 100 / (ratioBySize || ratio) + '%';
+        }
 
@@ -176,3 +186,3 @@ if (isAdaptive) return;
       if (isRatio) {
-        addClass(image, 'ci-image-ratio');
+        (0, _ci.addClass)(image, 'ci-image-ratio');
       }
@@ -183,13 +193,14 @@
 
-        var sources = generateSources(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
+        var sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
 
         this.addSources(image, sources);
         this.setSrc(image, cloudimageUrl);
-        //image.setAttribute('src', cloudimageUrl);
+
         if (this.config.imgLoadingAnimation) {
           image.onload = function () {
+            wrapper.style.background = 'transparent';
             _this3.finishAnimation(image);
           };
         }
-      } else if (isAdaptive && isPreview) {
+      } else if (isAdaptive && isPreview && isRatio) {
         this.wrapWithPicture(image);
@@ -207,3 +218,3 @@
           previewImg = document.createElement('img');
-          previewImg.className = 'ci-image-ratio ci-image-preview lazyload';
+          previewImg.className = (isRatio ? 'ci-image-ratio ' : '') + 'ci-image-preview lazyload';
           container.classList.add("ci-with-preview-image");
@@ -218,6 +229,5 @@ container.insertBefore(previewImg, pictureElem);
         var config = _extends({}, this.config, { queryString: '' });
-        var url = generateUrl('width', parentContainerWidth / 5, 'q5.foil1', imgSrc, config);
-        // create sources as elements not a string
-        var _sources = generateSources(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
-        var previewSources = generateSources(operation, resultSize, 'q5.foil1', imgSrc, isAdaptive, config, true);
+        var url = (0, _ci.generateUrl)('width', parentContainerWidth / 5, 'q5.foil1', imgSrc, config);
+        var _sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
+        var previewSources = (0, _ci.generateSources)(operation, resultSize, 'q5.foil1', imgSrc, isAdaptive, config, true);
 
@@ -231,5 +241,7 @@ this.addSources(previewImg, previewSources);
         image.onload = function () {
+          wrapper.style.background = 'transparent';
+          previewImg.style.display = 'none';
           _this3.finishAnimation(image);
         };
-      } else if (isPreview) {
+      } else if (isPreview && isRatio) {
         var _container = image.parentNode;
@@ -241,3 +253,3 @@ var _isPreviewImg = _container.className.indexOf('ci-with-preview-image') > -1;
         }).join('x');
-        var _url = generateUrl(operation, _size, 'q5.foil1', imgSrc, _config);
+        var _url = (0, _ci.generateUrl)(operation, _size, 'q5.foil1', imgSrc, _config);
         var _previewImg = null;
@@ -249,3 +261,3 @@
           _previewImg = document.createElement('img');
-          _previewImg.className = 'ci-image-ratio ci-image-preview lazyload';
+          _previewImg.className = (isRatio ? 'ci-image-ratio ' : '') + ' ci-image-preview lazyload';
           _container.classList.add("ci-with-preview-image");
@@ -261,2 +273,4 @@ image.parentNode.insertBefore(_previewImg, image);
         image.onload = function () {
+          wrapper.style.background = 'transparent';
+          _previewImg.style.display = 'none';
           _this3.finishAnimation(image);
@@ -266,6 +280,6 @@ };
         image.onload = function () {
+          wrapper.style.background = 'transparent';
           _this3.finishAnimation(image);
         };
         this.setSrc(image, cloudimageUrl);
-        //image.setAttribute('src', cloudimageUrl);
       }
@@ -317,3 +331,3 @@ }
       image.style.transform = 'translateZ(0) scale3d(1, 1, 1)';
-      addClass(image, 'ci-image-loaded');
+      (0, _ci.addClass)(image, 'ci-image-loaded');
     }
@@ -326,8 +340,7 @@ }, {
 
-        addClass(wrapper, 'ci-image-wrapper');
+        (0, _ci.addClass)(wrapper, 'ci-image-wrapper');
         wrapper.style.background = this.config.placeholderBackground;
 
         if (isRatio) {
-          addClass(wrapper, 'ci-image-wrapper-ratio');
-          //wrapper.style.paddingBottom = (100 / (ratioBySize || ratio)) + '%';
+          (0, _ci.addClass)(wrapper, 'ci-image-wrapper-ratio');
         }
@@ -340,7 +353,7 @@
 
-      addClass(wrapper, 'ci-image-wrapper');
+      (0, _ci.addClass)(wrapper, 'ci-image-wrapper');
       wrapper.style.background = this.config.placeholderBackground;
 
       if (isRatio) {
-        addClass(wrapper, 'ci-image-wrapper-ratio');
+        (0, _ci.addClass)(wrapper, 'ci-image-wrapper-ratio');
         wrapper.style.paddingBottom = 100 / (ratioBySize || ratio) + '%';
@@ -356,2 +369,4 @@ }
       wrapper.appendChild(image);
+
+      return wrapper;
     }
@@ -378,3 +393,3 @@ }, {
 
-      previewSources.forEach(function (previewSources, index) {
+      previewSources.forEach(function (previewSources) {
         var source = document.createElement('source');
@@ -384,5 +399,4 @@
         _this4.setSrcset(source, previewSources.srcSet);
-        //source.srcset = previewSources.srcSet;
 
-        insertSource(image, source);
+        (0, _ci.insertSource)(image, source);
       });
@@ -405,3 +419,5 @@ }
     key: 'processBackgroundImage',
-    value: function processBackgroundImage() {}
+    value: function processBackgroundImage() {
+      // in progress
+    }
   }]);
@@ -412,2 +428,2 @@
 
-export default CIResponsive;
+exports.default = CIResponsive;

dist/ci.utils.js

@@ -0,1 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
@@ -244,4 +250,4 @@
 
-export var isResponsiveAndLoaded = function isResponsiveAndLoaded(image) {
-  return !(attr(image, 's') || attr(image, 'size') || attr(image, 'data-size')) && image.className.includes('ci-image-loaded');
+var isResponsiveAndLoaded = exports.isResponsiveAndLoaded = function isResponsiveAndLoaded(image) {
+  return !(attr(image, 's') || attr(image, 'size') || attr(image, 'data-size')) && image.className.indexOf('ci-image-loaded') !== -1;
 };
@@ -280,2 +286,16 @@
 
-export { getPresets, checkOnMedia, checkIfRelativeUrlPath, getImgSrc, getSizeAccordingToPixelRatio, generateUrl, getParentWidth, generateSources, getRatioBySize, getBreakPoint, filterImages, getImageProps, insertSource, addClass, removeClass };
+exports.getPresets = getPresets;
+exports.checkOnMedia = checkOnMedia;
+exports.checkIfRelativeUrlPath = checkIfRelativeUrlPath;
+exports.getImgSrc = getImgSrc;
+exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;
+exports.generateUrl = generateUrl;
+exports.getParentWidth = getParentWidth;
+exports.generateSources = generateSources;
+exports.getRatioBySize = getRatioBySize;
+exports.getBreakPoint = getBreakPoint;
+exports.filterImages = filterImages;
+exports.getImageProps = getImageProps;
+exports.insertSource = insertSource;
+exports.addClass = addClass;
+exports.removeClass = removeClass;

dist/index.js

@@ -1,4 +0,11 @@
-import CIResponsive from './ci.service';
-import './ci.styles.css';
+'use strict';
 
-window.CIResponsive = CIResponsive;
+var _ci = require('./ci.service');
+
+var _ci2 = _interopRequireDefault(_ci);
+
+require('./ci.styles.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+window.CIResponsive = _ci2.default;

package.json

 {
   "name": "js-cloudimg-responsive",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported.",
@@ -8,2 +8,3 @@ "main": "dist/index.js",
     "build": "webpack --mode production --config webpack-build.config.js",
+    "build-lazysizes": "webpack --mode production --config webpack-lazysizes-build.config.js",
     "transpile": "babel src -d dist --copy-files",
@@ -20,2 +21,3 @@ "prepublishOnly": "npm run transpile",
     "babel-loader": "^7.1.4",
+    "babel-plugin-array-includes": "^2.0.3",
     "babel-preset-env": "^1.7.0",
@@ -22,0 +24,0 @@ "babel-preset-es2015": "^6.24.1",

README.md

@@ -13,7 +13,20 @@ ![](https://demo.cloudimg.io/width/800/none/sample.li/Cloudimage_diagram.jpeg)
 
-## Demo
+## Table of contents
 
+* [Demo](#demo)
+* [Installation](#installation)
+* [Simple Usage](#quick_start)
+* [Requirements](#requirements)
+* [Configuration](#configuration)
+* [Image properties](#image_properties)
+* [Lazy Loading](#lazy_loading)
+* [Browser support](#browser_support)
+* [Contributing](#contributing)
+
+
+## <a name="demo"></a> Demo
+
 To see the Cloudimage Responsive plugin in action, please check out the [Demo page](https://scaleflex.github.io/js-cloudimage-responsive/). Play with your browser's viewport size and observe your Inspector's Network tab to see how Cloudimage delivers the optimal image size to your browser, hence accelerating the overall page loading time.
 
-## Installation
+## <a name="installation"></a> Installation
 
@@ -23,3 +36,3 @@ Add script tag with link to js-cloudimage-responsive
 ```
-<script src="https://scaleflex.airstore.io/filerobot/plugins/js-cloudimage-responsive.v0.0.4.min.js"></script>
+<script src="https://scaleflex.airstore.io/filerobot/plugins/js-cloudimage-responsive.v0.0.5.min.js"></script>
 ```
@@ -33,12 +46,12 @@
 
-## Simple Usage
+## <a name="quick_start"></a> Simple Usage
 
 ```
 <script>
-const ciResponsive = new window.CIResponsive({
-  token: 'demo',
-  baseUrl: 'https://cloudimage.public.airstore.io/demo/'
-});
+    const ciResponsive = new window.CIResponsive({
+      token: 'demo',
+      baseUrl: 'https://cloudimage.public.airstore.io/demo/'
+    });
 
-ciResponsive.init();
+    ciResponsive.init();
 </script>
@@ -69,7 +82,7 @@ ```
 
-## Requirements
+## <a name="requirements"/> Requirements
 
 To use the Cloudimage Responsive plugin, you will need a Cloudimage token. Don't worry, it only takes seconds to get one by registering [here](https://www.cloudimage.io/en/register_page). Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.
 
-## Config
+## <a name="configuration"></a> Config
 
@@ -122,3 +135,3 @@ ### token
 
-## Image properties
+## <a name="image_properties"></a> Image properties
 
@@ -195,5 +208,50 @@ ### src
 
+## <a name="lazy_loading"></a> Lazy Loading
 
+Lazy loading is not included into js-cloudimage-responsive by default. There are a few great libraries to do it.
+
+The example below uses [lazysizes](https://github.com/aFarkas/lazysizes) library using Intersection Observer API.
+
+add the following scripts right after js-cloudimage-responsive script
+
+```
+<script src="https://scaleflex.airstore.io/filerobot/plugins/js-cloudimage-responsive.v0.0.5.min.js"></script>
+<script>
+  window.lazySizesConfig = window.lazySizesConfig || {};
+  window.lazySizesConfig.init = false;
+</script>
+<script src="https://scaleflex.airstore.io/filerobot/plugins/lazysizes-intersection.min.js"></script>
+```
+
+the initialization script
+
+```
+<script>
+    const ciResponsive = new window.CIResponsive({
+      token: 'demo',
+      baseUrl: 'https://cloudimage.public.airstore.io/demo/',
+      filters: 'q35.foil1',
+      lazyLoadOffset: 100,
+      lazyLoading: true
+    });
+
+
+    ciResponsive.init();
+
+    window.lazySizes.init();
+</script>
+ ```
+
+## <a name="browser_support"></a> Browser support
+
+Tested in all modern browsers and IE 11.
+
+NOTE: If you use lazy loading with IntersectionObserver, you must manually add the [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for cross-browser support.
+
+## <a name="contributing"></a> Contributing!
+
+All contributions are super welcome!
+
 ***
 
 To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)

webpack-build.config.js

@@ -7,3 +7,3 @@ const path = require('path');
     path: path.join(__dirname, "build"),
-    filename: "js-cloudimage-responsive.v0.0.4.min.js"
+    filename: "js-cloudimage-responsive.v0.0.5.min.js"
   },
@@ -27,3 +27,2 @@ module: {
   }
-  //devtool: 'source-map'
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154346

increased by157.5%

Number of package files

15

increased by50%

Lines of code

1126

increased by75.66%

Number of lines in readme file

252

increased by29.9%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes