From ad31076b67479d9ceaf6cc7d1619214123513f4a Mon Sep 17 00:00:00 2001
From: Jonas Leder <git@jonasled.de>
Date: Wed, 24 Mar 2021 23:16:31 +0100
Subject: [PATCH] use basiclightbox for image preview

---
 js/dialog.js     | 37 -------------------------------------
 js/imgPreview.js | 10 +++++++++-
 js/script.js     |  1 -
 package.json     |  1 +
 scss/style.scss  |  3 ++-
 yarn.lock        |  5 +++++
 6 files changed, 17 insertions(+), 40 deletions(-)
 delete mode 100644 js/dialog.js

diff --git a/js/dialog.js b/js/dialog.js
deleted file mode 100644
index 49e50a2..0000000
--- a/js/dialog.js
+++ /dev/null
@@ -1,37 +0,0 @@
-function createDialogImage(url) {
-    createDialogHTML(`<img src="${url}">`, "imageDialog");
-}
-
-function createDialogHTML(html, customClasses = "") {
-    let dialog = document.createElement("div");
-    dialog.classList.add("dialog");
-
-    dialog.innerHTML = `
-    <span class="close">&times;</span>
-    <div class="dialogContent ${customClasses}">
-        ${html}
-    </div>`;
-
-    document.body.appendChild(dialog);
-    fade(dialog, 0.04);
-
-    dialog.querySelector(".close").onclick = function (){
-        fade(dialog, -0.04, true);
-    }
-}
-
-function fade(element, value = 0.1, deleteAfterwards = false) {
-    let opacity = +(element.style.opacity) + value;
-
-    element.style.opacity = String(opacity);
-
-    if ((opacity < 1 && value > 0) || (opacity >= 0 && value < 0)) {
-        setTimeout(function () {
-            fade(element, value, deleteAfterwards);
-        }, 10);
-    } else if (deleteAfterwards) {
-        setTimeout(function () {
-            element.parentNode.removeChild(element);
-        }, 10);
-    }
-}
\ No newline at end of file
diff --git a/js/imgPreview.js b/js/imgPreview.js
index f9cb350..a167585 100644
--- a/js/imgPreview.js
+++ b/js/imgPreview.js
@@ -1,7 +1,15 @@
+import * as basicLightbox from 'basiclightbox'
+
 let images = document.getElementsByTagName("img");
 for(let i = 0; i < images.length; i++){
     let element = images[i];
     if(!(element.getAttribute("data-noPreview") === "true")) {
-        element.onclick = () => createDialogImage(element.src);
+        element.onclick = () => {
+            console.log("render");
+            const instance = basicLightbox.create(`
+            <img src="${element.src}">
+            `);
+            instance.show(() => console.log('lightbox now visible'))
+        }
     }
 }
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index f1dcf14..7ca5a4a 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,6 +1,5 @@
 require("./cookie");
 require("./burgerMenu");
-require("./dialog");
 require("./error");
 require("./imgPreview");
 require("./includeHTML");
diff --git a/package.json b/package.json
index f34f061..b72a480 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "webpack-cli": "^4.5.0"
   },
   "dependencies": {
+    "basiclightbox": "^5.0.4",
     "plotly.js-dist": "^1.58.4",
     "sass": "^1.32.8",
     "webpack": "^5.28.0"
diff --git a/scss/style.scss b/scss/style.scss
index dc143e8..3321faf 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -14,4 +14,5 @@
 @import "mobile";
 @import "menuMobile";
 @import "mobileSmall";
-@import "dialog";
\ No newline at end of file
+@import "dialog";
+@import "../node_modules/basiclightbox/src/styles/main";
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ac9e98a..3a3550b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -796,6 +796,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+basiclightbox@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/basiclightbox/-/basiclightbox-5.0.4.tgz#5367d6d468ae44406e51b8486cfb8751f36f1fb2"
+  integrity sha512-EsuNWmfcFXWZOe0txKXsllYOC7bDpoaVLc4HHHlYKB/roymlZs+FBdLUU6rx2yPpnJZhulwheKdPjqr2k0+NGQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"