[view] use vanilla JS to change info box edit/view modes

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);
 

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;
+}
+

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>
 			";