browser: local search form

Optional script to facilitate finding (hidden) page contents;
highlight input, filter on submit, button to toggle.

diff --git a/base.css b/base.css
index 4a7fad55be9edf5a3ac5f742396a080c63fe56b9..7a21feb3bbafa0aa982c42a03c6ecf8c0b1331ac 100644 (file)
--- 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 0531e6d1f86c8d1ca1ad937526c23d20491b45fe..ec7e3688f84f59e28e11212b45afac11afd5ca41 100644 (file)
--- 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 (file)
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);
+}
+