1
2
|
class e{zIndex=900;zIndexHidden=-100;constructor(){let e=document.createElement("div");return e.id="libra-overlay",e.classList.add("libra-overlay"),e.style.zIndex=this.zIndexHidden,e.style.opacity="0",this.element=e,document.body.appendChild(e),this}show(){this.element.style.opacity="1",this.element.style.zIndex=this.zIndex}hide(){this.element.style.opacity="0",this.element.style.zIndex="-100"}}class t{static calculateFinalState(e){let t={},i=e.naturalWidth/e.naturalHeight,s=window.innerWidth-100,l=window.innerHeight-100;return e.naturalWidth>s?(t.width=s,t.height=s/i,t.height>l&&(t.height=l,t.width=l*i)):(t.width=e.offsetWidth,t.height=e.offsetHeight),t.top=(l-t.height)/2+window.scrollY+50,t.left=(s-t.width)/2+window.scrollX+50,t}static transformMatrix(e,t,i){let s=i.width/t.width,l=i.height/t.height,h=t.left+t.width/2,n=t.top+t.height/2,o=i.left+i.width/2,a=i.top+i.height/2;e.style.transform=`matrix(${s}, 0, 0, ${l}, ${o-h}, ${a-n})`}static resetTransformMatrix(e){e.style.transform="matrix(1, 0, 0, 1, 0, 0)"}}class i{zIndex="1000";isOpen=!1;constructor(e){return this.create(e),this.startingState={top:this.element.offsetTop,left:this.element.offsetLeft,width:this.element.offsetWidth,height:this.element.offsetHeight},this}create(e){let t=document.createElement("img");t.src=e.src,t.id=`libra-shadow-${e.id}`,t.classList.add("libra-shadow"),t.style.top=e.offsetTop,t.style.left=e.offsetLeft,t.style.width=e.offsetWidth,t.style.height=e.offsetHeight,t.style.zIndex=this.zIndex,document.body.appendChild(t),this.element=t}open(){this.isOpen=!0,t.transformMatrix(this.element,this.startingState,t.calculateFinalState(this.element))}close(){this.isOpen=!1,t.resetTransformMatrix(this.element),setTimeout(()=>this.destroyItself(),300)}placeItself(){document.body.appendChild(this.element)}destroyItself(){document.body.contains(this.element)&&document.body.removeChild(this.element)}}class s{currentImage=null;shadows={};constructor({selector:e}){this.selector=e,this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new e,this.overlay.element.addEventListener("click",()=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(this.selector),this.images.forEach(e=>{"IMG"===e.tagName&&(e.id=crypto.randomUUID(),e.addEventListener("click",()=>this.open(e)))})}initControls(){document.addEventListener("keydown",e=>{("Escape"===e.key||" "===e.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",e=>{this.closeCurrent()})}open(e){e.style.visibility="hidden",this.currentImage=e;let t=this.shadows[e.id]||new i(e);this.shadows[e.id]||(this.shadows[e.id]=t),document.body.contains(t.element)||t.placeItself(),t.open(),this.overlay.show()}close(e){e.style.visibility="visible",this.currentImage=null;let t=this.shadows[e.id];t&&(t.close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.close(this.currentImage)}closeAll(){this.images.forEach(e=>{this.close(e)}),this.overlay.hide()}}export{s as default};
//# sourceMappingURL=libra.min.js.map
|
