Implement content filtering.

This adds a search bar at the top which filters the results on the
current page.

apaxy/theme/apaxy.js

@@ -1,5 +1,3 @@
-// grab the 2nd child and add the parent class. tr:nth-child(2)
-document.getElementsByTagName('tr')[1].className = 'parent';
 // fix links when not adding a / at the end of the URI
 var uri = window.location.pathname.substr(1);
 if (uri.substring(uri.length - 1) !== '/') {
@@ -10,3 +8,70 @@ if (uri.substring(uri.length - 1) !== '/') {
     a.href = '/' + a.getAttribute('href', 2);
   }
 }
+
+// content filtering, based on "light javascript table filter" by Chris Coyier
+// https://codepen.io/chriscoyier/pen/tIuBL - MIT License
+(function(document) {
+	'use strict';
+
+	var TableFilter = (function(Arr) {
+
+		// the search bar element
+		var _input;
+
+		// find all rows of all tables and call _filter on them
+		function _onInputEvent(e) {
+			_input = e.target;
+			var tables = document.getElementsByTagName('table');
+			Arr.forEach.call(tables, function(table) {
+				Arr.forEach.call(table.tBodies, function(tbody) {
+					Arr.forEach.call(tbody.rows, _filter);
+				});
+			});
+		}
+
+		// show or hide a row based on the value of _input
+		function _filter(row) {
+			// skip "special" rows
+			if (row.className.indexOf('indexhead') != -1 || row.className.indexOf('parent') != -1) {
+				return;
+			}
+
+			// only check the 'name' field
+			var text = row.getElementsByTagName('td')[1].textContent.toLowerCase();
+			var val = _input.value.toLowerCase();
+
+			// change display type to show / hide this row
+			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
+		}
+
+		return {
+			init: function() {
+				// grab the 1st child and add the indexhead class. tr:nth-child(1)
+				var row = document.getElementsByTagName('tr')[0];
+				// some versions of apache already add this class
+				if (row !== null && row.className.indexOf('indexhead') == -1) {
+					row.className += ' indexhead';
+				}
+
+				// grab the 2nd child and add the parent class. tr:nth-child(2)
+				row = document.getElementsByTagName('tr')[1];
+				// when apaxy is installed at doc root, there is no "parent directory" row
+				if (row !== null && row.getElementsByTagName('td')[1].textContent === 'Parent Directory') {
+					row.className += ' parent';
+				}
+
+				// find the search box and bind the input event
+				document.getElementById('filter').oninput = _onInputEvent;
+			}
+		};
+
+	})(Array.prototype);
+
+	document.addEventListener('readystatechange', function() {
+		if (document.readyState === 'complete') {
+			TableFilter.init();
+		}
+	});
+
+})(document);

apaxy/theme/header.html

@@ -1,2 +1,4 @@
 <div class="wrapper">
 <!-- we open the `wrapper` element here, but close it in the `footer.html` file -->
+
+<input type="search" id="filter" placeholder="filter contents" />

apaxy/theme/style.css

@@ -64,6 +64,22 @@ a:hover {
   max-width: 80%;
 }
 
+/*------------------------------------*\
+    Filter (search box)
+\*------------------------------------*/
+#filter {
+        float: right;
+        font-size:.75em;
+        padding: .5em;
+        margin-bottom: .5em;
+        border: 1px solid #aaa;
+        border-radius: .25em;
+        width: 10em;
+        transition: width 0.25s ease;
+}
+#filter:focus {
+        width: 14em;
+}
 /*------------------------------------*\
     Demo block
 \*------------------------------------*/