Browse Source

html: don't hard-code visible text in Javascript

Avoid hardcoding visible text in Javascript; this allows for a more
streamlined translation framework in the future.
H. Peter Anvin 2 years ago
parent
commit
aace5c216a
3 changed files with 24 additions and 16 deletions
  1. 7 1
      esp32/www/com/max80.css
  2. 16 14
      esp32/www/com/max80.js
  3. 1 1
      esp32/www/en/config.html

+ 7 - 1
esp32/www/com/max80.css

@@ -94,12 +94,18 @@ input[type=file] {
     font-family: "arial", "sans-serif";
     font-size: 80%;
 }
-button.show {
+button.show, button.hide {
     width: 6ch;
     padding: 0;
     margin: 0 0 0 1px;
     font-size: 70%;
 }
+button.show .hide {
+    display: none;
+}
+button.hide .show {
+    display: none;
+}
 button {
     width: 28ch;
     margin: 1em 1ch 1em 1ch;

+ 16 - 14
esp32/www/com/max80.js

@@ -18,9 +18,10 @@ function fetchconfig(url) {
 	.then(text => {
 	    var map = new Map();
 	    for (const c of text.split(/[\r\n]+/)) {
-		const eqs = c.indexOf("=");
-		if (eqs > 0) {
-		    map.set(c.slice(0, eqs), c.slice(eqs+1));
+		var m = c.match(/^\s*("(?:[^"]|"")*"|[^"]+)\s*=(.*)$/);
+		if (m) {
+		    var k = m[1].replaceAll(/(^"|"$|(")")/g, "$2");
+		    map.set(k, m[2]);
 		}
 	    }
 	    return map;
@@ -82,22 +83,25 @@ function loadform(form, url) {
 	.catch(() => {});
 }
 
-// Insert status data from a map
-function initstatus(map)
+// Replace HTML element contents with the contents of a map
+function fillin(map,html)
 {
     for (const [key,val] of map) {
 	var e = document.getElementById(key);
 	if (e) {
-	    e.innerText = val;
+	    if (html)
+		e.innerHTML = val;
+	    else
+		e.innerText = val;
 	}
     }
 }
 
-// Load status data
-function loaddata(url)
+// Load status or HTML data
+function load(url,html)
 {
     fetchconfig(url)
-	.then(map => { initdata(map) })
+	.then(map => { initdata(map,map) })
 	.catch(() => {});
 }
 
@@ -154,12 +158,10 @@ function enablebutton(id,on) {
 // Flip the status of an INPUT element between text and password
 function showpwd(id,me) {
     var pwd = getelem(id);
-    const was_visible = pwd.getAttribute('type') == 'text';
-    const new_type = was_visible ? 'password' : 'text';
-    const new_icon = was_visible ? 'show' : 'hide';
-
+    const now_visible = me.classList.toggle('hide');
+    me.classList.toggle('show',!now_visible);
+    const new_type = now_visible ? 'text' : 'password';
     pwd.setAttribute('type', new_type);
-    me.innerHTML = new_icon;
 }
 
 // Hack to include an HTML files. Sadly, does not support

+ 1 - 1
esp32/www/en/config.html

@@ -31,7 +31,7 @@
 	<div>
 	  <label for="wifi.psk">Network password (PSK):</label>
 	  <input class="mono" type="password" id="wifi.psk" name="wifi.psk" size="50" />
-	  <button type="button" class="show" onclick="showpwd('wifi.psk',this)">show</button>
+	  <button type="button" class="show" onclick="showpwd('wifi.psk',this)"><span class="show">show</span><span class="hide">hide</span></button>
 	</div>
       </fieldset>
       <fieldset>