Javascript puzzles: switch to a CSS-based drop-down system.

The previous control buttons and dropdowns based on form elements were
always a bit ugly: partly in a purely visual sense, and partly because
of the nasty bodge I had to do with splitting the usual 'Custom' game
type menu item into two (to get round the fact that if an element of a
<select> is already selected, browsers won't send an event when it's
re-selected). Also, I'm about to want to introduce hierarchical
submenus in the Type menu, and <select> doesn't support that at all.

So here's a replacement system which does everything by CSS
properties, including the popping-up of menus when the mouse moves
over their parent menu item. (Thanks to the Internet in general for
showing me how that trick is done.)

1 files changed, 13 insertions, 20 deletions

diff --git a/emccpre.js b/emccpre.js
index ebf67d1..b10bf29 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -79,22 +79,11 @@ var dlg_return_funcs = null;
 // pass back the final value in each dialog control.
 var dlg_return_sval, dlg_return_ival;
 
-// The <select> object implementing the game-type drop-down, and a
-// list of the <option> objects inside it. Used by js_add_preset(),
+// The <ul> object implementing the game-type drop-down, and a list of
+// the <li> objects inside it. Used by js_add_preset(),
 // js_get_selected_preset() and js_select_preset().
-//
-// gametypethiscustom is an option which indicates some custom game
-// params you've already set up, and which will be auto-selected on
-// return from the customisation dialog; gametypenewcustom is an
-// option which you select to indicate that you want to bring up the
-// customisation dialog and select a new configuration. Ideally I'd do
-// this with just one option serving both purposes, but instead we
-// have to do this a bit oddly because browsers don't send 'onchange'
-// events for a select element if you reselect the same one - so if
-// you've picked a custom setup and now want to change it, you need a
-// way to specify that.
-var gametypeselector = null, gametypeoptions = [];
-var gametypethiscustom = null, gametypehiddencustom = null;
+var gametypelist = null, gametypeitems = [], gametypecustom = null;
+var gametypeselectedindex = null;
 
 // The two anchors used to give permalinks to the current puzzle. Used
 // by js_update_permalinks().
@@ -131,6 +120,14 @@ function relative_mouse_coords(event, element) {
             y: event.pageY - ecoords.y};
 }
 
+// Enable and disable items in the CSS menus.
+function disable_menu_item(item, disabledFlag) {
+    if (disabledFlag)
+        item.className = "disabled";
+    else
+        item.className = "";
+}
+
 // Init function called from body.onload.
 function initPuzzle() {
     // Construct the off-screen canvas used for double buffering.
@@ -232,11 +229,7 @@ function initPuzzle() {
             command(9);
     };
 
-    gametypeselector = document.getElementById("gametype");
-    gametypeselector.onchange = function(event) {
-        if (dlg_dimmer === null)
-            command(2);
-    };
+    gametypelist = document.getElementById("gametype");
 
     // In IE, the canvas doesn't automatically gain focus on a mouse
     // click, so make sure it does