zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 08:01:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.)
This commit is contained in:
Simon Tatham
2017-04-26 14:39:45 +01:00
parent ce6e3df99b
commit bc2c1f69fd
4 changed files with 179 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
emccpre.js
View File

@ -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