@hirasso/thumbhash-custom-element - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{thumbHashToRGBA as t}from"thumbhash";class e extends HTMLElement{constructor(){super()}static define(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",e)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(e){const a=Uint8Array.from(atob(e),t=>t.charCodeAt(0)),{w:s,h:n,rgba:r}=t(a),h=function(t,e,a){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)return;s.width=t,s.height=e;const r=n.createImageData(t,e);return r.data.set(a),n.putImageData(r,0,0),s}(s,n,r);h&&(h.style.width="100%",h.style.height="100%",h.setAttribute("data-thumb-hash-canvas",""),this.appendChild(h))}}export{e as default};
+import{thumbHashToRGBA as t}from"thumbhash";class e extends HTMLElement{constructor(){super()}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",e)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(e){const a=Uint8Array.from(atob(e),t=>t.charCodeAt(0)),{w:s,h:n,rgba:r}=t(a),h=function(t,e,a){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)return;s.width=t,s.height=e;const r=n.createImageData(t,e);return r.data.set(a),n.putImageData(r,0,0),s}(s,n,r);h&&(h.style.width="100%",h.style.height="100%",h.setAttribute("data-thumb-hash-canvas",""),this.appendChild(h))}}export{e as default};
 //# sourceMappingURL=index.modern.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{thumbHashToRGBA as t}from"thumbhash";class e extends HTMLElement{constructor(){super()}static define(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",e)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(e){const a=Uint8Array.from(atob(e),t=>t.charCodeAt(0)),{w:s,h:n,rgba:r}=t(a),h=function(t,e,a){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)return;s.width=t,s.height=e;const r=n.createImageData(t,e);return r.data.set(a),n.putImageData(r,0,0),s}(s,n,r);h&&(h.style.width="100%",h.style.height="100%",h.setAttribute("data-thumb-hash-canvas",""),this.appendChild(h))}}export{e as default};
+import{thumbHashToRGBA as t}from"thumbhash";class e extends HTMLElement{constructor(){super()}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",e)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(e){const a=Uint8Array.from(atob(e),t=>t.charCodeAt(0)),{w:s,h:n,rgba:r}=t(a),h=function(t,e,a){const s=document.createElement("canvas"),n=s.getContext("2d");if(!n)return;s.width=t,s.height=e;const r=n.createImageData(t,e);return r.data.set(a),n.putImageData(r,0,0),s}(s,n,r);h&&(h.style.width="100%",h.style.height="100%",h.setAttribute("data-thumb-hash-canvas",""),this.appendChild(h))}}export{e as default};
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).ThumbhashCustomElement=e()}(this,function(){class t extends HTMLElement{constructor(){super()}static define(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",t)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(t){const e=Uint8Array.from(atob(t),t=>t.charCodeAt(0)),{w:n,h:r,rgba:o}=function(t){let{PI:e,min:n,max:r,cos:o,round:a}=Math,l=t[0]|t[1]<<8|t[2]<<16,s=t[3]|t[4]<<8,i=(63&l)/63,u=(l>>6&63)/31.5-1,f=(l>>12&63)/31.5-1,h=(l>>18&31)/31,c=l>>23,d=(s>>3&63)/63,m=(s>>9&63)/63,b=s>>15,g=r(3,b?c?5:7:7&s),p=r(3,b?7&s:c?5:7),y=c?(15&t[5])/15:1,w=(t[5]>>4)/15,v=c?6:5,x=0,A=(e,n,r)=>{let o=[];for(let a=0;a<n;a++)for(let l=a?0:1;l*n<e*(n-a);l++)o.push(((t[v+(x>>1)]>>((1&x++)<<2)&15)/7.5-1)*r);return o},C=A(g,p,h),E=A(3,3,1.25*d),T=A(3,3,1.25*m),I=c&&A(5,5,w),D=function(t){let e=t[3],n=128&t[2],r=128&t[4];return(r?n?5:7:7&e)/(r?7&e:n?5:7)}(t),M=a(D>1?32:32*D),U=a(D>1?32/D:32),j=new Uint8Array(M*U*4),k=[],H=[];for(let t=0,a=0;t<U;t++)for(let l=0;l<M;l++,a+=4){let s=i,h=u,d=f,m=y;for(let t=0,n=r(g,c?5:3);t<n;t++)k[t]=o(e/M*(l+.5)*t);for(let n=0,a=r(p,c?5:3);n<a;n++)H[n]=o(e/U*(t+.5)*n);for(let t=0,e=0;t<p;t++)for(let n=t?0:1,r=2*H[t];n*p<g*(p-t);n++,e++)s+=C[e]*k[n]*r;for(let t=0,e=0;t<3;t++)for(let n=t?0:1,r=2*H[t];n<3-t;n++,e++){let t=k[n]*r;h+=E[e]*t,d+=T[e]*t}if(c)for(let t=0,e=0;t<5;t++)for(let n=t?0:1,r=2*H[t];n<5-t;n++,e++)m+=I[e]*k[n]*r;let b=s-2/3*h,w=(3*s-b+d)/2,v=w-d;j[a]=r(0,255*n(1,w)),j[a+1]=r(0,255*n(1,v)),j[a+2]=r(0,255*n(1,b)),j[a+3]=r(0,255*n(1,m))}return{w:M,h:U,rgba:j}}(e),a=function(t,e,n){const r=document.createElement("canvas"),o=r.getContext("2d");if(!o)return;r.width=t,r.height=e;const a=o.createImageData(t,e);return a.data.set(n),o.putImageData(a,0,0),r}(n,r,o);a&&(a.style.width="100%",a.style.height="100%",a.setAttribute("data-thumb-hash-canvas",""),this.appendChild(a))}}return t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).ThumbhashCustomElement=e()}(this,function(){class t extends HTMLElement{constructor(){super()}static init(){window.customElements.get("thumb-hash")||customElements.define("thumb-hash",t)}connectedCallback(){const t=this.value.trim();t&&this.render(t)}get value(){return this.getAttribute("value")||""}render(t){const e=Uint8Array.from(atob(t),t=>t.charCodeAt(0)),{w:n,h:r,rgba:o}=function(t){let{PI:e,min:n,max:r,cos:o,round:a}=Math,l=t[0]|t[1]<<8|t[2]<<16,s=t[3]|t[4]<<8,i=(63&l)/63,u=(l>>6&63)/31.5-1,f=(l>>12&63)/31.5-1,h=(l>>18&31)/31,c=l>>23,d=(s>>3&63)/63,m=(s>>9&63)/63,b=s>>15,g=r(3,b?c?5:7:7&s),p=r(3,b?7&s:c?5:7),y=c?(15&t[5])/15:1,w=(t[5]>>4)/15,v=c?6:5,x=0,A=(e,n,r)=>{let o=[];for(let a=0;a<n;a++)for(let l=a?0:1;l*n<e*(n-a);l++)o.push(((t[v+(x>>1)]>>((1&x++)<<2)&15)/7.5-1)*r);return o},C=A(g,p,h),E=A(3,3,1.25*d),T=A(3,3,1.25*m),I=c&&A(5,5,w),D=function(t){let e=t[3],n=128&t[2],r=128&t[4];return(r?n?5:7:7&e)/(r?7&e:n?5:7)}(t),M=a(D>1?32:32*D),U=a(D>1?32/D:32),j=new Uint8Array(M*U*4),k=[],H=[];for(let t=0,a=0;t<U;t++)for(let l=0;l<M;l++,a+=4){let s=i,h=u,d=f,m=y;for(let t=0,n=r(g,c?5:3);t<n;t++)k[t]=o(e/M*(l+.5)*t);for(let n=0,a=r(p,c?5:3);n<a;n++)H[n]=o(e/U*(t+.5)*n);for(let t=0,e=0;t<p;t++)for(let n=t?0:1,r=2*H[t];n*p<g*(p-t);n++,e++)s+=C[e]*k[n]*r;for(let t=0,e=0;t<3;t++)for(let n=t?0:1,r=2*H[t];n<3-t;n++,e++){let t=k[n]*r;h+=E[e]*t,d+=T[e]*t}if(c)for(let t=0,e=0;t<5;t++)for(let n=t?0:1,r=2*H[t];n<5-t;n++,e++)m+=I[e]*k[n]*r;let b=s-2/3*h,w=(3*s-b+d)/2,v=w-d;j[a]=r(0,255*n(1,w)),j[a+1]=r(0,255*n(1,v)),j[a+2]=r(0,255*n(1,b)),j[a+3]=r(0,255*n(1,m))}return{w:M,h:U,rgba:j}}(e),a=function(t,e,n){const r=document.createElement("canvas"),o=r.getContext("2d");if(!o)return;r.width=t,r.height=e;const a=o.createImageData(t,e);return a.data.set(n),o.putImageData(a,0,0),r}(n,r,o);a&&(a.style.width="100%",a.style.height="100%",a.setAttribute("data-thumb-hash-canvas",""),this.appendChild(a))}}return t});
 //# sourceMappingURL=index.umd.js.map

dist/types/ThumbhashElement.d.ts

@@ -9,3 +9,3 @@ /**
      */
-    static define(): void;
+    static init(): void;
     connectedCallback(): void;
@@ -12,0 +12,0 @@ get value(): string;

package.json

 {
   "name": "@hirasso/thumbhash-custom-element",
   "amdName": "ThumbhashCustomElement",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A custom element that renders a thumbhash placeholder for your lazy-loaded images 🎨",
@@ -6,0 +6,0 @@ "author": {

README.md

@@ -17,8 +17,8 @@ # <thumb-hash>
 ```bash
-npm i thumbhash-custom-element
+npm i @hirasso/thumbhash-custom-element
 ```
 
 ```js
-import defineThumbhashElement from "thumbhash-custom-element";
-defineThumbhashElement();
+import ThumbHashElement from "thumbhash-custom-element";
+ThumbHashElement.init();
 ```
@@ -29,5 +29,5 @@
 ```html
-<script src="https://unpkg.com/thumbhash-custom-element@0"></script>
-<script>
-  defineThumbhashElement();
+<script type="module">
+  import ThumbHashElement from "https://unpkg.com/@hirasso/thumbhash-custom-element@0?module";
+  ThumbHashElement.init();
 </script>
@@ -40,11 +40,22 @@ ```
 
-If the script is installed an initialized, you can render thumbhash placeholders automatically by using the custom element:
+If the script is installed an initialized, you can start adding `<thumb-hash>` to your markup:
 
-```html
+```diff
 <figure>
-  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" aria-hidden="true"></thumb-hash>
-  <img src="{{ url }}" loading="lazy" width="{{ width }}" height="{{ height }}" alt="{{ alt }}">
++  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" aria-hidden="true"></thumb-hash>
+  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
 </figure>
 ```
 
+The custom element will automatically create a canvas with the thumbhash image for you:
+
+```diff
+<figure>
++  <thumb-hash value="YTkGJwaRhWUIt4lbgnhZl3ath2BUBGYA" aria-hidden="true">
++    <canvas width="32" height="32" data-thumb-hash-canvas style="width: 100%; height: 100%;"></canvas>
++  </thumb-hash>
+  <img src="https://example.com/image.jpg" loading="lazy" width="32" height="32" alt="My large lazy-loaded image">
+</figure>
+```
+
 ### Styling
@@ -51,0 +62,0 @@

src/ThumbhashElement.ts

@@ -15,3 +15,3 @@ import { thumbHashToRGBA } from "thumbhash";
    */
-  static define() {
+  static init() {
     if (!window.customElements.get("thumb-hash")) {
@@ -18,0 +18,0 @@ customElements.define("thumb-hash", ThumbHashElement);

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

74275

increased by0.65%

Number of lines in readme file

74

increased by17.46%

No dependency changes