keys: mode switches in page location hash

Maintain location history (reflecting current mode in url),
and refresh on reload to support browser navigation.

diff --git a/TODO b/TODO
index 6d2f341e823e924a8d7c16e966e2271cf3efaef5..4f444286c5015b3b568245d0b92347764923cf71 100644 (file)
--- a/TODO
+++ b/TODO
@@ -20,3 +20,4 @@
 - footer style option to top position/button?
 - top-left header (logo to root)?
   conflicts with Esc key positioning
+- /browser history

diff --git a/keys.js b/keys.js
index dba04a1426b05ee980b7f08262501064a5d1beac..e1b7038e197d66d298c5b04710b099de0bb38e97 100644 (file)
--- a/keys.js
+++ b/keys.js
@@ -1,4 +1,4 @@
-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 ? '^mode '+classname+'(?!\\w)' : '^(?!mode)';
        var rows = document.getElementById('rows').getElementsByTagName('TR');
@@ -13,12 +13,17 @@ function setmode(classname) {
                if (h3s[i].parentNode.style.display != 'block') continue;
                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));
+       setmode(location.hash.slice(1), true);
 }
 
 var keyfocus = undefined;