keys.js

   1 var basetitle = document.title;
   2
   3 function setmode(classname, restore) {
   4         // set style for each #rows>li>ul>li to display:none unless it matches classname
   5         var showclass = classname ? '^mode '+classname+'(?!\\w)' : '^(?!mode)';
   6         var rows = document.getElementById('rows').getElementsByTagName('TR');
   7         for (var i = 0; i < rows.length; i++) {
   8                 var el = rows[i];
   9                 el.style.display = el.className.match(showclass) ? 'block' : 'none';
  10         }
  11
  12         // update H2 to reflect the first part of a currently active (but hidden) row header
  13         var h3s = document.getElementsByTagName('TH');
  14         for (var i = 0; i < h3s.length; i++) {
  15                 if (h3s[i].parentNode.style.display != 'block') continue;
  16                 var header = h3s[i].firstChild.data;
  17                 document.getElementsByTagName('H2')[0].innerHTML = header;
  18                 document.title = basetitle + ': ' + header;
  19                 if (restore) break;
  20                 history.pushState(null, header, classname ? '#'+classname : '#');
  21                 break;
  22         }
  23 }
  24
  25 window.addEventListener('hashchange', function(e) {
  26         setmode(location.hash.slice(1), true);
  27 });
  28 if (location.hash) {
  29         setmode(location.hash.slice(1), true);
  30 }
  31
  32 var keyfocus = undefined;
  33 document.onkeypress = function(e) {
  34         var keylabels = document.getElementById('rows').getElementsByTagName('B');
  35         var keys = {};
  36         for (var i = 0; i < keylabels.length; i++) {
  37                 keys[keylabels[i].innerHTML] = keylabels[i].parentNode;
  38         }
  39         var input = e.charCode || e.keyCode;
  40
  41         // find key element matching input
  42         for (var i = 0; i < keylabels.length; i++) {
  43                 var key = keylabels[i].parentNode;
  44                 if (!key.onclick) continue; // link
  45                 var keychar = key.className.match(/ chr(\d+)$/);
  46                 if (!keychar) continue; // has code
  47                 keychar = keychar[1];
  48                 if (keychar != input) continue; // matches code
  49
  50                 // match mode (visibility)
  51                 var row = key.parentNode;
  52                 var shown = row.style.display != 'none';
  53                 if (!shown) continue;
  54
  55                 // match key modifiers
  56                 var keymod = row.className;
  57                 if ((keymod.search(/\bctrl\b/) != -1) != e.ctrlKey) continue;
  58                 if ((keymod.search(/\bmeta\b/) != -1) != e.altKey) continue;
  59
  60                 // select
  61                 if (keyfocus) keyfocus.style.outline = '';
  62                 key.style.outline = '1px solid red';
  63                 keyfocus = key;
  64                 if (key.onclick) key.onclick();
  65                 return false;
  66         }
  67 }