From 8f143a6bacf02e012512b787175dcec72f73a834 Mon Sep 17 00:00:00 2001
From: Shish <shish@shishnet.org>
Date: Sat, 30 Dec 2023 03:45:21 +0000
Subject: [PATCH] [view] use vanilla JS to change info box edit/view modes

---
 ext/view/script.js | 13 +++++++++++++
 ext/view/style.css | 19 +++++++++----------
 ext/view/theme.php |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/ext/view/script.js b/ext/view/script.js
index 3c8799f3..8f780c04 100644
--- a/ext/view/script.js
+++ b/ext/view/script.js
@@ -6,7 +6,20 @@ function joinUrlSegments(base, query) {
     return base + separatorChar + query;
 }
 
+function clearViewMode() {
+	document.querySelectorAll('.image_info').forEach((element) => {
+		element.classList.remove('infomode-view');
+	});
+}
+
 document.addEventListener('DOMContentLoaded', () => {
+	// find elements with class image_info and set them to view mode
+	// (by default, with no js, they are in edit mode - so that no-js
+	// users can still edit them)
+	document.querySelectorAll('.image_info').forEach((element) => {
+		element.classList.add('infomode-view');
+	});
+
 	if(document.location.hash.length > 3) {
 		var query = document.location.hash.substring(1);
 
diff --git a/ext/view/style.css b/ext/view/style.css
index d7d7c2c0..b49fa7b9 100644
--- a/ext/view/style.css
+++ b/ext/view/style.css
@@ -1,15 +1,14 @@
-
-.js .image_info .edit {
-	display: none;
-}
-.js .image_info .view {
+.image_info .edit {
 	display: block;
 }
-
-.no-js .image_info .edit {
-	display: block;
-}
-.no-js .image_info .view {
+.image_info .view {
 	display: none;
 }
 
+.image_info.infomode-view .edit {
+	display: none;
+}
+.image_info.infomode-view .view {
+	display: block;
+}
+
diff --git a/ext/view/theme.php b/ext/view/theme.php
index 10706d4c..b2dc3583 100644
--- a/ext/view/theme.php
+++ b/ext/view/theme.php
@@ -97,7 +97,7 @@ class ViewImageTheme extends Themelet
         ) {
             $html .= "
 						<tr><td colspan='4'>
-							<input class='view' type='button' value='Edit' onclick='$(\".view\").hide(); $(\".edit\").show();'>
+							<input class='view' type='button' value='Edit' onclick='clearViewMode()'>
 							<input class='edit' type='submit' value='Set'>
 						</td></tr>
 			";