chore: update libra.js

Former-commit-id: a4b49af51f028e6cbde882f427f3e0e501a718e4

3 files changed, 3 insertions, 6 deletions

diff --git a/assets/css/components/_libra.scss b/assets/css/components/_libra.scss
index 71ed6efd..1c7277c5 100644
--- a/assets/css/components/_libra.scss
+++ b/assets/css/components/_libra.scss
@@ -24,11 +24,9 @@
 }
 
 .libra-shadow {
-    position: fixed;
+    position: absolute;
     transition-duration: 0.2s;
     transition-property: transform;
-    display: block;
-    max-width: 100%;
     cursor: pointer;
 }
 
diff --git a/layouts/_partials/scripts/libra-js.html b/layouts/_partials/scripts/libra-js.html
index 96a11bbb..7a7fe428 100644
--- a/layouts/_partials/scripts/libra-js.html
+++ b/layouts/_partials/scripts/libra-js.html
@@ -1,6 +1,6 @@
 <script type="module">
   import LightBox from '/js/libra.min.js';
   const lightbox = new LightBox({
-    container: 'article'
+    selector: 'img[data-libra]'
   });
 </script>
diff --git a/static/js/libra.min.js b/static/js/libra.min.js
index e1cdce01..3a4372d8 100644
--- a/static/js/libra.min.js
+++ b/static/js/libra.min.js
@@ -1,2 +1 @@
-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{zIndex="1000";isOpen=!1;constructor(e){return this.create(e),this.calculateStartsAndFinals(),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}calculateStartsAndFinals(){let e={top:this.element.offsetTop,left:this.element.offsetLeft,width:this.element.offsetWidth,height:this.element.offsetHeight},t={},i=this.element.naturalWidth,s=i/this.element.naturalHeight,n=window.innerWidth-100,h=window.innerHeight-100;t.width=Math.min(i,n),t.height=t.width/s,t.height>=h&&(t.height=h,t.width=t.height*s),t.left=(n-t.width)/2+50,t.top=(h-t.height)/2+50,this.finalState=t,this.startingState=e}open(){this.isOpen=!0,this.animate(this.startingState,this.finalState)}close(){this.isOpen=!1,this.element.style.transform="matrix(1, 0, 0, 1, 0, 0)",setTimeout(()=>{this.destroyItself()},300)}animate(e,t){let i=t.width/e.width,s=t.height/e.height,n=e.left+e.width/2,h=e.top+e.height/2,l=t.left+t.width/2,a=t.top+t.height/2;this.element.style.transform=`matrix(${i}, 0, 0, ${s}, ${l-n}, ${a-h})`}placeItself(){document.body.appendChild(this.element)}destroyItself(){document.body.contains(this.element)&&document.body.removeChild(this.element)}}class i{currentImage=null;shadows={};constructor({container:e}){this.container=e,this.initOverlay(),this.initImages(),this.initControls()}initOverlay(){this.overlay=new e,this.overlay.element.addEventListener("click",e=>{this.closeCurrent()})}initImages(){this.images=document.querySelectorAll(`${this.container} img[data-libra]`),this.images.forEach(e=>{e.id=crypto.randomUUID(),(function(e){let t,i=e.parentElement;return i&&"A"===i.tagName?t=i:((t=document.createElement("a")).href=e.src,i.insertBefore(t,e),t.appendChild(e)),t})(e).addEventListener("click",t=>{t.preventDefault(),this.openLightBox(e)})})}initControls(){document.addEventListener("keydown",e=>{("Escape"===e.key||" "===e.key)&&this.closeCurrent()}),document.body.addEventListener("wheel",e=>{this.closeCurrent()})}openLightBox(e){e.style.visibility="hidden",this.currentImage=e;let i=this.shadows[e.id]||new t(e);this.shadows[e.id]||(this.shadows[e.id]=i),document.body.contains(i.element)||i.placeItself(),i.open(),this.overlay.show()}closeLightBox(e){e.style.visibility="visible",this.currentImage=null;let t=this.shadows[e.id];t&&(t.close(),this.overlay.hide())}closeCurrent(){this.currentImage&&this.closeLightBox(this.currentImage)}closeAll(){this.images.forEach(e=>{this.closeLightBox(e)}),this.overlay.hide()}}export{i as default};
-//# sourceMappingURL=libra.min.js.map
+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,l=window.innerHeight-100;return t.naturalWidth>s?(e.width=s,e.height=s/i,e.height>l&&(e.height=l,e.width=l*i)):(e.width=t.offsetWidth,e.height=t.offsetHeight),e.top=(l-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,l=i.height/e.height,n=e.left+e.width/2,h=e.top+e.height/2,o=i.left+i.width/2,d=i.top+i.height/2;t.style.transform=`matrix(${s}, 0, 0, ${l}, ${o-n}, ${d-h})`}static resetTransformMatrix(t){t.style.transform="matrix(1, 0, 0, 1, 0, 0)"}}class i{zIndex="1000";isOpen=!1;constructor(t){this.original=t,this.create(t);let e=this.element.getBoundingClientRect();return this.startingState={top:e.top+window.scrollY,left:e.left+window.scrollX,width:e.width,height:e.height},this}create(t){let e=document.createElement("img");e.src=t.src,e.id=`libra-shadow-${t.id}`,e.classList.add("libra-shadow");let i=t.getBoundingClientRect();e.style.top=i.top+window.scrollY,e.style.left=i.left+window.scrollX,e.style.width=i.width,e.style.height=i.height,e.style.zIndex=this.zIndex,document.body.appendChild(e),this.element=e}open(){this.isOpen=!0,this.original.style.visibility="hidden",document.body.contains(this.element)||this.placeItself(),e.transformMatrix(this.element,this.startingState,e.calculateFinalState(this.element))}close(){this.isOpen=!1,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};