|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */
| | /* 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";
| |
| }
| |
| }
| |
| }
| |
