@pedropmatt/easy-image-optimization/lib/optImage.js

An image optimizer using semantic html and shadow dom

(()=>{"use strict";var e={432:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const o=n(r(384)),i=n(r(544));class a extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){const e=this.getAttribute("image-url"),t=this.getAttribute("resolutions");if(!e)throw new Error("Image url cannot be undefined or null.");const r=document.createElement("picture"),n=new o.default,s=t?(0,i.default)(t):[320,480,800];let u=0;for(const t of s)this._generateResizedImage({url:e,width:t}).then((e=>{a._renderPicture(e,r,t),u===s.length-1&&r.appendChild(e),u++}));const d=n.addStyle("img { width: 100%; height: 100%; object-fit: contain; }");this.shadowRoot.adoptedStyleSheets=[d],this.shadowRoot.appendChild(r)}_generateResizedImage({url:e,width:t}){return new Promise(((r,n)=>{const o=new Image;o.crossOrigin="anonymous",o.onload=()=>{const e=document.createElement("canvas"),i=e.getContext("2d");if(!i)return void n(new Error("Canvas 2D context is not supported."));const a=o.height/o.width,s=Math.round(t*a);e.width=t,e.height=s;try{i.drawImage(o,0,0,t,s);const n=document.createElement("img");n.src=e.toDataURL("image/webp"),n.alt=`${t}x${s}`,r(n)}catch(e){n(new Error("Error drawing image on canvas."))}},o.onerror=()=>{n(new Error("Error loading image."))},o.onabort=()=>{n(new Error("Image loading aborted."))},o.src=`${e}?width=${t}`}))}static _renderPicture(e,t,r){const n=document.createElement("source");n.setAttribute("srcset",e.src),n.setAttribute("media",`(max-width: ${r}px)`),t.appendChild(n)}}customElements.define("opt-image",a)},384:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=class{addStyle(e){const t=new CSSStyleSheet;return t.replaceSync(e),t}}},544:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const o=n(r(240));t.default=function(e){if("string"==typeof e){const t=e.split(",").map((e=>e.trim())),r=t.map(Number).filter(o.default);if(r.length!==t.length)throw new Error("Resolutions has invalid values.");return r}if(!e.length)throw new Error("Resolutions cannot be empty, try provide your custom resolutions like this: '100,200,300'");return e.map((e=>{const t="number"==typeof e?e:Number(e);if(!(0,o.default)(t))throw new Error("Resolutions has invalid values.");return t}))}},240:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return"number"==typeof e&&!isNaN(e)&&isFinite(e)&&0!==e&&e>0}}},t={};!function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n].call(i.exports,i,i.exports,r),i.exports}(432)})();