summaryrefslogtreecommitdiff
path: root/dist/libra.min.js
diff options
context:
space:
mode:
Diffstat (limited to 'dist/libra.min.js')
-rw-r--r--dist/libra.min.js194
1 files changed, 1 insertions, 193 deletions
diff --git a/dist/libra.min.js b/dist/libra.min.js
index d952b9f..8b6d12f 100644
--- a/dist/libra.min.js
+++ b/dist/libra.min.js
@@ -1,194 +1,2 @@
-class $1e566b6277893a87$export$2e2bcd8739ae039 {
- zIndex = 900;
- zIndexHidden = -100;
- constructor(){
- const overlay = document.createElement('div');
- overlay.id = 'libra-overlay';
- overlay.classList.add('libra-overlay');
- // initialized state
- overlay.style.zIndex = this.zIndexHidden;
- overlay.style.opacity = '0';
- this.element = overlay;
- document.body.appendChild(overlay);
- return 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 $c202a9cf7133f3b7$export$2e2bcd8739ae039 {
- static calculateFinalState(element) {
- let finals = {};
- const margin = 50;
- const ratio = element.naturalWidth / element.naturalHeight;
- const ww = window.innerWidth - 2 * margin;
- const wh = window.innerHeight - 2 * margin;
- if (element.naturalWidth > ww) {
- finals.width = ww;
- finals.height = ww / ratio;
- if (finals.height > wh) {
- finals.height = wh;
- finals.width = wh * ratio;
- }
- } else {
- finals.width = element.offsetWidth;
- finals.height = element.offsetHeight;
- }
- finals.top = (wh - finals.height) / 2 + window.scrollY + margin;
- finals.left = (ww - finals.width) / 2 + window.scrollX + margin;
- return finals;
- }
- static transformMatrix(element, starts, finals) {
- // Calculate scaling factors based on width and height interpolation
- const scaleX = finals.width / starts.width;
- const scaleY = finals.height / starts.height;
- // Calculate the center of the starting and final positions
- const startCenterX = starts.left + starts.width / 2;
- const startCenterY = starts.top + starts.height / 2;
- const finalCenterX = finals.left + finals.width / 2;
- const finalCenterY = finals.top + finals.height / 2;
- const translateX = finalCenterX - startCenterX;
- const translateY = finalCenterY - startCenterY;
- // Apply the transform with matrix (scale + translate)
- element.style.transform = `matrix(${scaleX}, 0, 0, ${scaleY}, ${translateX}, ${translateY})`;
- }
- static resetTransformMatrix(element) {
- element.style.transform = `matrix(1, 0, 0, 1, 0, 0)`;
- }
-}
-
-
-class $ec04822463bc4394$export$2e2bcd8739ae039 {
- zIndex = '1000';
- isOpen = false;
- /**
- * ============
- * Constructors
- * ============
- */ constructor(image){
- this.original = image;
- this.create(image);
- const rect = this.element.getBoundingClientRect();
- this.startingState = {
- top: rect.top + window.scrollY,
- left: rect.left + window.scrollX,
- width: rect.width,
- height: rect.height
- };
- return this;
- }
- create(image) {
- // create shadow image
- const shadow = document.createElement('img');
- shadow.src = image.src;
- shadow.id = `libra-shadow-${image.id}`;
- shadow.classList.add('libra-shadow');
- // style and position shadow image
- const rect = image.getBoundingClientRect();
- shadow.style.top = rect.top + window.scrollY;
- shadow.style.left = rect.left + window.scrollX;
- shadow.style.width = rect.width;
- shadow.style.height = rect.height;
- shadow.style.zIndex = this.zIndex;
- document.body.appendChild(shadow);
- this.element = shadow;
- }
- /**
- * ============
- * Actions
- * ============
- */ open() {
- this.isOpen = true;
- this.original.style.visibility = 'hidden';
- if (!document.body.contains(this.element)) this.placeItself();
- (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).transformMatrix(this.element, this.startingState, (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).calculateFinalState(this.element));
- }
- close() {
- this.isOpen = false;
- this.original.style.visibility = 'visible';
- (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).resetTransformMatrix(this.element);
- setTimeout(()=>this.destroyItself(), 300);
- }
- placeItself() {
- document.body.appendChild(this.element);
- }
- destroyItself() {
- if (!document.body.contains(this.element)) return;
- document.body.removeChild(this.element);
- }
-}
-
-
-class $3e29c386d1910a1d$export$2e2bcd8739ae039 {
- currentImage = null;
- shadows = {};
- /**
- * ============
- * Initializers
- * ============
- */ constructor({ selector: selector }){
- this.selector = selector;
- this.initOverlay();
- this.initImages();
- this.initControls();
- }
- initOverlay() {
- this.overlay = new (0, $1e566b6277893a87$export$2e2bcd8739ae039)();
- this.overlay.element.addEventListener('click', ()=>{
- this.closeCurrent();
- });
- }
- initImages() {
- this.images = document.querySelectorAll(this.selector);
- this.images.forEach((image)=>{
- if (image.tagName !== 'IMG') return;
- image.id = crypto.randomUUID(); // generate unique id for each image
- image.style.cursor = 'zoom-in';
- image.addEventListener('click', ()=>this.open(image)); // click image to open lightbox
- });
- }
- initControls() {
- // keyboard shortcuts
- document.addEventListener('keydown', (e)=>{
- if (e.key === 'Escape' || e.key === ' ') this.closeCurrent();
- });
- // scroll to dismiss
- document.body.addEventListener('wheel', (e)=>{
- this.closeCurrent();
- });
- }
- /**
- * ============
- * Actions
- * ============
- */ // open lightbox = open shadow + show overlay
- open(image) {
- this.currentImage = image;
- const shadow = this.shadows[image.id] || new (0, $ec04822463bc4394$export$2e2bcd8739ae039)(image);
- if (!this.shadows[image.id]) this.shadows[image.id] = shadow;
- shadow.open();
- this.overlay.show();
- }
- // close lightbox = remove shadow + hide overlay
- close(image) {
- this.currentImage = null;
- if (!this.shadows[image.id]) return;
- this.shadows[image.id].close();
- this.overlay.hide();
- }
- closeCurrent() {
- if (!this.currentImage) return;
- this.close(this.currentImage);
- }
-}
-
-
-export {$3e29c386d1910a1d$export$2e2bcd8739ae039 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"}}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.height>n&&(e.height=n,e.width=n*i)):(e.width=t.offsetWidth,e.height=t.offsetHeight),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.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.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};
//# sourceMappingURL=libra.min.js.map