X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/073e9b2bd8b8d0382c7142d27078a7fd198a75f6..e4a7c6505a32ed30e872bfab2b8cbf411e7a9b13:/keys.js

diff --git a/keys.js b/keys.js
index 650cb15..e1b7038 100644
--- a/keys.js
+++ b/keys.js
@@ -1,28 +1,31 @@
-function setmode(classname) {
+function setmode(classname, restore) {
 	// set style for each #rows>li>ul>li to display:none unless it matches classname
-	var showclass = classname ? ' '+classname+'(?!\\w)' : '^$';
-	var parentskip = /^keys/;
-	var row = document.getElementById('rows').firstChild;
-	do {
-		if (row.tagName == 'LI' && row.firstChild.tagName == 'UL'
-		&& !row.firstChild.className.match(parentskip)) {
-			var el = row.firstChild.firstChild;
-			if (el) do {
-				if (el.tagName == 'LI') {
-					el.style.display = el.className.match(showclass) ? 'block' : 'none';
-				}
-			} while (el = el.nextSibling);
-		}
-	} while (row = row.nextSibling);
+	var showclass = classname ? '^mode '+classname+'(?!\\w)' : '^(?!mode)';
+	var rows = document.getElementById('rows').getElementsByTagName('TR');
+	for (var i = 0; i < rows.length; i++) {
+		var el = rows[i];
+		el.style.display = el.className.match(showclass) ? 'block' : 'none';
+	}
 
-	// update H2 to reflect the first part of a currently active (but hidden) H3
-	var h3s = document.getElementsByTagName('H3');
+	// update H2 to reflect the first part of a currently active (but hidden) row header
+	var h3s = document.getElementsByTagName('TH');
 	for (var i = 0; i < h3s.length; i++) {
 		if (h3s[i].parentNode.style.display != 'block') continue;
-		document.getElementsByTagName('H2')[0].innerHTML = h3s[i].firstChild.data;
+		var header = h3s[i].firstChild.data;
+		document.getElementsByTagName('H2')[0].innerHTML = header;
+		if (restore) break;
+		history.pushState(null, header, classname ? '#'+classname : '#');
+		break;
 	}
 }
 
+window.addEventListener('hashchange', function(e) {
+	setmode(location.hash.slice(1), true);
+});
+if (location.hash) {
+	setmode(location.hash.slice(1), true);
+}
+
 var keyfocus = undefined;
 document.onkeypress = function(e) {
 	var keylabels = document.getElementById('rows').getElementsByTagName('B');
@@ -31,19 +34,27 @@ document.onkeypress = function(e) {
 		keys[keylabels[i].innerHTML] = keylabels[i].parentNode;
 	}
 	var input = e.charCode || e.keyCode;
+
+	// find key element matching input
 	for (var i = 0; i < keylabels.length; i++) {
 		var key = keylabels[i].parentNode;
-		if (!key.onclick) continue;
+		if (!key.onclick) continue; // link
 		var keychar = key.className.match(/ chr(\d+)$/);
-		if (!keychar) continue; // not enterable
+		if (!keychar) continue; // has code
 		keychar = keychar[1];
-		if (keychar != input) continue; // different key
-		var keymod = key.parentNode.className;
-		if ((keymod.search(/\bctrl\b/) != -1) != e.ctrlKey) continue; // modifier mismatch
-		if ((keymod.search(/\bmeta\b/) != -1) != e.altKey) continue;
-		var row = key.parentNode.parentNode;
+		if (keychar != input) continue; // matches code
+
+		// match mode (visibility)
+		var row = key.parentNode;
 		var shown = row.style.display != 'none';
-		if (!shown) continue; // foreign mode
+		if (!shown) continue;
+
+		// match key modifiers
+		var keymod = row.className;
+		if ((keymod.search(/\bctrl\b/) != -1) != e.ctrlKey) continue;
+		if ((keymod.search(/\bmeta\b/) != -1) != e.altKey) continue;
+
+		// select
 		if (keyfocus) keyfocus.style.outline = '';
 		key.style.outline = '1px solid red';
 		keyfocus = key;