js: Convert menus to use semantically appropriate HTML elements

Presets are now radio buttons with labels, and menu items that take
actions are now buttons.  The <li> representing each menu item is now a
thin wrapper around another element: a <label> for radio buttons, a
<button> for other buttons, and a <div> for submenu headings.  All of
the things that previously applied to the <li> now apply to that inner
element instead.

This means that presets can now use the standard "checked" attribute to
indicate which one is selected, and buttons can be disabled using the
standard "disabled" attribute.  It also means that we can query and set
the state of all the presets at once through their RadioNodeList.

I think this should also make the menus more accessible, and make it
easier to make them keyboard-controllable.

1 files changed, 16 insertions, 23 deletions

diff --git a/emcclib.js b/emcclib.js
index 8da9dba..036caf3 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -70,18 +70,19 @@ mergeInto(LibraryManager.library, {
     js_add_preset: function(menuid, ptr, value) {
         var name = UTF8ToString(ptr);
         var item = document.createElement("li");
-        item.setAttribute("data-index", value);
-        var tick = document.createElement("span");
+        var label = document.createElement("label");
+        var tick = document.createElement("input");
+        tick.type = "radio";
         tick.className = "tick";
-        tick.appendChild(document.createTextNode("\u2713"));
-        item.appendChild(tick);
-        item.appendChild(document.createTextNode(name));
+        tick.name = "preset";
+        tick.value = value;
+        label.appendChild(tick);
+        label.appendChild(document.createTextNode(name));
+        item.appendChild(label);
         gametypesubmenus[menuid].appendChild(item);
-        gametypeitems.push(item);
 
-        item.onclick = function(event) {
+        tick.onclick = function(event) {
             if (dlg_dimmer === null) {
-                gametypeselectedindex = value;
                 command(2);
             }
         }
@@ -100,13 +101,14 @@ mergeInto(LibraryManager.library, {
         // We still create a transparent tick element, even though it
         // won't ever be selected, to make submenu titles line up
         // nicely with their neighbours.
+        var label = document.createElement("div");
         var tick = document.createElement("span");
-        tick.appendChild(document.createTextNode("\u2713"));
         tick.className = "tick";
-        item.appendChild(tick);
-        item.appendChild(document.createTextNode(name));
+        label.appendChild(tick);
+        label.appendChild(document.createTextNode(name));
+        item.appendChild(label);
         var submenu = document.createElement("ul");
-        item.appendChild(submenu);
+        label.appendChild(submenu);
         gametypesubmenus[menuid].appendChild(item);
         var toret = gametypesubmenus.length;
         gametypesubmenus.push(submenu);
@@ -120,7 +122,7 @@ mergeInto(LibraryManager.library, {
      * dropdown.
      */
     js_get_selected_preset: function() {
-        return gametypeselectedindex;
+        return menuform.elements["preset"].value;
     },
 
     /*
@@ -131,16 +133,7 @@ mergeInto(LibraryManager.library, {
      * which turn out to exactly match a preset).
      */
     js_select_preset: function(n) {
-        gametypeselectedindex = n;
-        for (var i in gametypeitems) {
-            var item = gametypeitems[i];
-            var tick = item.firstChild;
-            if (item.getAttribute("data-index") == n) {
-                tick.classList.add("selected");
-            } else {
-                tick.classList.remove("selected");
-            }
-        }
+        menuform.elements["preset"].value = n;
     },
 
     /*