@lipp/img-min - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.min.js

@@ -50,2 +50,2 @@ const html=String.raw,getImgScaleUrl=({url:t,width:e,quality:i,format:s})=>`https://img-scale.now.sh?format=${s}&width=${e}&quality=${i}&url=${encodeURIComponent(t)}`,getUrl=({format:t,url:e,width:i,quality:s,isPreview:r})=>(r&&(i/=7),i=Math.floor(i),`${getImgScaleUrl({url:e,width:i=i>50?i-i%30:i-i%5,quality:s,format:t})} 1x,${getImgScaleUrl({url:e,width:Math.floor(1.3*i),quality:Math.min(1.1*s,100),format:t})} 2x, ${getImgScaleUrl({url:e,width:Math.floor(1.5*i),quality:Math.min(1.3*s,100),format:t})} 3x`);let active,invisibles=[];const onScroll=()=>{!active&&invisibles.length>0&&(active=!0,setTimeout(()=>{invisibles.forEach(t=>t.checkVisibility()),invisibles=invisibles.filter(t=>!t.visible),active=!1},200))},template=html`
   </style>
-`;let postponed=[];const pendingPreviews={};let isOnScrollInit;customElements.define("img-min",class extends HTMLElement{constructor(){super(),isOnScrollInit||(isOnScrollInit=!0,document.addEventListener("scroll",onScroll)),invisibles.push(this),this.maxWidth=0;const t=this.attachShadow({mode:"open"});t.innerHTML=template,this.picture=t.querySelector("picture"),this.img=this.shadowRoot.querySelector("img");const e=()=>{this.removeAttribute("preview"),this.setAttribute("loaded",""),this.img.onload=null};this.img.onload=(()=>{this.isPreview=!1,delete pendingPreviews[this.src],this.setAttribute("preview",""),postponed.push(()=>this.resize()),0===Object.keys(pendingPreviews).length&&(postponed.reverse().forEach(t=>t()),postponed=[]),this.img.onload=e}),this.resize=this.resize.bind(this),addEventListener("resize",this.resize)}static get observedAttributes(){return["src","quality"]}get src(){return this.getAttribute("src")}get quality(){return this.getAttribute("quality")||50}set quality(t){this.setAttribute("quality",t),this.updateSrcset()}set src(t){this.setAttribute("src",t),this.updateSrcset()}attributeChangedCallback(t,e,i){e!==i&&(this[t]=i)}getSrcset(t){return console.log(this.quality),getUrl({url:this.src,format:t,width:this.width,height:this.height,quality:this.quality,isPreview:this.isPreview})}updateSrcset(){this.visible&&(this.jpeg=this.jpeg||this.shadowRoot.querySelector('source[type="image/jpeg"]'),this.jpeg.srcset=this.getSrcset("jpeg"),this.webp=this.webp||this.shadowRoot.querySelector('source[type="image/webp"]'),this.webp.srcset=this.getSrcset("webp"))}get width(){return this._width}set width(t){this._width=t,this.updateSrcset()}disconnectedCallback(){removeEventListener("resize",this.resize)}loadPreview(t){this.isPreview=!0,pendingPreviews[this.src]=!0,this.width=t}checkVisibility(){const t=parseInt(this.getAttribute("lazy-dist"))||100,{top:e,bottom:i,width:s,height:r}=this.img.getBoundingClientRect(),h=i<-t,o=e>window.innerHeight+t;h||o||this.visible||(this.visible=!0,this.height=r,this.loadPreview(s))}resize(){this.visible&&(cancelAnimationFrame(this.af),this.af=requestAnimationFrame(()=>{const{width:t,height:e}=this.img.getBoundingClientRect();t>this.maxWidth&&(this.maxWidth=t,this.height=e,this.width=t)}))}connectedCallback(){const{width:t,height:e}=this.img.getBoundingClientRect();this.img.style.setProperty("--preview-blur",`${Math.floor(t/20)}px`),0===e&&(console.warn("img-min: element has height=0 and will never be visible",this),console.warn("img-min: it is recommend to use --aspect-ratio to all images"));const i=this.getAttribute("a2spect");i&&(this.img.style.height="100%",this.img.style.objectFit="cover",this.picture.style.paddingTop=getPaddingTop(i)),setTimeout(()=>{this.checkVisibility()},100)}});
+`;let postponed=[];const pendingPreviews={};let isOnScrollInit;customElements.define("img-min",class extends HTMLElement{constructor(){super(),isOnScrollInit||(isOnScrollInit=!0,document.addEventListener("scroll",onScroll)),invisibles.push(this),this.maxWidth=0;const t=this.attachShadow({mode:"open"});t.innerHTML=template,this.picture=t.querySelector("picture"),this.img=this.shadowRoot.querySelector("img");const e=()=>{this.removeAttribute("preview"),this.setAttribute("loaded",""),this.img.onload=null};this.img.onload=(()=>{this.isPreview=!1,delete pendingPreviews[this.src],this.setAttribute("preview",""),postponed.push(()=>this.resize()),0===Object.keys(pendingPreviews).length&&(postponed.reverse().forEach(t=>t()),postponed=[]),this.img.onload=e}),this.resize=this.resize.bind(this),addEventListener("resize",this.resize)}static get observedAttributes(){return["src","quality"]}get src(){return this.getAttribute("src")}get quality(){return this.getAttribute("quality")||50}set quality(t){this.setAttribute("quality",t),this.updateSrcset()}set src(t){this.setAttribute("src",t),this.updateSrcset()}attributeChangedCallback(t,e,i){e!==i&&(this[t]=i)}getSrcset(t){return console.log(this.quality),getUrl({url:this.src,format:t,width:this.width,height:this.height,quality:this.quality,isPreview:this.isPreview})}updateSrcset(){this.visible&&(this.jpeg=this.jpeg||this.shadowRoot.querySelector('source[type="image/jpeg"]'),this.jpeg.srcset=this.getSrcset("jpeg"),this.webp=this.webp||this.shadowRoot.querySelector('source[type="image/webp"]'),this.webp.srcset=this.getSrcset("webp"))}get width(){return this._width}set width(t){this._width=t,this.updateSrcset()}disconnectedCallback(){removeEventListener("resize",this.resize)}loadPreview(t){this.isPreview=!0,pendingPreviews[this.src]=!0,this.width=t}checkVisibility(){const t=parseInt(this.getAttribute("lazy-dist"))||100,{top:e,bottom:i,width:s,height:r}=this.img.getBoundingClientRect(),h=i<-t,o=e>window.innerHeight+t;console.log(e,i,s,r,h,o,this.visible),h||o||this.visible||(this.visible=!0,this.height=r,this.loadPreview(s))}resize(){this.visible&&(cancelAnimationFrame(this.af),this.af=requestAnimationFrame(()=>{const{width:t,height:e}=this.img.getBoundingClientRect();t>this.maxWidth&&(this.maxWidth=t,this.height=e,this.width=t)}))}connectedCallback(){const{width:t,height:e}=this.img.getBoundingClientRect();this.img.style.setProperty("--preview-blur",`${Math.floor(t/20)}px`),0===e&&(console.warn("img-min: element has height=0 and will never be visible",this),console.warn("img-min: it is recommend to use --aspect-ratio to all images")),setTimeout(()=>{console.log("check init"),this.checkVisibility()},100)}});

package.json

 {
   "name": "@lipp/img-min",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A web component for minimal, responsive and lazy images for webp and jpeg",
@@ -35,2 +35,2 @@ "keywords": [
   "dependencies": {}
-}
+}

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

Worsened metrics

Total package byte prevSize

6372

decreased by-1.33%

No dependency changes