#browser td > a {
text-decoration: none;
}
-#browser .aside {
+#browser tr .aside {
font-size: 80%;
overflow: hidden;
height: 0;
-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,
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 {
:>
<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 (!$_) {
</div>
</div>
+<script src="/searchlocal.js"></script>
+<script> prependsearch(document.getElementById('intro')) </script>
+
--- /dev/null
+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);
+}
+