-function setmode(classname) {
+var basetitle = document.title;
+
+function setmode(classname, restore) {
// set style for each #rows>li>ul>li to display:none unless it matches classname
var showclass = classname ? '^mode '+classname+'(?!\\w)' : '^(?!mode)';
var rows = document.getElementById('rows').getElementsByTagName('TR');
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;
+ document.title = basetitle + ': ' + 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');
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
+ if (keychar != input) continue; // matches code
+
+ // match mode (visibility)
var row = key.parentNode;
+ var shown = row.style.display != 'none';
+ if (!shown) continue;
+
+ // match key modifiers
var keymod = row.className;
- if ((keymod.search(/\bctrl\b/) != -1) != e.ctrlKey) continue; // modifier mismatch
+ if ((keymod.search(/\bctrl\b/) != -1) != e.ctrlKey) continue;
if ((keymod.search(/\bmeta\b/) != -1) != e.altKey) continue;
- var shown = row.style.display != 'none';
- if (!shown) continue; // foreign mode
+
+ // select
if (keyfocus) keyfocus.style.outline = '';
key.style.outline = '1px solid red';
keyfocus = key;