@webority/ui-elements 0.50.1 → 0.51.0

package/dist/fileViewerImage-Bis2gnyc.js

@@ -0,0 +1,6 @@
+import{a as e,n as t,t as n}from"./fileViewerUi-DasgDsU-.js";var r=[.1,.25,.5,.75,1,1.5,2,3,4],i=[.25,.5,1,2,4],a=16,o=5,s=class{constructor(e,t){this.shell=e,this.source=t,this.zoom=`fit`,this.rotation=0,this.area={width:0,height:0},this.destroyed=!1}load(){let e=document.createElement(`img`);e.className=`wui-file-viewer-image`,e.alt=this.shell.name(),e.decoding=`async`,e.draggable=!1,e.addEventListener(`load`,()=>{this.destroyed||(this.natural={width:e.naturalWidth||300,height:e.naturalHeight||150},this._build(e),this.shell.loaded({kind:`image`,pages:1}))}),e.addEventListener(`error`,()=>{this.destroyed||this.shell.fail(Error(`The image could not be decoded.`))}),e.src=this.source.src,this.img=e}destroy(){this.destroyed=!0,this._resizeObserver?.disconnect(),this._onKeyDown&&this.shell.host.removeEventListener(`keydown`,this._onKeyDown),this._printFrame?.remove(),this.img?.removeAttribute(`src`)}_build(e){let{center:r,end:a,body:o,host:s}=this.shell;this.zoomOutButton=n(`zoom-out`,`Zoom out`),this.zoomOutButton.addEventListener(`click`,()=>this._stepZoom(-1)),this.zoomButton=document.createElement(`button`),this.zoomButton.type=`button`,this.zoomButton.className=`wui-file-viewer-zoom`,t(this.zoomButton,{label:`Zoom`,items:()=>[...i.map(e=>({key:String(e),label:`${Math.round(e*100)}%`,checked:this.zoom===e})),{key:`fit-divider`,divider:!0},{key:`fit`,label:`Fit`,checked:this.zoom===`fit`}],onPick:e=>this._setZoom(e===`fit`?`fit`:Number(e))}),this.zoomInButton=n(`zoom-in`,`Zoom in`),this.zoomInButton.addEventListener(`click`,()=>this._stepZoom(1));let c=n(`rotate-ccw`,`Rotate left`);c.addEventListener(`click`,()=>this._rotate(-90));let l=n(`rotate-cw`,`Rotate right`);l.addEventListener(`click`,()=>this._rotate(90));let u=document.createElement(`span`);u.className=`wui-file-viewer-divider wui-file-viewer-print`;let d=n(`printer`,`Print`,{className:`wui-file-viewer-print`});d.addEventListener(`click`,()=>this.print()),u.hidden=d.hidden=!this.shell.print(),r.append(this.zoomOutButton,this.zoomButton,this.zoomInButton),a.prepend(c,l,u,d),this.scroller=document.createElement(`div`),this.scroller.className=`wui-file-viewer-scroll wui-file-viewer-image-scroll wui-scroll`,this.scroller.tabIndex=0,this.scroller.setAttribute(`role`,`region`),this.scroller.setAttribute(`aria-label`,`Image`),this.stage=document.createElement(`div`),this.stage.className=`wui-file-viewer-image-stage`,this.stage.append(e),this.scroller.append(this.stage),o.replaceChildren(this.scroller),this.scroller.addEventListener(`pointerdown`,e=>this._panStart(e)),this.scroller.addEventListener(`pointermove`,e=>this._panMove(e));for(let e of[`pointerup`,`pointercancel`,`lostpointercapture`])this.scroller.addEventListener(e,()=>this._panEnd());this.scroller.addEventListener(`wheel`,e=>{if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();let t=performance.now();t-(this._lastWheelZoom??0)<120||(this._lastWheelZoom=t,this._stepZoom(e.deltaY<0?1:-1))},{passive:!1}),this._onKeyDown=e=>this._keyDown(e),s.addEventListener(`keydown`,this._onKeyDown),this._resizeObserver=new ResizeObserver(()=>{let e=this.scroller.clientWidth,t=this.scroller.clientHeight;e===this.area.width&&t===this.area.height||(this.area={width:e,height:t},this._layout())}),this._resizeObserver.observe(this.scroller),this.area={width:this.scroller.clientWidth,height:this.scroller.clientHeight},this._layout()}_turned(){let{width:e,height:t}=this.natural;return this.rotation%180==0?{width:e,height:t}:{width:t,height:e}}scale(){if(typeof this.zoom==`number`)return this.zoom;let{width:e,height:t}=this._turned(),n=Math.min((this.area.width-2*a)/e,(this.area.height-2*a)/t);return Math.max(n,.01)}_layout(){if(!this.stage)return;let t=this.scale(),n=this._turned();this.stage.style.width=`${Math.round(n.width*t)}px`,this.stage.style.height=`${Math.round(n.height*t)}px`,this.img.style.width=`${Math.round(this.natural.width*t)}px`,this.img.style.height=`${Math.round(this.natural.height*t)}px`,this.img.style.transform=`translate(-50%, -50%) rotate(${this.rotation}deg)`;let r=Math.round(t*100);this.zoomButton.innerHTML=`${r}%${e(`chevron-down`,{size:12})}`,this.zoomButton.setAttribute(`aria-label`,`Zoom, ${r}%`),this.zoomOutButton.disabled=this._zoomStep(-1)==null,this.zoomInButton.disabled=this._zoomStep(1)==null}_zoomStep(e){let t=this.scale();return e>0?r.find(e=>e>t+.001)??null:[...r].reverse().find(e=>e<t-.001)??null}_stepZoom(e){let t=this._zoomStep(e);t!=null&&this._setZoom(t)}_setZoom(e){let t=this.scroller,n=(t.scrollLeft+t.clientWidth/2)/Math.max(t.scrollWidth,1),r=(t.scrollTop+t.clientHeight/2)/Math.max(t.scrollHeight,1);this.zoom=e,this._layout(),t.scrollLeft=n*t.scrollWidth-t.clientWidth/2,t.scrollTop=r*t.scrollHeight-t.clientHeight/2}_rotate(e){this.rotation=(this.rotation+e+360)%360,this._setZoom(this.zoom)}_keyDown(e){if(!(e.defaultPrevented||e.altKey||!(e.ctrlKey||e.metaKey))){if(e.key===`+`||e.key===`=`)this._stepZoom(1);else if(e.key===`-`||e.key===`_`)this._stepZoom(-1);else if(e.key===`0`)this._setZoom(`fit`);else return;e.preventDefault()}}_panStart(e){let t=this.scroller;e.button!==0||t.scrollWidth<=t.clientWidth&&t.scrollHeight<=t.clientHeight||(this._pan={id:e.pointerId,x:e.clientX,y:e.clientY,left:t.scrollLeft,top:t.scrollTop,active:!1})}_panMove(e){let t=this._pan;if(!t)return;let n=e.clientX-t.x,r=e.clientY-t.y;if(!t.active){if(Math.abs(n)<o&&Math.abs(r)<o)return;t.active=!0,this.scroller.setPointerCapture(t.id),this.scroller.classList.add(`wui-file-viewer-panning`)}this.scroller.scrollLeft=t.left-n,this.scroller.scrollTop=t.top-r}_panEnd(){let e=this._pan;e?.active&&(this.scroller.hasPointerCapture(e.id)&&this.scroller.releasePointerCapture(e.id),this.scroller.classList.remove(`wui-file-viewer-panning`)),this._pan=null}print(){this._printFrame?.remove();let e=document.createElement(`iframe`);e.className=`wui-file-viewer-print-frame`,e.title=`Image for printing`,e.tabIndex=-1,e.setAttribute(`aria-hidden`,`true`);let t=this.rotation%180!=0,n=new URL(this.source.src,document.baseURI).href,r=t?`max-width: 100vh; max-height: 100vw;`:`max-width: 100vw; max-height: 100vh;`;e.srcdoc=`<!doctype html><html><head><title>${c(this.shell.name())}</title><style>
+@page { margin: 10mm; }
+html, body { margin: 0; height: 100%; }
+body { display: flex; align-items: center; justify-content: center; }
+img { ${r} transform: rotate(${this.rotation}deg); }
+</style></head><body><img src="${c(n)}" alt=""></body></html>`,e.addEventListener(`load`,()=>{try{e.contentWindow.focus(),e.contentWindow.print()}catch(e){console.warn(`[wui-file-viewer] print failed:`,e?.message),window.open(this.source.src,`_blank`,`noopener`)}},{once:!0}),this._printFrame=e,document.body.append(e)}},c=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`);export{s as ImageView};