ref: bc2c1f69fddac3a51d086fb379f0ec8954f4b894
parent: ce6e3df99bc7825d1c1638d378320375eb05fd0b
author: Simon Tatham <anakin@pobox.com>
date: Wed Apr 26 10:39:45 EDT 2017
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.)
--- a/emcc.c
+++ b/emcc.c
@@ -696,7 +696,7 @@
midend_redraw(me);
update_undo_redo();
js_focus_canvas();
- select_appropriate_preset(); /* sort out Custom/Customise */
+ select_appropriate_preset();
}
}
break;
--- a/emcclib.js
+++ b/emcclib.js
@@ -45,7 +45,7 @@
* provides neither presets nor configurability.
*/
js_remove_type_dropdown: function() {- document.getElementById("gametype").style.display = "none";+ gametypelist.style.display = "none";
},
/*
@@ -67,34 +67,35 @@
* index back to the C code when a selection is made.)
*
* The special 'Custom' preset is requested by passing NULL to
- * this function, rather than the string "Custom", since in that
- * case we need to do something special - see below.
+ * this function.
*/
js_add_preset: function(ptr) {- var name = (ptr == 0 ? "Customise..." : Pointer_stringify(ptr));
- var value = gametypeoptions.length;
+ var name = (ptr == 0 ? "Custom" : Pointer_stringify(ptr));
+ var value = gametypeitems.length;
- var option = document.createElement("option");- option.value = value;
- option.appendChild(document.createTextNode(name));
- gametypeselector.appendChild(option);
- gametypeoptions.push(option);
-
+ var item = document.createElement("li"); if (ptr == 0) {// The option we've just created is the one for inventing
// a new custom setup.
- gametypenewcustom = option;
- option.value = -1;
+ gametypecustom = item;
+ value = -1;
+ }
- // Now create another element called 'Custom', which will
- // be auto-selected by us to indicate the custom settings
- // you've previously selected. However, we don't add it to
- // the game type selector; it will only appear when the
- // user actually has custom settings selected.
- option = document.createElement("option");- option.value = -2;
- option.appendChild(document.createTextNode("Custom"));- gametypethiscustom = option;
+ item.setAttribute("data-index", value);+ var tick = document.createElement("span");+ tick.appendChild(document.createTextNode("\u2713"));+ tick.style.color = "transparent";
+ tick.style.paddingRight = "0.5em";
+ item.appendChild(tick);
+ item.appendChild(document.createTextNode(name));
+ gametypelist.appendChild(item);
+ gametypeitems.push(item);
+
+ item.onclick = function(event) {+ if (dlg_dimmer === null) {+ gametypeselectedindex = value;
+ command(2);
+ }
}
},
@@ -105,12 +106,7 @@
* dropdown.
*/
js_get_selected_preset: function() {- for (var i in gametypeoptions) {- if (gametypeoptions[i].selected) {- return gametypeoptions[i].value;
- }
- }
- return 0;
+ return gametypeselectedindex;
},
/*
@@ -121,34 +117,16 @@
* which turn out to exactly match a preset).
*/
js_select_preset: function(n) {- if (gametypethiscustom !== null) {- // Fiddle with the Custom/Customise options. If we're
- // about to select the Custom option, then it should be in
- // the menu, and the other one should read "Re-customise";
- // if we're about to select another one, then the static
- // Custom option should disappear and the other one should
- // read "Customise".
-
- if (gametypethiscustom.parentNode == gametypeselector)
- gametypeselector.removeChild(gametypethiscustom);
- if (gametypenewcustom.parentNode == gametypeselector)
- gametypeselector.removeChild(gametypenewcustom);
-
- if (n < 0) {- gametypeselector.appendChild(gametypethiscustom);
- gametypenewcustom.lastChild.data = "Re-customise...";
+ gametypeselectedindex = n;
+ for (var i in gametypeitems) {+ var item = gametypeitems[i];
+ var tick = item.firstChild;
+ if (item.getAttribute("data-index") == n) {+ tick.style.color = "inherit";
} else {- gametypenewcustom.lastChild.data = "Customise...";
+ tick.style.color = "transparent";
}
- gametypeselector.appendChild(gametypenewcustom);
- gametypenewcustom.selected = false;
}
-
- if (n < 0) {- gametypethiscustom.selected = true;
- } else {- gametypeoptions[n].selected = true;
- }
},
/*
@@ -192,8 +170,8 @@
* after a move.
*/
js_enable_undo_redo: function(undo, redo) {- undo_button.disabled = (undo == 0);
- redo_button.disabled = (redo == 0);
+ disable_menu_item(undo_button, (undo == 0));
+ disable_menu_item(redo_button, (redo == 0));
},
/*
--- a/emccpre.js
+++ b/emccpre.js
@@ -79,22 +79,11 @@
// 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 @@
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 @@
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
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -63,6 +63,129 @@
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>${puzzlename}, ${unfinishedtitlefragment}from Simon Tatham's Portable Puzzle Collection</title> <script type="text/javascript" src="${filename}.js"></script>+<style class="text/css">
+/* Margins and centring on the top-level div for the game menu */
+#gamemenu { margin-top: 0; margin-bottom: 0.5em; text-align: center }+
+/* Inside that div, the main menu bar and every submenu inside it is a <ul> */
+#gamemenu ul {+ list-style: none; /* get rid of the normal unordered-list bullets */
+ display: inline; /* make top-level menu bar items appear side by side */
+ position: relative; /* allow submenus to position themselves near parent */
+ margin: 0;
+ margin-bottom: 0.5em;
+ padding: 0;
+}
+
+/* Individual menu items are <li> elements within such a <ul> */
+#gamemenu ul li {+ /* Add a little mild text formatting */
+ font-weight: bold; font-size: 0.8em;
+ /* Line height and padding appropriate to top-level menu items */
+ padding-left: 0.75em; padding-right: 0.75em;
+ padding-top: 0.2em; padding-bottom: 0.2em;
+ margin: 0;
+ /* Make top-level menu items appear side by side, not vertically stacked */
+ display: inline;
+ /* Suppress the text-selection I-beam pointer */
+ cursor: default;
+ /* Surround each menu item with a border. The left border is removed
+ * because it will abut the right border of the previous item. (A rule
+ * below will reinstate the left border for the leftmost menu item.) */
+ border-left: 0;
+ border-right: 1px solid rgba(0,0,0,0.3);
+ border-top: 1px solid rgba(0,0,0,0.3);
+ border-bottom: 1px solid rgba(0,0,0,0.3);
+}
+
+#gamemenu ul li.disabled {+ /* Grey out menu items with the "disabled" class */
+ color: rgba(0,0,0,0.5);
+}
+
+#gamemenu ul li:first-of-type {+ /* Reinstate the left border for the leftmost top-level menu item */
+ border-left: 1px solid rgba(0,0,0,0.3);
+}
+
+#gamemenu ul li:hover {+ /* When the mouse is over a menu item, highlight it */
+ background: rgba(0,0,0,0.3);
+ /* Set position:relative, so that if this item has a submenu it can
+ * position itself relative to the parent item. */
+ position: relative;
+}
+
+#gamemenu ul li.disabled:hover {+ /* Disabled menu items don't get a highlight on mouse hover */
+ background: inherit;
+}
+
+#gamemenu ul ul {+ /* Second-level menus and below are not displayed by default */
+ display: none;
+ /* When they are displayed, they are positioned immediately below
+ * their parent <li>, and with the left edge aligning */
+ position: absolute;
+ top: 100%;
+ left: 0;
+ /* We must specify an explicit background colour for submenus, because
+ * they must be opaque (don't want other page contents showing through
+ * them). */
+ background: white;
+ /* And make sure they appear in front. */
+ z-index: 1;
+}
+
+#gamemenu ul ul.left {+ /* A second-level menu with class "left" aligns its right edge with
+ * its parent, rather than its left edge */
+ left: inherit; right: 0;
+}
+
+/* Menu items in second-level menus and below */
+#gamemenu ul ul li {+ /* Go back to vertical stacking, for drop-down submenus */
+ display: block;
+ /* Inhibit wrapping, so the submenu will expand its width as needed. */
+ white-space: nowrap;
+ /* Override the text-align:center from above */
+ text-align: left;
+ /* Don't make the text any smaller than the previous level of menu */
+ font-size: 100%;
+ /* This time it's the top border that we omit on all but the first
+ * element in the submenu, since now they're vertically stacked */
+ border-left: 1px solid rgba(0,0,0,0.3);
+ border-right: 1px solid rgba(0,0,0,0.3);
+ border-top: 0;
+ border-bottom: 1px solid rgba(0,0,0,0.3);
+}
+
+#gamemenu ul ul li:first-of-type {+ /* Reinstate top border for first item in a submenu */
+ border-top: 1px solid rgba(0,0,0,0.3);
+}
+
+#gamemenu ul ul ul {+ /* Third-level submenus are drawn to the side of their parent menu
+ * item, not below it */
+ top: 0; left: 100%;
+}
+
+#gamemenu ul ul ul.left {+ /* A submenu with class "left" goes to the left of its parent,
+ * not the right */
+ left: inherit; right: 100%;
+}
+
+#gamemenu ul li:hover > ul {+ /* Last but by no means least, the all-important line that makes
+ * submenus be displayed! Any <ul> whose parent <li> is being
+ * hovered over gets display:block overriding the display:none
+ * from above. */
+ display: block;
+}
+</style>
</head>
<body onLoad="initPuzzle();">
<h1 align=center>${puzzlename}</h1>@@ -73,16 +196,15 @@
<hr>
<div id="puzzle" style="display: none">
-<p align=center>
- <input type="button" id="new" value="New game">
- <input type="button" id="restart" value="Restart game">
- <input type="button" id="undo" value="Undo move">
- <input type="button" id="redo" value="Redo move">
- <input type="button" id="solve" value="Solve game">
- <input type="button" id="specific" value="Enter game ID">
- <input type="button" id="random" value="Enter random seed">
- <select id="gametype"></select>
-</p>
+<div id="gamemenu"><ul><li id="new">New game</li
+><li id="restart">Restart game</li
+><li id="undo">Undo move</li
+><li id="redo">Redo move</li
+><li id="solve">Solve game</li
+><li id="specific">Enter game ID</li
+><li id="random">Enter random seed</li
+><li>Select game type<ul id="gametype" class="left"></ul></li
+></ul></div>
<div align=center>
<div id="resizable" style="position:relative; left:0; top:0">
<canvas style="display: block" id="puzzlecanvas" width="1px" height="1px" tabindex="1">