fix: lightbox shifts horizontally

For unknown reasons, the lightbox (powered by Libra.js) shifts a little downwards on the y axis. The temporary solution is to leverage new features of Libra.js to add an offset to the lightbox.


Former-commit-id: 418aa1702a718b08c415d98b751563c5b2580bb1

1 files changed, 1 insertions, 1 deletions

diff --git a/static/js/libra.min.js b/static/js/libra.min.js
index 741104b5..c33723d1 100644
--- a/static/js/libra.min.js
+++ b/static/js/libra.min.js
@@ -1,2 +1,2 @@
-class t{zIndex=900;zIndexHidden=-100;constructor(){let t=document.createElement("div");return t.id="libra-overlay",t.classList.add("libra-overlay"),t.style.zIndex=this.zIndexHidden,t.style.opacity="0",this.element=t,document.body.appendChild(t),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 e{static calculateFinalState(t){let e={},i=t.naturalWidth/t.naturalHeight,s=window.innerWidth-100,n=window.innerHeight-100;return t.naturalWidth>s?(e.width=s,e.height=s/i):(e.width=t.naturalWidth,e.height=t.naturalHeight),e.height>n&&(e.height=n,e.width=n*i),e.top=(n-e.height)/2+window.scrollY+50,e.left=(s-e.width)/2+window.scrollX+50,e}static transformMatrix(t,e,i){let s=i.width/e.width,n=i.height/e.height,l=e.left+e.width/2,o=e.top+e.height/2,h=i.left+i.width/2,r=i.top+i.height/2;t.style.transform=`matrix(${s}, 0, 0, ${n}, ${h-l}, ${r-o})`}static resetTransformMatrix(t){t.style.transform="matrix(1, 0, 0, 1, 0, 0)"}}class i{zIndex="1000";isOpen=!1;constructor(t){this.original=t;let e=this.original.getBoundingClientRect();return this.originalPosition={top:e.top+window.scrollY,left:e.left+window.scrollX,width:e.width,height:e.height},this.create(t),this}create(t){let e=document.createElement("img");e.src=t.src,e.id=`libra-shadow-${t.id}`,e.classList.add("libra-shadow"),e.style.top=`${this.originalPosition.top}px`,e.style.left=`${this.originalPosition.left}px`,e.style.width=`${this.originalPosition.width}px`,e.style.height=`${this.originalPosition.height}px`,e.style.zIndex=this.zIndex,document.body.appendChild(e),this.element=e}open(){this.isOpen=!0,this.element.classList.add("open"),this.original.style.visibility="hidden",document.body.contains(this.element)||this.placeItself(),e.transformMatrix(this.element,this.originalPosition,e.calculateFinalState(this.element))}close(){this.isOpen=!1,this.element.classList.remove("open"),this.original.style.visibility="visible",e.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:t}){this.selector=t,this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new t,this.overlay.element.addEventListener("click",()=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(this.selector),this.images.forEach(t=>{"IMG"===t.tagName&&(t.id=crypto.randomUUID(),t.style.cursor="zoom-in",t.addEventListener("click",()=>this.open(t)))})}initControls(){document.addEventListener("keydown",t=>{("Escape"===t.key||" "===t.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",t=>{this.closeCurrent()})}open(t){this.currentImage=t;let e=this.shadows[t.id]||new i(t);this.shadows[t.id]||(this.shadows[t.id]=e),e.open(),this.overlay.show()}close(t){this.currentImage=null,this.shadows[t.id]&&(this.shadows[t.id].close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.close(this.currentImage)}}export{s as default};
+class t{zIndex=900;zIndexHidden=-100;constructor(){let t=document.createElement("div");return t.id="libra-overlay",t.classList.add("libra-overlay"),t.style.zIndex=this.zIndexHidden,t.style.opacity="0",this.element=t,document.body.appendChild(t),this}show(){this.element.style.opacity="1",this.element.style.zIndex=this.zIndex}hide(){this.element.style.opacity="0",this.element.style.zIndex="-100"}}let e={selector:"[data-libra]",margin:50,offset:{x:0,y:0}};class i{static calculateFinalState(t){let i={},s=e.margin,n=t.naturalWidth,l=t.naturalHeight,o=n/l,r=window.innerWidth-2*s,h=window.innerHeight-2*s;return i.width=n>r?r:n,i.height=n>r?r/o:l,i.height>h&&(i.height=h,i.width=h*o),i.top=(h-i.height)/2+window.scrollY+s+e.offset.y,i.left=(r-i.width)/2+window.scrollX+s+e.offset.x,i}static transformMatrix(t,e,i){let s=i.width/e.width,n=i.height/e.height,l=e.left+e.width/2,o=e.top+e.height/2,r=i.left+i.width/2,h=i.top+i.height/2;t.style.transform=`matrix(${s}, 0, 0, ${n}, ${r-l}, ${h-o})`}static resetTransformMatrix(t){t.style.transform="matrix(1, 0, 0, 1, 0, 0)"}}class s{zIndex="1000";isOpen=!1;constructor(t){this.original=t;let i=this.original.getBoundingClientRect();return this.originalPosition={top:i.top+window.scrollY+e.offset.y,left:i.left+window.scrollX+e.offset.x,width:i.width,height:i.height},this.create(t),this}create(t){let e=document.createElement("img");e.src=t.src,e.id=`libra-shadow-${t.id}`,e.classList.add("libra-shadow"),e.style.top=`${this.originalPosition.top}px`,e.style.left=`${this.originalPosition.left}px`,e.style.width=`${this.originalPosition.width}px`,e.style.height=`${this.originalPosition.height}px`,e.style.zIndex=this.zIndex,document.body.appendChild(e),this.element=e}open(){this.isOpen=!0,this.element.classList.add("open"),this.original.style.visibility="hidden",document.body.contains(this.element)||this.placeItself(),i.transformMatrix(this.element,this.originalPosition,i.calculateFinalState(this.element))}close(){this.isOpen=!1,this.element.classList.remove("open"),this.original.style.visibility="visible",i.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 n{currentImage=null;shadows={};constructor(t){!function t(e,i){for(let s in i)"object"!=typeof i[s]||null===i[s]||Array.isArray(i[s])?e[s]=i[s]:(e[s]||(e[s]={}),t(e[s],i[s]));return e}(e,t),this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new t,this.overlay.element.addEventListener("click",()=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(e.selector),this.images.forEach(t=>{"IMG"===t.tagName&&(t.id=crypto.randomUUID(),t.style.cursor="zoom-in",t.addEventListener("click",()=>this.open(t)))})}initControls(){document.addEventListener("keydown",t=>{("Escape"===t.key||" "===t.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",t=>{this.closeCurrent()})}open(t){this.currentImage=t;let e=this.shadows[t.id]||new s(t);this.shadows[t.id]||(this.shadows[t.id]=e),e.open(),this.overlay.show()}close(t){this.currentImage=null,this.shadows[t.id]&&(this.shadows[t.id].close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.close(this.currentImage)}}export{n as default};
 //# sourceMappingURL=libra.min.js.map