Add simple frontend filtering (#419)

_layouts/home.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+{{ content }}
+<script type="text/javascript" src="/site/assets/companies-table.js"></script>

site/assets/companies-table.css

@@ -0,0 +1,43 @@
+.markdown-body table {
+	display: table !important;
+}
+
+table td.company-name {
+	width: 34%;
+}
+table td.company-website {
+	width: 33%;
+}
+table td.company-region {
+	width: 33%;
+}
+
+#company-filter {
+	margin: 0 16px;
+	font-weight: normal;
+	font-size: 16px;
+	vertical-align: text-top;
+}
+
+/* Sort indicators adapted from http://listjs.com/examples/table/ */
+
+.sort.asc:after,
+.sort.desc:after {
+	width: 0;
+	height: 0;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	content:"";
+	display: inline-block;
+	position: relative;
+	left: 3px;
+	top: -1px;
+}
+
+.sort.asc:after {
+	border-bottom: 6px solid #000;
+}
+
+.sort.desc:after {
+	border-top: 6px solid #000;
+}

site/assets/companies-table.js

@@ -0,0 +1,98 @@
+function headAppendChild( node ) {
+	var head = document.head || document.getElementsByTagName( 'head' )[ 0 ];
+	head.appendChild( node );
+}
+
+function loadScript( src, callback ) {
+	var script = document.createElement( 'script' );
+	script.src = src;
+	script.async = false;
+	if ( typeof callback === 'function' ) {
+		script.addEventListener( 'load', callback );
+	}
+
+	headAppendChild( script );
+}
+
+function loadStylesheet( src ) {
+	var link = document.createElement( 'link' );
+	link.type = 'text/css';
+	link.rel = 'stylesheet';
+	link.href = src;
+
+	headAppendChild( link );
+}
+
+function maybeSetupFilters() {
+	// Get the main site URL from the link at the top of each page
+	var rootUrl = document.querySelector( 'body > div.markdown-body > h1 > a' ).href;
+	// If we're not on the main page, no need to do anything
+	if ( rootUrl !== document.location.href ) {
+		return;
+	}
+
+	loadStylesheet( '/site/assets/companies-table.css' );
+
+	loadScript(
+		'https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js',
+		setupFilters
+	);
+}
+
+function setupFilters() {
+	var table = document.querySelector( 'h2#companies + table' );
+
+	var headerCells = table.querySelectorAll( 'thead tr th' );
+	headerCells[ 0 ].innerHTML =
+		'<button class="sort" data-sort="company-name">Name</button>';
+	headerCells[ 1 ].innerHTML =
+		'<button class="sort" data-sort="company-website">Website</button>';
+	headerCells[ 2 ].innerHTML =
+		'<button class="sort" data-sort="company-region">Region</button>';
+
+	var tbody = table.querySelector( 'tbody' );
+	tbody.setAttribute( 'class', 'list' );
+
+	var bodyRows = Array.prototype.slice.call( tbody.querySelectorAll( 'tr' ) );
+	
+	bodyRows.forEach( function( tr ) {
+		var tds = tr.querySelectorAll( 'td' );
+		tds[ 0 ].setAttribute( 'class', 'company-name' );
+		tds[ 1 ].setAttribute( 'class', 'company-website' );
+		tds[ 2 ].setAttribute( 'class', 'company-region' );
+
+		var websiteUrl = tds[ 1 ].innerText.trim();
+		tds[ 1 ].innerHTML =
+			'<a href="' + websiteUrl + '"'
+			+ '_target="blank" rel="noopener noreferrer">'
+			+ websiteUrl
+			+ '</a>';
+	} );
+
+	var filterInput = document.createElement( 'input' );
+	filterInput.type = 'text';
+	filterInput.placeholder = 'Filter Companies';
+	filterInput.id = 'company-filter';
+	filterInput.setAttribute( 'class', 'company-filter' );
+
+	var companiesAnchorLink = document.querySelector( '#companies .anchorjs-link' );
+	companiesAnchorLink.parentNode.insertBefore( filterInput, companiesAnchorLink );
+	companiesAnchorLink.parentNode.removeChild( companiesAnchorLink );
+
+	document.querySelector( 'body > div.markdown-body' )
+		.setAttribute( 'id', 'company-list' );
+
+	window.tableFilter = new List(
+		'company-list',
+		{
+			valueNames: [
+				'company-name',
+				'company-website',
+				'company-region'
+			],
+			searchClass: 'company-filter',
+		}
+	);
+}
+
+maybeSetupFilters();