Allow showing only some rows in extramethods
authorAryeh Gregor <AryehGregor+gitcommit@gmail.com>
Thu, 23 Jun 2011 15:33:14 -0600
changeset 319 3d219108571e
parent 318 6bbae37e774b
child 320 2bf923bb4eaf
Allow showing only some rows in extramethods

When I hide "enabled" there are still a few niggling extra pixels of
height I should fix.
extramethods.html
--- a/extramethods.html	Thu Jun 23 14:53:12 2011 -0600
+++ b/extramethods.html	Thu Jun 23 15:33:14 2011 -0600
@@ -1,9 +1,9 @@
 <!doctype html>
 <meta charset=utf-8>
 <title>Auto-running queryCommand*() tests</title>
+<!-- @{ -->
 <link rel=stylesheet href=tests.css>
 <style>
-#toolbar { display: none }
 body > div > table > tbody > tr { display: table-row !important }
 .yes, .no, .maybe { font-size: 1em }
 body > div > table > tbody > tr > td,
@@ -32,13 +32,63 @@
 <h1>Table of Contents</h1>
 <ul>
 </ul>
-
 <script src=implementation.js></script>
 <script src=tests.js></script>
+<!-- @} -->
 <script>
 "use strict";
+// Let's have a more useful toolbar
+//@{
+document.querySelector("#toolbar").innerHTML = '<label><input id=enabled-checkbox type=checkbox checked onclick="updateDisplayedRows()"> Display enabled</label>'
+	+ '<label><input id=indeterm-checkbox type=checkbox checked onclick="updateDisplayedRows()"> Display indeterminate</label>'
+	+ '<label><input id=state-checkbox type=checkbox checked onclick="updateDisplayedRows()"> Display state</label>'
+	+ '<label><input id=value-checkbox type=checkbox checked onclick="updateDisplayedRows()"> Display value</label>'
+	+ '<style id=row-hider></style>';
+
+// Number of rows to display per entry
+var rowCount;
+
+function updateDisplayedRows() {
+	var enabled = document.querySelector("#enabled-checkbox").checked;
+	var indeterm = document.querySelector("#indeterm-checkbox").checked;
+	var state = document.querySelector("#state-checkbox").checked;
+	var value = document.querySelector("#value-checkbox").checked;
+
+	rowCount = Number(enabled) + Number(indeterm) + Number(state) + Number(value);
+	var boxes = document.querySelectorAll("#toolbar input");
+	var hiddenRows = [];
+	for (var i = 0; i < boxes.length; i++) {
+		// Don't let the user uncheck the last box
+		boxes[i].disabled = rowCount == 1 && boxes[i].checked;
+		if (!boxes[i].checked) {
+			hiddenRows.push(i);
+		}
+	}
+
+	var hideCss = "";
+	if (hiddenRows.length) {
+		for (var i = 0; i < hiddenRows.length; i++) {
+			if (hiddenRows[i] == 0) {
+				hideCss += "body > div > table > tbody > tr:nth-child(4n + 2) > :not(:first-child), ";
+			} else {
+				hideCss += "body > div > table > tbody > tr:nth-child(4n + " + ((hiddenRows[i] + 2) % 4) + "):not(:first-child), ";
+			}
+		}
+		hideCss = hideCss.replace(/, $/, "");
+		hideCss += " { display: none !important }";
+	}
+	document.querySelector("#row-hider").textContent = hideCss;
+
+	var cells = document.querySelectorAll("[rowspan]");
+	for (var i = 0; i < cells.length; i++) {
+		cells[i].rowSpan = 1 + Number(indeterm) + Number(state) + Number(value);
+	}
+}
+updateDisplayedRows();
+//@}
 // Set up all the HTML automatically so I can add new commands to test without
 // copy-pasting in five places
+//@{
 (function() {
 	var toc = document.querySelector("ul");
 	for (var command in tests) {
@@ -57,8 +107,10 @@
 		document.body.appendChild(div);
 	}
 })();
+//@}
 
 function runTests(command) {
+//@{
     var runTestsButton = document.querySelector("#" + command + " button");
     if (runTestsButton.textContent != "Run tests") {
         return;
@@ -88,8 +140,10 @@
 
 	document.querySelector("#" + command).scrollIntoView();
 }
+//@}
 
 function addTest(command) {
+//@{
 	var tr = doSetup("#" + command + " > table", 0);
 
 	var test;
@@ -128,8 +182,10 @@
 	inputCell.firstChild.innerHTML = test;
 	inputCell.lastChild.textContent = inputCell.firstChild.innerHTML;
 }
+//@}
 
 function compareMethods(tr, command, points, label, specFn, browserFn) {
+//@{
 	var labelCell = document.createElement("th");
 	labelCell.textContent = label;
 	tr.appendChild(labelCell);
@@ -194,4 +250,7 @@
 		sameCell.textContent = "\u2717";
 	}
 }
+//@}
 </script>
+<!-- vim: [email protected]{,@} foldmethod=marker
+-->