Merge pull request #2 from QuarkPixel/master

Fix Multiple UI/UX Issues and Improve Configuration Management

1 files changed, 239 insertions, 1 deletions

diff --git a/dist/libra.min.js b/dist/libra.min.js
index ed45943..fe939bb 100644
--- a/dist/libra.min.js
+++ b/dist/libra.min.js
@@ -1,2 +1,240 @@
-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,o=t.naturalHeight,l=n/o,r=window.innerWidth-2*s,h=window.innerHeight-2*s;return i.width=n>r?r:n,i.height=n>r?r/l:o,i.height>h&&(i.height=h,i.width=h*l),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,o=e.left+e.width/2,l=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-o}, ${h-l})`}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()),document.body.addEventListener("touchmove",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};
+const $0a4c69ff81eafed7$var$config = {
+    selector: '[data-libra]',
+    margin: 50,
+    offset: {
+        x: 0,
+        y: 0
+    },
+    transitionDuration: 200,
+    imageCursor: 'zoom-in'
+};
+function $0a4c69ff81eafed7$var$deepMerge(target, source) {
+    for(const key in source)if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+        if (!target[key]) target[key] = {};
+        $0a4c69ff81eafed7$var$deepMerge(target[key], source[key]);
+    } else target[key] = source[key];
+    return target;
+}
+function $0a4c69ff81eafed7$export$940a7873bb071df8(newConfig) {
+    $0a4c69ff81eafed7$var$deepMerge($0a4c69ff81eafed7$var$config, newConfig);
+}
+var $0a4c69ff81eafed7$export$2e2bcd8739ae039 = $0a4c69ff81eafed7$var$config;
+
+
+class $1e566b6277893a87$export$2e2bcd8739ae039 {
+    constructor(){
+        const overlay = document.createElement('div');
+        overlay.id = 'libra-overlay';
+        overlay.classList.add('libra-overlay', 'libra-hidden');
+        // Set transition duration from config
+        overlay.style.transitionDuration = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration + 'ms';
+        this.element = overlay;
+        document.body.appendChild(overlay);
+        return this;
+    }
+    show() {
+        this.element.classList.remove('libra-hidden');
+        this.element.classList.add('libra-visible');
+    }
+    hide() {
+        this.element.classList.remove('libra-visible');
+        this.element.classList.add('libra-hidden');
+    }
+}
+
+
+
+class $c202a9cf7133f3b7$export$2e2bcd8739ae039 {
+    static calculateFinalState(element) {
+        let finals = {};
+        const margin = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).margin;
+        const nw = element.naturalWidth;
+        const nh = element.naturalHeight;
+        const ratio = nw / nh;
+        const ww = window.innerWidth - 2 * margin;
+        const wh = window.innerHeight - 2 * margin;
+        // size image based on width first
+        finals.width = nw > ww ? ww : nw;
+        finals.height = nw > ww ? ww / ratio : nh;
+        // if height is too big, adjust based on height
+        if (finals.height > wh) {
+            finals.height = wh;
+            finals.width = wh * ratio;
+        }
+        finals.top = (wh - finals.height) / 2 + window.scrollY + margin + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y;
+        finals.left = (ww - finals.width) / 2 + window.scrollX + margin + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x;
+        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 {
+    isOpen = false;
+    /**
+   * ============
+   * Constructors
+   * ============
+   */ constructor(image){
+        this.original = image;
+        const rect = this.original.getBoundingClientRect();
+        this.originalPosition = {
+            top: rect.top + window.scrollY + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y,
+            left: rect.left + window.scrollX + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x,
+            width: rect.width,
+            height: rect.height
+        };
+        this.create(image);
+        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
+        shadow.style.top = `${this.originalPosition.top}px`;
+        shadow.style.left = `${this.originalPosition.left}px`;
+        shadow.style.width = `${this.originalPosition.width}px`;
+        shadow.style.height = `${this.originalPosition.height}px`;
+        // Set transition duration from config
+        shadow.style.transitionDuration = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration + 'ms';
+        document.body.appendChild(shadow);
+        this.element = shadow;
+    }
+    /**
+   * ============
+   * Actions
+   * ============
+   */ updateOriginalPosition() {
+        const rect = this.original.getBoundingClientRect();
+        this.originalPosition = {
+            top: rect.top + window.scrollY + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.y,
+            left: rect.left + window.scrollX + (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).offset.x,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    open() {
+        this.isOpen = true;
+        this.element.classList.add('open');
+        // Update original position before animation in case viewport changed
+        this.updateOriginalPosition();
+        this.element.style.top = `${this.originalPosition.top}px`;
+        this.element.style.left = `${this.originalPosition.left}px`;
+        this.element.style.width = `${this.originalPosition.width}px`;
+        this.element.style.height = `${this.originalPosition.height}px`;
+        this.original.style.visibility = 'hidden';
+        if (!document.body.contains(this.element)) this.placeItself();
+        // Wait for image to load before animating
+        if (this.element.naturalWidth === 0 || this.element.naturalHeight === 0) this.element.addEventListener('load', ()=>{
+            (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).transformMatrix(this.element, this.originalPosition, (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).calculateFinalState(this.element));
+        }, {
+            once: true
+        });
+        else (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).transformMatrix(this.element, this.originalPosition, (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).calculateFinalState(this.element));
+    }
+    close() {
+        this.isOpen = false;
+        this.element.classList.remove('open');
+        (0, $c202a9cf7133f3b7$export$2e2bcd8739ae039).resetTransformMatrix(this.element);
+        // Wait for animation to complete before showing original and destroying shadow
+        setTimeout(()=>{
+            this.original.style.visibility = 'visible';
+            this.destroyItself();
+        }, (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).transitionDuration);
+    }
+    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(config){
+        (0, $0a4c69ff81eafed7$export$940a7873bb071df8)(config);
+        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((0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).selector);
+        this.images.forEach((image)=>{
+            if (image.tagName !== 'IMG') return;
+            image.id = crypto.randomUUID(); // generate unique id for each image
+            image.style.cursor = (0, $0a4c69ff81eafed7$export$2e2bcd8739ae039).imageCursor;
+            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());
+        document.body.addEventListener('touchmove', (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};
 //# sourceMappingURL=libra.min.js.map