@lipp/img-min - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.min.js

@@ -1,2 +0,2 @@
-const html=String.raw,getImgScaleUrl=({url:t,width:i,quality:e,format:s})=>`https://img-scale.now.sh?format=${s}&width=${i}&quality=${e}&url=${encodeURIComponent(t)}`,getUrl=({format:t,url:i,width:e,quality:s,isPreview:r})=>(r&&(e/=7),e=Math.floor(e),`${getImgScaleUrl({url:i,width:e=e>50?e-e%30:e-e%5,quality:s,format:t})} 1x,${getImgScaleUrl({url:i,width:Math.floor(1.1*e),quality:Math.min(1.1*s,100),format:t})} 2x, ${getImgScaleUrl({url:i,width:Math.floor(1.3*e),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`
+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.1*i),quality:Math.min(Math.floor(1.1*s),100),format:t})} 2x, ${getImgScaleUrl({url:e,width:Math.floor(1.3*i),quality:Math.min(Math.floor(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`
   <picture>
@@ -47,2 +47,2 @@ <source type="image/webp" />
   </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 i=()=>{this.removeAttribute("preview"),this.setAttribute("loaded",""),this.img.onload=null};this.img.onload=(()=>{if(delete pendingPreviews[this.src],this.setAttribute("preview",""),this.isFirefox)return this.removeAttribute("preview"),this.setAttribute("loaded",""),void(this.img.onload=null);this.isPreview=!1,this.img.onload=i,postponed.push(()=>this.resize()),0===Object.keys(pendingPreviews).length&&(postponed.reverse().forEach(t=>t()),postponed=[])}),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 console.log("q,",this.getAttribute("quality")),parseInt(this.getAttribute("quality"),10)||50}set quality(t){this.setAttribute("quality",t),this.updateSrcset()}set src(t){this.setAttribute("src",t),this.updateSrcset()}attributeChangedCallback(t,i,e){i!==e&&(this[t]=e)}getSrcset(t){return 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=!this.isFirefox,pendingPreviews[this.src]=!0,this.width=t}checkVisibility(){const t=parseInt(this.getAttribute("lazy-dist"))||100,{top:i,bottom:e,width:s,height:r}=this.img.getBoundingClientRect(),o=e<-t,h=i>window.innerHeight+t;console.log(i,e,s,r,o,h,this.visible),o||h||this.visible||(this.visible=!0,this.height=r,this.loadPreview(s))}resize(){this.visible&&(cancelAnimationFrame(this.af),this.af=requestAnimationFrame(()=>{const{width:t,height:i}=this.img.getBoundingClientRect();t>this.maxWidth&&(this.maxWidth=t,this.height=i,this.width=t)}))}connectedCallback(){this.isFirefox=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,this.isFirefox&&this.img.style.setProperty("transition-property","opacity");const{width:t,height:i}=this.img.getBoundingClientRect();this.img.style.setProperty("--preview-blur",`${Math.floor(t/20)}px`),0===i&&(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)}});
+`;let postponed=[];const pending={};let initOnce,isWebpSupported;const init=async()=>{document.addEventListener("scroll",onScroll),isWebpSupported=await testIsWebpSupported()},testIsWebpSupported=async()=>{if(!createImageBitmap)return!1;const t=await fetch("data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=").then(t=>t.blob());return createImageBitmap(t).then(()=>!0,()=>!1)};customElements.define("img-min",class extends HTMLElement{constructor(){super(),initOnce||(initOnce=!0,init()),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=(()=>{if(delete pending[this.src],this.setAttribute("preview",""),this.isFirefox)return this.removeAttribute("preview"),this.setAttribute("loaded",""),void(this.img.onload=null);this.isPreview=!1,this.img.onload=e,postponed.push(()=>this.resize()),0===Object.keys(pending).length&&(postponed.reverse().forEach(t=>t()),postponed=[])}),this.resize=this.resize.bind(this),addEventListener("resize",this.resize),invisibles.push(this)}static get observedAttributes(){return["src","quality"]}get src(){return this.getAttribute("src")}get quality(){return parseInt(this.getAttribute("quality"),10)||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 getUrl({url:this.src,format:t,width:this.width,height:this.height,quality:this.quality,isPreview:this.isPreview})}updateSrcset(){this.visible&&(isWebpSupported?(this.webp=this.webp||this.shadowRoot.querySelector('source[type="image/webp"]'),this.webp.srcset=this.getSrcset("webp")):(this.jpeg=this.jpeg||this.shadowRoot.querySelector('source[type="image/jpeg"]'),this.jpeg.srcset=this.getSrcset("jpeg")))}get width(){return this._width}set width(t){this._width=t,this.updateSrcset()}disconnectedCallback(){removeEventListener("resize",this.resize)}loadPreview(t){this.isPreview=!this.isFirefox,pending[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(),o=i<-t,h=e>window.innerHeight+t;o||h||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(){this.isFirefox=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,this.isFirefox&&this.img.style.setProperty("transition-property","opacity");const{width:t,height:e}=this.img.getBoundingClientRect();this.img.style.setProperty("--preview-blur",`${Math.floor(t/18)}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(()=>{this.checkVisibility()},50)}});

package.json

 {
   "name": "@lipp/img-min",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A web component for minimal, responsive and lazy images for webp and jpeg",
@@ -5,0 +5,0 @@ "keywords": [

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

Network access

Supply chain risk

This module accesses the network.

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

6846

increased by3.1%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes