Widget:DropdownSelects/Mobile

// For hero main page filtering var elementsToFilter = {};

document.addEventListener('DOMContentLoaded', function {	// For hero main page filtering   elementsToFilter = document.getElementsByClassName("hero-filter-element");

createDropdownSelects; }, false);

function createDropdownSelects { var selectRowElement = document.getElementById("selectRowMobile"); selectRowElement.setAttribute("style", "padding: 10px;");

var colorSelect = document.getElementById('colorSelectDivMobile'); var weaponSelect = document.getElementById('weaponTypeSelectDivMobile'); var moveSelect = document.getElementById('moveTypeSelectDivMobile');

var spacer = "-- ";

colorSelect.innerHTML = "" + "" + "Color " + "".split(',').map(col => "" + col + " ").join('') + " ";   weaponSelect.innerHTML = "" + "" + "Weapon Type " + "".split(',').map(wep => "" + wep + " ").join('') + spacer + "".split(',').map(wc => "" + wc + " weapon ").join('') + " ";

moveSelect.innerHTML = "" + "" + "Movement Type " + "".split(',').map(mov => "" + mov + " ").join('') + " "; }

// Simpler filter function that also includes color function filterNew { var colorFilter = document.getElementById("colorSelectMobile").value; var weaponFilter = document.getElementById("weaponTypeSelectMobile").value; var moveFilter = document.getElementById("moveTypeSelectMobile").value;

// Go through all the hero grid icons for (var i = 0; i < elementsToFilter.length; i++) { // Retrieve the icon's weapon type var weaponProps = (elementsToFilter[i].getAttribute("data-weapon-props") || '').split(";"); var moveType = elementsToFilter[i].getAttribute("data-move-type");

var showRow = (!weaponFilter || weaponProps.indexOf(weaponFilter) > -1) && (!colorFilter || weaponProps.indexOf(colorFilter) > -1) && (!moveFilter || moveType == moveFilter);

// Apply the filter applyFilterAction(elementsToFilter[i], !showRow); } };

// This method handles the CSS changes if an icon/row matches the filter function applyFilterAction(element, applyFilter) { if (element.nodeName == "DIV") { element.style.opacity = applyFilter ? "0.2" : "1";   }    else if (element.nodeName == "TR") { element.style.display = applyFilter ? "none" : "table-row"; } }