MediaWiki:Common.js

  /* Any JavaScript here will be loaded for all users on every page load. */

  /* 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";
      }
    }
  }