chore(build): set up npm and parcel

2 files changed, 232 insertions, 0 deletions

diff --git a/dist/lightbox.min.js b/dist/lightbox.min.js
new file mode 100644
index 0000000..84921d8
--- /dev/null
+++ b/dist/lightbox.min.js
@@ -0,0 +1,231 @@
+class $1e566b6277893a87$export$2e2bcd8739ae039 {
+    zIndex = 900;
+    zIndexHidden = -100;
+    constructor(){
+        const overlay = document.createElement('div');
+        overlay.id = 'libo-overlay';
+        overlay.classList.add('libo-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 $ec04822463bc4394$export$2e2bcd8739ae039 {
+    zIndex = '1000';
+    isOpen = false;
+    /**
+   * ============
+   * Constructors
+   * ============
+   */ constructor(image){
+        this.create(image);
+        this.calculateStartsAndFinals();
+        return this;
+    }
+    create(image) {
+        // create shadow image
+        const shadowImage = document.createElement('img');
+        shadowImage.src = image.src;
+        shadowImage.id = `libo-shadow-${image.id}`;
+        shadowImage.classList.add('libo-shadow');
+        // style and position shadow image
+        shadowImage.style.top = image.offsetTop;
+        shadowImage.style.left = image.offsetLeft;
+        shadowImage.style.width = image.offsetWidth;
+        shadowImage.style.height = image.offsetHeight;
+        shadowImage.style.zIndex = this.zIndex;
+        document.body.appendChild(shadowImage);
+        this.element = shadowImage;
+    }
+    calculateStartsAndFinals() {
+        // get starting state
+        const s = {
+            top: this.element.offsetTop,
+            left: this.element.offsetLeft,
+            width: this.element.offsetWidth,
+            height: this.element.offsetHeight
+        };
+        const f = {};
+        const margin = 50;
+        // calculate final size
+        const nw = this.element.naturalWidth;
+        const nh = this.element.naturalHeight;
+        const ratio = nw / nh;
+        const ww = window.innerWidth - margin * 2;
+        const wh = window.innerHeight - margin * 2;
+        f.width = Math.min(nw, ww);
+        f.height = f.width / ratio;
+        if (f.height >= wh) {
+            f.height = wh;
+            f.width = f.height * ratio;
+        }
+        // calculate final position
+        f.left = (ww - f.width) / 2 + margin;
+        f.top = (wh - f.height) / 2 + margin;
+        this.finalState = f;
+        this.startingState = s;
+    }
+    /**
+   * ============
+   * Actions
+   * ============
+   */ open() {
+        this.isOpen = true;
+        this.animate(this.startingState, this.finalState);
+    }
+    close() {
+        this.isOpen = false;
+        this.animate(this.finalState, this.startingState);
+    }
+    animate(starts, finals) {
+        // Set up the interval for smooth transition
+        const steps = 20; // Number of steps for smoothness
+        let step = 0;
+        // Using requestAnimationFrame for smoother animation
+        const frame = ()=>{
+            // Calculate the progress (from 0 to 1)
+            const progress = step / steps;
+            // Interpolate the current values based on progress
+            const currentTop = starts.top + (finals.top - starts.top) * progress;
+            const currentLeft = starts.left + (finals.left - starts.left) * progress;
+            const currentWidth = starts.width + (finals.width - starts.width) * progress;
+            const currentHeight = starts.height + (finals.height - starts.height) * progress;
+            // Update the element's style
+            this.element.style.top = `${currentTop}px`;
+            this.element.style.left = `${currentLeft}px`;
+            this.element.style.width = `${currentWidth}px`;
+            this.element.style.height = `${currentHeight}px`;
+            // Log current size for debugging
+            console.log(`Step ${step}: ${currentTop}, ${currentLeft}`);
+            // Increase the step count
+            step++;
+            // Continue animating until we reach the final step
+            if (step <= steps) requestAnimationFrame(frame);
+            else {
+                this.element.classList.toggle('open');
+                if (!this.isOpen) this.destroyItself();
+            }
+        };
+        // Start the animation
+        requestAnimationFrame(frame);
+    }
+    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({ container: container }){
+        this.container = container;
+        this.initOverlay();
+        this.initImages();
+        this.initControls();
+    }
+    initOverlay() {
+        this.overlay = new (0, $1e566b6277893a87$export$2e2bcd8739ae039)();
+        this.overlay.element.addEventListener('click', (e)=>{
+            this.closeCurrent();
+        });
+    }
+    initImages() {
+        this.images = document.querySelectorAll(`${this.container} img[data-libo]`);
+        function wrapInLink(image) {
+            // wrap image with a link if it's not already wrapped
+            const parent = image.parentElement;
+            let link;
+            if (!parent || parent.tagName !== 'A') {
+                link = document.createElement('a');
+                link.href = image.src;
+                // replace image with the linked one
+                parent.insertBefore(link, image);
+                link.appendChild(image);
+            } else link = parent;
+            return link;
+        }
+        this.images.forEach((image)=>{
+            // generate unique id for each image
+            image.id = crypto.randomUUID();
+            // make sure every image has a link
+            const link = wrapInLink(image);
+            // click link to open lightbox
+            link.addEventListener('click', (e)=>{
+                e.preventDefault();
+                this.openLightBox(image);
+            });
+        });
+    }
+    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
+   * ============
+   */ openLightBox(image) {
+        // hide and store original image
+        image.style.visibility = 'hidden';
+        this.currentImage = image;
+        // get shadow of this image
+        const shadow = this.shadows[image.id] || new (0, $ec04822463bc4394$export$2e2bcd8739ae039)(image);
+        if (!this.shadows[image.id]) this.shadows[image.id] = shadow;
+        // place and open shadow
+        if (!document.body.contains(shadow.element)) shadow.placeItself();
+        shadow.open();
+        this.overlay.show();
+    }
+    closeLightBox(image) {
+        // show and unstore original image
+        image.style.visibility = 'visible';
+        this.currentImage = null;
+        // close shadow
+        const shadow = this.shadows[image.id];
+        if (!shadow) return;
+        shadow.close();
+        this.overlay.hide();
+    }
+    closeCurrent() {
+        if (!this.currentImage) return;
+        this.closeLightBox(this.currentImage);
+    }
+    closeAll() {
+        this.images.forEach((image)=>{
+            this.closeLightBox(image);
+        });
+        this.overlay.hide();
+    }
+}
+
+
+export {$3e29c386d1910a1d$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=lightbox.min.js.map
diff --git a/dist/lightbox.min.js.map b/dist/lightbox.min.js.map
new file mode 100644
index 0000000..5dd3139
--- /dev/null
+++ b/dist/lightbox.min.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/lightbox.js","src/overlay.js","src/shadow.js"],"sourcesContent":["import Overlay from './overlay.js';\nimport Shadow from './shadow.js';\n\nexport default class LightBox {\n  currentImage = null;\n  shadows = {};\n\n  /**\n   * ============\n   * Initializers\n   * ============\n   */\n\n  constructor({ container }) {\n    this.container = container;\n    this.initOverlay();\n    this.initImages();\n    this.initControls();\n  }\n\n  initOverlay() {\n    this.overlay = new Overlay();\n    this.overlay.element.addEventListener('click', e => {\n      this.closeCurrent();\n    });\n  }\n\n  initImages() {\n    this.images = document.querySelectorAll(`${this.container} img[data-libo]`);\n\n    function wrapInLink(image) {\n      // wrap image with a link if it's not already wrapped\n      const parent = image.parentElement;\n      let link;\n      if (!parent || parent.tagName !== 'A') {\n        link = document.createElement('a');\n        link.href = image.src;\n        // replace image with the linked one\n        parent.insertBefore(link, image);\n        link.appendChild(image);\n      } else {\n        link = parent;\n      }\n      return link;\n    }\n\n    this.images.forEach(image => {\n      // generate unique id for each image\n      image.id = crypto.randomUUID();\n      // make sure every image has a link\n      const link = wrapInLink(image);\n      // click link to open lightbox\n      link.addEventListener('click', e => {\n        e.preventDefault();\n        this.openLightBox(image);\n      });\n    });\n  }\n\n  initControls() {\n    // keyboard shortcuts\n    document.addEventListener('keydown', e => {\n      if (e.key === 'Escape' || e.key === ' ') {\n        this.closeCurrent();\n      }\n    });\n    // scroll to dismiss\n    document.body.addEventListener('wheel', e => {\n      this.closeCurrent();\n    });\n  }\n\n  /**\n   * ============\n   * Actions\n   * ============\n   */\n\n  openLightBox(image) {\n    // hide and store original image\n    image.style.visibility = 'hidden';\n    this.currentImage = image;\n\n    // get shadow of this image\n    const shadow = this.shadows[image.id] || new Shadow(image);\n    if (!this.shadows[image.id]) {\n      this.shadows[image.id] = shadow;\n    }\n\n    // place and open shadow\n    if (!document.body.contains(shadow.element)) shadow.placeItself();\n    shadow.open();\n\n    this.overlay.show();\n  }\n\n  closeLightBox(image) {\n    // show and unstore original image\n    image.style.visibility = 'visible';\n    this.currentImage = null;\n\n    // close shadow\n    const shadow = this.shadows[image.id];\n    if (!shadow) return;\n    shadow.close();\n\n    this.overlay.hide();\n  }\n\n  closeCurrent() {\n    if (!this.currentImage) return;\n    this.closeLightBox(this.currentImage);\n  }\n\n  closeAll() {\n    this.images.forEach(image => {\n      this.closeLightBox(image);\n    });\n    this.overlay.hide();\n  }\n}\n","export default class Overlay {\n  zIndex = 900;\n  zIndexHidden = -100;\n\n  constructor() {\n    const overlay = document.createElement('div');\n    overlay.id = 'libo-overlay';\n    overlay.classList.add('libo-overlay');\n\n    // initialized state\n    overlay.style.zIndex = this.zIndexHidden;\n    overlay.style.opacity = '0';\n\n    this.element = overlay;\n    document.body.appendChild(overlay);\n\n    return this;\n  }\n\n  show() {\n    this.element.style.opacity = '1';\n    this.element.style.zIndex = this.zIndex;\n  }\n\n  hide() {\n    this.element.style.opacity = '0';\n    this.element.style.zIndex = '-100';\n  }\n}\n","export default class Shadow {\n  zIndex = '1000'\n  isOpen = false\n\n  /**\n   * ============\n   * Constructors\n   * ============\n   */\n\n  constructor(image) {\n    this.create(image);\n    this.calculateStartsAndFinals();\n    return this;\n  }\n\n  create(image) {\n    // create shadow image\n    const shadowImage = document.createElement('img');\n    shadowImage.src = image.src;\n    shadowImage.id = `libo-shadow-${image.id}`;\n    shadowImage.classList.add('libo-shadow');\n\n    // style and position shadow image\n    shadowImage.style.top = image.offsetTop;\n    shadowImage.style.left = image.offsetLeft;\n    shadowImage.style.width = image.offsetWidth;\n    shadowImage.style.height = image.offsetHeight;\n    shadowImage.style.zIndex = this.zIndex;\n\n    document.body.appendChild(shadowImage);\n    this.element = shadowImage;\n  }\n\n  calculateStartsAndFinals() {\n    // get starting state\n    const s = {\n      top: this.element.offsetTop,\n      left: this.element.offsetLeft,\n      width: this.element.offsetWidth,\n      height: this.element.offsetHeight\n    }\n\n    const f = {};\n    const margin = 50;\n\n    // calculate final size\n    const nw = this.element.naturalWidth;\n    const nh = this.element.naturalHeight;\n    const ratio = nw / nh;\n\n    const ww = window.innerWidth - margin*2;\n    const wh = window.innerHeight - margin*2;\n\n    f.width = Math.min(nw, ww);\n    f.height = f.width / ratio;\n\n    if (f.height >= wh) {\n      f.height = wh;\n      f.width = f.height * ratio;\n    }\n\n    // calculate final position\n    f.left = (ww - f.width) / 2 + margin;\n    f.top = (wh - f.height) / 2 + margin;\n\n    this.finalState = f;\n    this.startingState = s;\n  }\n\n  /**\n   * ============\n   * Actions\n   * ============\n   */\n\n  open() {\n    this.isOpen = true;\n    this.animate(this.startingState, this.finalState)\n  }\n\n  close() {\n    this.isOpen = false;\n    this.animate(this.finalState, this.startingState);\n  }\n\n  animate(starts, finals) {\n    // Set up the interval for smooth transition\n    const steps = 20; // Number of steps for smoothness\n    let step = 0;\n\n    // Using requestAnimationFrame for smoother animation\n    const frame = () => {\n      // Calculate the progress (from 0 to 1)\n      const progress = step / steps;\n\n      // Interpolate the current values based on progress\n      const currentTop = starts.top + (finals.top - starts.top) * progress;\n      const currentLeft = starts.left + (finals.left - starts.left) * progress;\n      const currentWidth = starts.width + (finals.width - starts.width) * progress;\n      const currentHeight = starts.height + (finals.height - starts.height) * progress;\n\n      // Update the element's style\n      this.element.style.top = `${currentTop}px`;\n      this.element.style.left = `${currentLeft}px`;\n      this.element.style.width = `${currentWidth}px`;\n      this.element.style.height = `${currentHeight}px`;\n\n      // Log current size for debugging\n      console.log(`Step ${step}: ${currentTop}, ${currentLeft}`);\n\n      // Increase the step count\n      step++;\n\n      // Continue animating until we reach the final step\n      if (step <= steps) {\n        requestAnimationFrame(frame);\n      } else {\n        this.element.classList.toggle('open');\n        if (!this.isOpen) this.destroyItself();\n      }\n    };\n\n    // Start the animation\n    requestAnimationFrame(frame);\n  }\n\n  placeItself() {\n    document.body.appendChild(this.element);\n  }\n\n  destroyItself() {\n    if (!document.body.contains(this.element)) return;\n    document.body.removeChild(this.element);\n  }\n}\n"],"names":[],"version":3,"file":"lightbox.min.js.map","sourceRoot":"../"}
\ No newline at end of file