From cdae8b465f3f43fe2462ec197860172593db83d3 Mon Sep 17 00:00:00 2001
From: Morten Hersson <mhersson@gmail.com>
Date: Thu, 13 Feb 2025 21:42:37 +0100
Subject: [PATCH] Add image modal functionality for full-size display

Implemented a modal overlay to display images in full size when clicked.
---
 Makefile                              |  2 +-
 internal/previewserver/web/index.html |  4 ++++
 internal/previewserver/web/styles.css | 27 ++++++++++++++++++++++++++
 internal/previewserver/web/ws.js      | 28 +++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 2aefe0f..7819c49 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,7 @@
 
 SHELL=bash
 
-VERSION="v0.11.0"
+VERSION="v0.12.0"
 
 # make will interpret non-option arguments in the command line as targets.
 # This turns them into do-nothing targets, so make won't complain:
diff --git a/internal/previewserver/web/index.html b/internal/previewserver/web/index.html
index 00fd77b..b75e3c9 100644
--- a/internal/previewserver/web/index.html
+++ b/internal/previewserver/web/index.html
@@ -28,6 +28,10 @@
       </details>
     </div>
     <div id="content"></div>
+    <div id="imageModal">
+      <span id="closeModal">&times;</span>
+      <img id="modalImage" />
+    </div>
     <script type="module">
       import mermaid from "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.2.1/mermaid.esm.mjs";
       mermaid.initialize({ startonload: false, theme: "%s" });
diff --git a/internal/previewserver/web/styles.css b/internal/previewserver/web/styles.css
index 5f84680..2699653 100644
--- a/internal/previewserver/web/styles.css
+++ b/internal/previewserver/web/styles.css
@@ -41,6 +41,33 @@ img {
   max-width: 100%;
 }
 
+#imageModal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+  justify-content: center;
+  align-items: center;
+}
+
+#closeModal {
+  color: white;
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+#modalImage {
+  max-width: 95%;
+  max-height: 95%;
+}
+
 pre {
   padding: 10px;
   max-width: 100%;
diff --git a/internal/previewserver/web/ws.js b/internal/previewserver/web/ws.js
index c22ad73..0e1f3d5 100644
--- a/internal/previewserver/web/ws.js
+++ b/internal/previewserver/web/ws.js
@@ -21,6 +21,32 @@ document.addEventListener("DOMContentLoaded", () => {
     // console.log(renderedHtml);
   }
 
+  function initializeImageModal() {
+    const images = document.querySelectorAll("img");
+
+    const modal = document.getElementById("imageModal");
+    const modalImage = document.getElementById("modalImage");
+    const closeModal = document.getElementById("closeModal");
+
+    images.forEach((img) => {
+      img.addEventListener("click", function () {
+        modalImage.src = img.src;
+        modal.style.display = "flex";
+      });
+    });
+
+    closeModal.addEventListener("click", function () {
+      modal.style.display = "none";
+    });
+
+    // Close the modal when clicking outside the image
+    modal.addEventListener("click", function (event) {
+      if (event.target === modal) {
+        modal.style.display = "none";
+      }
+    });
+  }
+
   const renderMermaid = async () => {
     const mermaidElements = document.querySelectorAll(".language-mermaid");
     if (mermaidElements.length > 0) {
@@ -80,6 +106,8 @@ document.addEventListener("DOMContentLoaded", () => {
     updateContent(renderedHtml);
     saveContentToLocalStorage(renderedHtml);
 
+    initializeImageModal();
+
     renderMermaid();
 
     if (section) {