From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 15 Dec 2023 12:21:55 +0000 (+0000)
Subject: docs: Make image clickable to zoom in
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=ef963ecb3e000053f2d0081b5be479b89232ff84;p=ipfire.org.git

docs: Make image clickable to zoom in

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/backend/wiki.py b/src/backend/wiki.py
index d2a0b71d..cc5964d1 100644
--- a/src/backend/wiki.py
+++ b/src/backend/wiki.py
@@ -1,6 +1,7 @@
 #!/usr/bin/python3
 
 import difflib
+import hashlib
 import logging
 import os.path
 import re
@@ -620,20 +621,44 @@ class WikiRenderer(misc.Object):
 	def _render_image(self, m):
 		alt_text, url, caption = m.groups()
 
+		# Compute a hash over the URL
+		h = hashlib.new("md5")
+		h.update(url.encode())
+		id = h.hexdigest()
+
 		html = """
 			<div class="columns is-centered">
 				<div class="column is-8">
-					<figure class="image">
-						<img src="/docs%s" alt="%s">
-						<figcaption class="figure-caption">%s</figcaption>
+					<figure class="image modal-trigger" data-target="%(id)s">
+						<img src="/docs%(url)s" alt="%(caption)s">
+
+						<figcaption class="figure-caption">%(caption)s</figcaption>
 					</figure>
+
+					<div class="modal is-large" id="%(id)s">
+						<div class="modal-background"></div>
+
+						<div class="modal-content">
+							<p class="image">
+								<img src="/docs%(plain_url)s?s=1920" alt="%(caption)s"
+									loading="lazy">
+							</p>
+						</div>
+
+						<button class="modal-close is-large" aria-label="close"></button>
+					</div>
 				</div>
 			</div>
 		"""
 
 		# Skip any absolute and external URLs
 		if url.startswith("/") or url.startswith("https://") or url.startswith("http://"):
-			return html % (url, alt_text, caption or "")
+			return html % {
+				"caption"   : caption or "",
+				"id"        : id,
+				"plain_url" : url,
+				"url"       : url,
+			}
 
 		# Try to split query string
 		url, delimiter, qs = url.partition("?")
@@ -642,7 +667,7 @@ class WikiRenderer(misc.Object):
 		args = urllib.parse.parse_qs(qs)
 
 		# Build absolute path
-		url = self.backend.wiki.make_path(self.path, url)
+		plain_url = url = self.backend.wiki.make_path(self.path, url)
 
 		# Find image
 		file = self.backend.wiki.get_file_by_path(url)
@@ -657,7 +682,12 @@ class WikiRenderer(misc.Object):
 		if args:
 			url = "%s?%s" % (url, urllib.parse.urlencode(args))
 
-		return html % (url, caption, caption or "")
+		return html % {
+			"caption"   : caption or "",
+			"id"        : id,
+			"plain_url" : plain_url,
+			"url"       : url,
+		}
 
 	def render(self, text):
 		logging.debug("Rendering %s" % self.path)
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 735b8ddb..9a78cbf2 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -110,6 +110,13 @@ html, body
 		&:hover
 			color: $black
 
+.modal
+	&.is-large
+		.modal-content
+			+from($modal-breakpoint)
+				width: $widescreen
+				max-height: 100%
+
 // Used to wrap text on buttons
 .wrap-text
     height: max-content;
diff --git a/src/static/js/site.js b/src/static/js/site.js
index ab6e1f95..304ee96e 100644
--- a/src/static/js/site.js
+++ b/src/static/js/site.js
@@ -49,4 +49,47 @@ document.addEventListener('keydown', function(e) {
 	if (event.key === 'Esc' || event.key === 'Escape') {
 		closeDropdowns();
 	}
-});
\ No newline at end of file
+});
+
+// Modals
+document.addEventListener("DOMContentLoaded", () => {
+	function openModal($el) {
+		$el.classList.add("is-active");
+	}
+
+	function closeModal($el) {
+		$el.classList.remove("is-active");
+	}
+
+	function closeAllModals() {
+		(document.querySelectorAll(".modal") || []).forEach(($modal) => {
+			closeModal($modal);
+		});
+	}
+
+	// Add a click event on buttons to open a specific modal
+	(document.querySelectorAll(".modal-trigger") || []).forEach(($trigger) => {
+		const modal = $trigger.dataset.target;
+		const $target = document.getElementById(modal);
+
+		$trigger.addEventListener("click", () => {
+			openModal($target);
+		});
+	});
+
+	// Add a click event on various child elements to close the parent modal
+	(document.querySelectorAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button") || []).forEach(($close) => {
+		const $target = $close.closest(".modal");
+
+		$close.addEventListener("click", (e) => {
+			closeModal($target);
+		});
+	});
+
+	// Add a keyboard event to close all modals
+	document.addEventListener("keydown", (event) => {
+		if (event.code === "Escape") {
+			closeAllModals();
+		}
+	});
+});