From ff13359d0999d7b29d1326bc3bf63008821f53b6 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 6 Dec 2010 03:15:41 +0100
Subject: [PATCH] browser: local search form

Optional script to facilitate finding (hidden) page contents;
highlight input, filter on submit, button to toggle.
---
 base.css       | 17 ++++++++++++++--
 browser.plp    |  5 ++++-
 searchlocal.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 searchlocal.js

diff --git a/base.css b/base.css
index 4a7fad5..7a21feb 100644
--- a/base.css
+++ b/base.css
@@ -558,7 +558,7 @@ ul.legend-set li {
 #browser td > a {
 	text-decoration: none;
 }
-#browser .aside {
+#browser tr .aside {
 	font-size: 80%;
 	overflow: hidden;
 	height: 0;
@@ -567,7 +567,7 @@ ul.legend-set li {
 	-moz-transition: all 1s ease-in;
 	transition: height 1s ease-in;
 }
-#browser .aside p {
+#browser tr .aside p {
 	margin: 1ex 0;
 }
 #browser tr.target .aside,
@@ -578,6 +578,19 @@ ul.legend-set li {
 	white-space: nowrap; /* some browsers break on dashes */
 }
 
+#browser tr.focus > td:first-of-type {
+	background: inherit;
+}
+#browser tr.focus > td {
+	border-bottom-color: #000;
+}
+
+form.aside {
+	position: absolute;
+	top: 3ex;
+	right: 1em;
+}
+
 /* printing hints */
 
 @page {
diff --git a/browser.plp b/browser.plp
index 0531e6d..ec7e368 100644
--- a/browser.plp
+++ b/browser.plp
@@ -16,7 +16,7 @@ Html({
 :>
 <h1>Browser compatibility</h1>
 
-<p>Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> page<:
+<p id="intro">Alternate view of Fyrd's <a href="http://caniuse.com/">when can I use...</a> page<:
 my ($canihas, $usage);
 given ($get{usage} // 'wm') {
 	when (!$_) {
@@ -292,3 +292,6 @@ sub showversions {
 	</div>
 </div>
 
+<script src="/searchlocal.js"></script>
+<script> prependsearch(document.getElementById('intro')) </script>
+
diff --git a/searchlocal.js b/searchlocal.js
new file mode 100644
index 0000000..4de1423
--- /dev/null
+++ b/searchlocal.js
@@ -0,0 +1,54 @@
+function filtertable(query, action) {
+	var rows = document.getElementsByTagName('TBODY')[0].rows;
+	for (var i = 0; i < rows.length; i++) {
+		var keep = rows[i].cells[1].textContent.match(query, query.match(/[A-Z]/) ? '' : 'i');
+		switch (action) {
+			case 'focus':
+				rows[i].classList[keep ? 'add' : 'remove'](action);
+				break;
+			case 'target':
+				if (keep) rows[i].classList.toggle(action);
+				break;
+			case 'filter':
+				rows[i].style.display = keep ? '' : 'none';
+				// continue
+			default: // reset
+				rows[i].classList.remove('focus');
+				rows[i].classList.remove('target');
+		}
+	}
+}
+
+function newelement(tagname, attrlist, childlist) {
+	if (!attrlist) return document.createTextNode(tagname);
+	var el = document.createElement(tagname);
+	for (var name in attrlist)
+		el.setAttribute(name, attrlist[name]);
+	if (childlist) for (var i = 0; i < childlist.length; i++)
+		el.appendChild(childlist[i]);
+	return el;
+}
+
+function prependsearch(target) {
+	target.parentNode.insertBefore(newelement(
+		'form', {
+			id: 'search',
+			class: 'aside',
+			onsubmit: "filtertable(this.q.value, 'filter'); this.q.value = ''; return false",
+		},
+		[
+			newelement('input', {
+				type: 'search',
+				name: 'q',
+				onkeyup: "filtertable(this.value, this.value.length > 1 ? 'focus' : 'reset')",
+			}),
+			newelement('input', {
+				type: 'button',
+				value: 'toggle',
+				onclick: "filtertable(this.form.q.value, 'target')",
+			}),
+			newelement('input', {type:'submit', value:'filter'}),
+		]
+	), target);
+}
+
-- 
2.30.0