MediaWiki:Gadget-DropdownFilter.js

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

for (i; i < dropdown.options.length; i++) { html += "" + dropdown.options[i][0] + " "; }

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