mirror of
https://github.com/remoteintech/remote-jobs
synced 2024-12-27 04:43:09 +00:00
58b9cf57b0
* Improve logging messages * Make local development easier; improve docs * Combine page-specific CSS files into one This file is small, and later it will also contain styles that need to apply to the whole site. * Add "Edit this page on GitHub" links * Remove an unneeded element * Assign table cell classes during parsing This way it will work with JavaScript disabled too. * Match font weights with other styles * Always show hovered links in gray Before this change, already-visited links would stay red on hover. * Minor CSS tweaks * In main table, show company names in bold * Add mobile styles for companies table * Remove a couple more empty profile sections
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
function setupFilters() {
|
|
var table = document.querySelector( 'table#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 filterInput = document.createElement( 'input' );
|
|
filterInput.type = 'text';
|
|
filterInput.placeholder = 'Filter Companies';
|
|
filterInput.id = 'company-filter';
|
|
filterInput.setAttribute( 'class', 'company-filter' );
|
|
|
|
var companiesHeading = document.querySelector( 'h2#companies' );
|
|
companiesHeading.appendChild( filterInput );
|
|
|
|
var filtersExplanation = document.createElement( 'p' );
|
|
filtersExplanation.id = 'filters-explanation';
|
|
filtersExplanation.innerHTML = (
|
|
'Use the text box above to filter the list of companies, '
|
|
+ 'or click a column heading to sort by that column.'
|
|
);
|
|
table.parentNode.insertBefore( filtersExplanation, table );
|
|
|
|
window.tableFilter = new List(
|
|
'main', // element ID that contains everything
|
|
{
|
|
valueNames: [
|
|
'company-name',
|
|
'company-website',
|
|
'company-region'
|
|
],
|
|
searchClass: 'company-filter',
|
|
}
|
|
);
|
|
|
|
document.body.setAttribute(
|
|
'class',
|
|
document.body.getAttribute( 'class' ) + ' filters-enabled'
|
|
);
|
|
}
|
|
|
|
document.addEventListener( 'DOMContentLoaded', function( event ) {
|
|
setupFilters();
|
|
} );
|