|
|
(10 intermediate revisions by 2 users not shown) |
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
| |
| var elementsToFilter = {};
| |
|
| |
| var gameSelectOptions = '{ \
| |
| "name":"gameSelect",\
| |
| "attribute":"data-game",\
| |
| "options":[ \
| |
| ["Game", ""],\
| |
| ["BBCT", ""],\
| |
| ["BBCS", ""],\
| |
| ["BBCSEX", ""],\
| |
| ["BBCP", ""],\
| |
| ["BBCPEX", ""],\
| |
| ["BBCF", ""],\
| |
| ["BBTAG", ""]\
| |
| ]\
| |
| }';
| |
|
| |
| $(document).ready(function() {
| |
| // For filtering items
| |
| elementsToFilter = document.getElementsByClassName("filter-element");
| |
|
| |
| createDropdownSelects();
| |
| });
| |
|
| |
| function createDropdownSelects() {
| |
| var selectRowElement = document.getElementById("selectRow");
| |
| if (!selectRowElement) {
| |
| return;
| |
| }
| |
| selectRowElement.setAttribute("style", "padding: 6px;");
| |
|
| |
| var gameSelect = document.getElementById('gameSelectDiv');
| |
| createDropdownSelect(gameSelect, gameSelectOptions);
| |
| }
| |
|
| |
| function createDropdownSelect(dropdownDiv, optionList) {
| |
| var i = 0;
| |
| var dropdown = JSON.parse(optionList);
| |
| 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>";
| |
| }
| |
|
| |
| dropdownDiv.innerHTML += html;
| |
| }
| |
|
| |
| // Check each row to see if it is in the filter
| |
| // Filters only one dropdown
| |
| function filter(filterDiv, attribute) {
| |
| resetFiltersApplied();
| |
|
| |
| var filterValue = document.getElementById(filterDiv).value;
| |
|
| |
| // Go through all the hero grid icons
| |
| 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 an icon/row 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.opacity = "inline-block";
| |
| }
| |
| }
| |
| }
| |