zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-20 23:51:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

js: Convert menus to use semantically appropriate HTML elements

Browse Source 
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.
This commit is contained in:
Ben Harris
2022-10-18 09:38:37 +01:00
parent 22c4cad50e
commit 60d2bf5930
3 changed files with 88 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
emccpre.js
View File

@ -126,15 +126,17 @@ var dlg_return_funcs = null;
var dlg_return_sval, dlg_return_ival;
// 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().
var gametypelist = null, gametypeitems = [];
var gametypeselectedindex = null;
// the sub-lists inside it. Used by js_add_preset().
var gametypelist = null;
var gametypesubmenus = [];
// C entry point for miscellaneous events.
var command;
// The <form> encapsulating the menus. Used by
// js_get_selected_preset() and js_select_preset().
var menuform = null;
// The two anchors used to give permalinks to the current puzzle. Used
// by js_update_permalinks().
var permalink_seed, permalink_desc;
@ -187,10 +189,7 @@ function canvas_mouse_coords(event, element) {
// Enable and disable items in the CSS menus.
function disable_menu_item(item, disabledFlag) {
if (disabledFlag)
item.className = "disabled";
else
item.className = "";
item.disabled = disabledFlag;
}
// Dialog-box functions called from both C and JS.
@ -420,6 +419,7 @@ function initPuzzle() {
gametypelist = document.getElementById("gametype");
gametypesubmenus.push(gametypelist);
menuform = document.getElementById("gamemenu");
// In IE, the canvas doesn't automatically gain focus on a mouse
// click, so make sure it does