MediaWiki:Gadget-DropdownFilter.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* For filtering items with Template:DropdownFilter */

var elementsToFilter = {};

$(document).ready(function() {
  createDropdownSelects();
});

function createDropdownSelects() {
  var selectionParameters = document.getElementById("selectionOptions");
  var selectRowElement = document.getElementById("selectRow");
  if (!selectRowElement || !selectionParameters) {
      return;
  }
  selectRowElement.setAttribute("style", "padding: 6px;");

  var dropdownSelectionOptions = selectionParameters.innerHTML;
  createDropdownSelect(dropdownSelectionOptions);
}

function createDropdownSelect(optionList) {
  var i = 0;
  var dropdown = JSON.parse(optionList);

  /* read options from the JSON */
  var dropdownDiv = document.getElementById(dropdown.divID);
  elementsToFilter = document.getElementsByClassName(dropdown.applyToElementsWithThisClass);

  /* create the options to populate the dropdown with */
  var html = "<select id=\"" + dropdown.name + "\" name=\"" + dropdown.name + "\" class=\"form-control\" onchange=\"filter('" + dropdown.name + "','" + dropdown.attribute + "'" + ")\">";

  for (i; i < dropdown.options.length; i++) {
      html += "<option ";
      if (i === 0) {
          html += "selected=\"selected\"";
      }
      if (dropdown.options[i][1] !== "") {
        html +=  "disabled=\"" + dropdown.options[i][1] + "\"";
      }
      html += "value=\"" + dropdown.options[i][0] + "\">" 
           + dropdown.options[i][0] + "</option>";
  }

  /* populate the dropdown */
  dropdownDiv.innerHTML += html;
}

/* 
 * Called from the onChange() event of a select element.
 * Checks each row or element to see if its attribute contains at least one match with the selected value of the dropdown
 * Filters only one dropdown
 */
function filter(filterDiv, attribute) {  
  resetFiltersApplied();

  var filterValue = document.getElementById(filterDiv).value;

  if (!filterValue) /* selected option is undefined, so do nothing (rather than hiding everything) */ return;

  // Go through all of the items to filter through
  for (var i = 0; i < elementsToFilter.length; i++) {
    var data = elementsToFilter[i].getAttribute(attribute);
    var words = data.split(' ');
    
    var showRow = false;
    for (var w in words) {
      showRow = showRow || (words[w] == filterValue);
      // console.log(filterValue + " " + words[w] + " " + showRow);
    }
      
    // Apply the filter
    applyFilterAction(elementsToFilter[i], showRow);
  }
}

// This method handlecs the CSS changes if a div matches the filter
function applyFilterAction(element, applyFilter) {
  if (element.nodeName == "DIV") {
      if (!applyFilter) {
        element.style.display = "none";
      } else {
        element.style.display = "inline-block";
      }
  }
}

// Reset any filters applied to elements.
function resetFiltersApplied() {
  for (var i = 0; i < elementsToFilter.length; i++) {
    if (elementsToFilter[i].nodeName == "DIV") {
      elementsToFilter[i].style.display = "inline-block";
    }
  }
}