From 55483eee0f655ea9e5bdf88165ec1f2a107f39dc Mon Sep 17 00:00:00 2001
From: ivarlovlie <ivar.lovlie@gmail.com>
Date: Mon, 15 Jun 2020 19:13:57 +0200
Subject: Initial commit

---
 lightbox/lightbox.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 lightbox/lightbox.js

(limited to 'lightbox/lightbox.js')

diff --git a/lightbox/lightbox.js b/lightbox/lightbox.js
new file mode 100644
index 0000000..d6b974f
--- /dev/null
+++ b/lightbox/lightbox.js
@@ -0,0 +1,34 @@
+class Lightbox {
+    constructor(selector) {
+        this.initalizeTags(selector);
+        const css = "img.lightbox[data-light-box-id]{cursor:pointer}[data-light-box-wrapper-id]{background-color:#0b0704;position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center}[data-light-box-wrapper-id] img{padding:1rem;max-height:calc(100% - 50px);max-width:calc(100% - 50px)}";
+        const styleSheet = document.createElement("style");
+        styleSheet.innerHTML = css;
+        styleSheet.dataset.lightboxStyles = "true";
+        document.head.appendChild(styleSheet);
+    }
+
+    openLightbox(id) {
+        const source = document.querySelector("[data-light-box-id='" + id + "']");
+        const wrapper = document.createElement("div");
+        wrapper.dataset.lightBoxWrapperId = id;
+        wrapper.onclick = () => this.closeLightbox(id);
+        const img = document.createElement("img");
+        img.src = source.src;
+        wrapper.appendChild(img);
+        document.body.style = "overflow: hidden !important;";
+        document.body.appendChild(wrapper);
+    }
+
+    closeLightbox(id) {
+        document.querySelector("[data-light-box-wrapper-id='" + id + "']").remove();
+        document.body.style.overflow = "";
+    }
+
+    initalizeTags(selector) {
+        document.querySelectorAll(selector).forEach(image => {
+            image.dataset.lightBoxId = Math.random().toString(36).substring(2) + Date.now().toString(36);
+            image.onclick = () => this.openLightbox(image.dataset.lightBoxId);
+        });
+    }
+}
\ No newline at end of file
-- 
cgit v1.3