diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 00000000..e15cde63 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,5 @@ +--- +layout: default +--- +{{ content }} + diff --git a/site/assets/companies-table.css b/site/assets/companies-table.css new file mode 100644 index 00000000..5343267f --- /dev/null +++ b/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; +} diff --git a/site/assets/companies-table.js b/site/assets/companies-table.js new file mode 100644 index 00000000..b3a2c201 --- /dev/null +++ b/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 = + ''; + headerCells[ 1 ].innerHTML = + ''; + headerCells[ 2 ].innerHTML = + ''; + + 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 = + '' + + websiteUrl + + ''; + } ); + + 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();