page.css, page.js: make test sections togglable

jedahu · Dec 12, 2011 · a681311 · a681311
1 parent b435e97
commit a681311
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/resources/page.css b/resources/page.css
@@ -135,3 +135,30 @@ div#outline > ol > li > a:visited
 {
   color: #535388;
 }
+
+div.test
+{
+  border-left: #9393aa 1px dotted;
+  margin-left: -10px;
+  padding-left: 9px;
+}
+
+div.test-toggle
+{
+  position: absolute;
+  margin-left: -1em;
+  width: 1em;
+  font-size: 0.8em;
+  font-weight: bold;
+  color: #9393aa;
+  cursor: pointer;
+}
+
+div#master-toggle
+{
+  margin-left: -1em;
+  font-size: 0.8em;
+  font-weight: bold;
+  color: #9393aa;
+  cursor: pointer;
+}
diff --git a/resources/page.js b/resources/page.js
@@ -26,6 +26,47 @@ function me_panzoo_story_setup() {
 
   var h1s = document.getElementsByTagName('h1');
   if (h1s.length > 0) document.title = h1s[0].innerText;
+
+// Test code is hidden by default.
+  var makeToggle = function(test) {
+    var x = document.createElement('div');
+    x.setAttribute('class', 'test-toggle');
+    x.style.display = 'block';
+    x.innerText = '?';
+    x.onclick = function() {
+      if (test.style.display == 'none') {
+        test.style.display = 'block';
+      } else {
+        test.style.display = 'none';
+      }
+    };
+    return x;
+  };
+  var tests = document.querySelectorAll('div.test');
+  for (var i = 0; i < tests.length; ++i) {
+    console.log('test', i, tests[i]);
+    var test = tests[i];
+    var tog = makeToggle(test);
+    test.style.display = 'none';
+    test.parentNode.insertBefore(tog, test);
+  }
+
+// A master toggle is created if there is more than one test section.
+  if (tests.length > 1) {
+    var masterTog = document.createElement('div');
+    masterTog.setAttribute('id', 'master-toggle');
+    masterTog.innerText = '? show all';
+    masterTog.onclick = function() {
+      var show = masterTog.innerText == '? show all';
+      var display = show ? 'block' : 'none';
+      masterTog.innerText = show ? '? hide all' : '? show all';
+      for (var i = 0; i < tests.length; ++i) {
+        tests[i].style.display = display;
+      }
+    };
+    var e = document.querySelector('h1').nextSibling;
+    e.parentNode.insertBefore(masterTog, e);
+  }
 }
 
 me_panzoo_story_setup();