Skip to content

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>
Clone this wiki locally