1import{E}from"./index-20260925T073311-sh.js";const l=260,m=156,g=16,b=24,x=[10,18,32,56,96,160,260],P=24;class I extends E{#t=null;#n=null;#s=null;#e=null;#i=0;onStart(){this.addEventListener("pointerover",this.#c.bind(this),{signal:this.signal}),this.addEventListener("pointermove",this.#h.bind(this),{signal:this.signal}),this.addEventListener("pointerout",this.#l.bind(this),{signal:this.signal})}#c(t){if(!this.#o(t))return;const e=t.target?.closest("[data-blog-hover-image-src]");if(!e||e===this.#e)return;const i=e.dataset.blogHoverImageSrc;if(!i)return;this.#e=e;const n=this.#a(),s=this.#n;s&&(s.src=i,s.alt=e.dataset.blogHoverImageAlt??"",n.style.opacity="1",n.style.scale="1",this.#r(t),this.#d())}#h(t){!this.#e||!this.#o(t)||this.#r(t)}#l(t){const e=t.relatedTarget;this.#e&&e instanceof Node&&this.#e.contains(e)||(this.#e=null,this.#t&&(this.#t.style.opacity="0",this.#t.style.scale="0.96"))}#a(){if(this.#t)return this.#t;const t=document.createElement("div");t.setAttribute("aria-hidden","true"),Object.assign(t.style,{position:"fixed",top:"0",left:"0",width:`clamp(180px, 18vw, ${l}px)`,aspectRatio:"5 / 3",borderRadius:"6px",overflow:"hidden",pointerEvents:"none",zIndex:"80",opacity:"0",scale:"0.96",transform:"translate(-50%, -100%)",transition:"opacity 180ms ease, scale 180ms ease",willChange:"left, top, opacity, scale"});const e=document.createElement("img");Object.assign(e.style,{position:"absolute",inset:"0",width:"100%",height:"100%",objectFit:"cover"});const i=document.createElement("canvas");return Object.assign(i.style,{position:"absolute",inset:"0",width:"100%",height:"100%",imageRendering:"pixelated",opacity:"0",transition:"opacity 80ms ease"}),t.append(e,i),document.body.appendChild(t),this.#t=t,this.#n=e,this.#s=i,t}#o(t){return!t.pointerType||t.pointerType==="mouse"}#r(t){const e=this.#a(),i=Math.min(Math.max(t.clientX,l/2+g),window.innerWidth-l/2-g),n=Math.max(t.clientY-b,m+g);e.style.left=`${i}px`,e.style.top=`${n}px`}async#d(){const t=this.#n,e=this.#s,i=this.#t;if(!t||!e||!i)return;const n=++this.#i;try{t.decode&&await t.decode()}catch{return}if(n!==this.#i||!t.naturalWidth)return;const s=i.getBoundingClientRect(),f=s.width||l,y=s.height||m,c=f/y,v=t.naturalWidth/t.naturalHeight;let u=0,p=0,a=t.naturalWidth,o=t.naturalHeight;v>c?(o=t.naturalHeight,a=o*c,u=(t.naturalWidth-a)/2):(a=t.naturalWidth,o=a/c,p=(t.naturalHeight-o)/2);const r=e.getContext("2d");if(r){e.style.opacity="1",r.imageSmoothingEnabled=!1;for(const h of x){if(n!==this.#i)return;const d=Math.round(h/c);e.width=h,e.height=d,r.imageSmoothingEnabled=!1,r.clearRect(0,0,h,d),r.drawImage(t,u,p,a,o,0,0,h,d),await new Promise(w=>setTimeout(w,P))}n===this.#i&&(e.style.opacity="0")}}}customElements.define("blog-hover-image",I);export{I as BlogHoverImage};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.