browser: local search form
authorMischa POSLAWSKY <perl@shiar.org>
Mon, 6 Dec 2010 02:15:41 +0000 (03:15 +0100)
committerMischa POSLAWSKY <perl@shiar.org>
Wed, 15 Dec 2010 21:40:44 +0000 (22:40 +0100)
Optional script to facilitate finding (hidden) page contents;
highlight input, filter on submit, button to toggle.

base.css
browser.plp
searchlocal.js [new file with mode: 0644]

index 4a7fad5..7a21feb 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 {
index 0531e6d..ec7e368 100644 (file)
@@ -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
@@ -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);
+}
+