-
Notifications
You must be signed in to change notification settings - Fork 90
Archive Filter functionality backed up code in event of wanting it back.
Joe Brady edited this page Jun 6, 2017
·
2 revisions
ARCHIVE.JS SNIPPETS
// set variables for HTML elements
var platformDropDown = document.getElementById("platform-dropdown");
var archiveTableBody = document.getElementById("archive-table-body");
var archiveContentArray = [];
// When releases page loads, run:
/* eslint-disable no-unused-vars */
function onArchiveLoad() {
/* eslint-enable no-unused-vars */
populateArchive(); // populate the Archive page
}
..............
// show the archive list and filter box, with fade-in animation
var archiveList = document.getElementById('archive-list');
archiveList.className = archiveList.className.replace( /(?:^|\s)hide(?!\S)/g , ' animated fadeIn ' );
var filterContainer = document.getElementById('filter-container');
filterContainer.className = filterContainer.className.replace( /(?:^|\s)hide(?!\S)/g , ' animated fadeIn ' );
// add a new entry to the platform filter drop-down list for each entry in the global 'platforms' array.
platforms.forEach(function(each) {
var op = new Option();
op.value = each.searchableName;
op.text = each.officialName;
platformDropDown.options.add(op);
});
// when the user selects a new platform filter, run the filterByPlatform function, passing in the value of the selection.
platformDropDown.onchange = function(){
filterByPlatform(this.value);
};
*/
}
// create an array that contains all of the drop-down list options, including 'ALL'.
function buildDropdownArray() {
var dropdownArray = [];
for (i = 0; i < platformDropDown.options.length; i++) {
dropdownArray.push(platformDropDown.options[i].value);
}
return dropdownArray;
}
*/
// filters the platform rows and release rows based on a selected platform.
// pass in the 'searchableName' value of an object in the 'platforms' array, e.g. X64_LINUX
function filterByPlatform(selection) {
var dropdownArray = buildDropdownArray(); // get an array of the items in the dropdown platform selector
var index = dropdownArray.indexOf(selection); // find the index number of the selected platform in this array
dropdownArray.splice(index, 1); // remove this selected platform from the array
var notSelectedArray = dropdownArray; // create a new 'not selected' array (for clarity only)
// if the first, default entry ('All', or equivalent) is selected...
if(index == 0){
var thisPlatformRowArray = document.getElementsByClassName("platform-row"); // create an array containing all of the platform rows
for (i = 0; i < thisPlatformRowArray.length; i++) {
thisPlatformRowArray[i].className = thisPlatformRowArray[i].className.replace( /(?:^|\s)hide(?!\S)/g , '' ); // un-hide all of these rows
}
var releaseRows = archiveTableBody.getElementsByClassName("release-row"); // create an array containing all of the release rows
for (i = 0; i < releaseRows.length; i++) {
releaseRows[i].className = releaseRows[i].className.replace( /(?:^|\s)hide(?!\S)/g , '' ); // un-hide all of these rows
}
}
// else, if a specific platform is selected...
else {
var thisPlatformRowArray = document.getElementsByClassName(selection); // create an array containing all of the selected platform's rows
for (i = 0; i < thisPlatformRowArray.length; i++) {
thisPlatformRowArray[i].className = thisPlatformRowArray[i].className.replace( /(?:^|\s)hide(?!\S)/g , '' ); // make sure that these rows are not hidden
}
notSelectedArray.splice(0, 1); // remove the first, default entry ('All', or equivalent) to leave just the platforms that have not been selected
// for each of the non-selected platforms...
notSelectedArray.forEach(function(thisPlatform) {
var thisPlatformRowArray = document.getElementsByClassName(thisPlatform); // create an array containing all of this platform's rows
for (i = 0; i < thisPlatformRowArray.length; i++) {
thisPlatformRowArray[i].className += " hide"; // hide all of the rows for this platform
}
});
var releaseRows = archiveTableBody.getElementsByClassName("release-row"); // create an array containing all of the release rows
// for each of the release rows...
for (i = 0; i < releaseRows.length; i++) {
var platformBox = releaseRows[i].getElementsByTagName("TD")[1]; // get the second <td> element in this row (the one that contains the platforms)
var numberOfPlatformRows = platformBox.getElementsByTagName("TR").length; // get the number of platform rows
var numberOfHiddenPlatformRows = platformBox.getElementsByClassName(" hide").length; // get the number of hidden platform rows
if(numberOfPlatformRows == numberOfHiddenPlatformRows) { // if ALL of the platform rows are hidden...
if(releaseRows[i].className.indexOf("hide") == -1){ // and if this release row isn't ALREADY hidden...
releaseRows[i].className += " hide"; // hide this release row
}
}
else { // else, if there is at least one visible platform row...
releaseRows[i].className = releaseRows[i].className.replace( /(?:^|\s)hide(?!\S)/g , '' ); // make sure that this release row isn't hidden
}
}
}
}
ARCHIVE.HANDLEBARS SNIPPET
<div id="filter-container" class="hide">
<h3 class="inline-block" style="margin: 2rem .5rem 1rem 0;">Filter by platform:</h3>
<select id="platform-dropdown">
<option value="ALL">All</option>
</select>
</div>
<div id="archive-list" class="hide">
<div id="pagination-container"></div>
<table class='archive-container'>
<tbody id='archive-table-body'></tbody>
</table>
</div>