keys.js

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