Widget:DropdownSelects/NoColor

// 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("selectRow"); if (!selectRowElement) { return; }

selectRowElement.setAttribute("style", "padding: 6px;"); var weaponSelect = document.getElementById('weaponTypeSelectDiv'); var moveSelect = document.getElementById('moveTypeSelectDiv'); var spacer = "-- "; weaponSelect.innerHTML = "" + "" + "Weapon Type " + "Red Sword " + "Red Bow " + "Red Dagger " + "Red Tome " + "Red Breath " + "Red Beast " + "Blue Lance " + "Blue Bow " + "Blue Dagger " + "Blue Tome " + "Blue Breath " + "Blue Beast " + "Green Axe " + "<option value=\"Green Bow\">Green Bow " + "<option value=\"Green Dagger\">Green Dagger " + "<option value=\"Green Tome\">Green Tome " + "<option value=\"Green Breath\">Green Breath " + "<option value=\"Green Beast\">Green Beast " + "<option value=\"Colorless Bow\">Colorless Bow " + "<option value=\"Colorless Dagger\">Colorless Dagger " + "<option value=\"Colorless Staff\">Colorless Staff " + "<option value=\"Colorless Breath\">Colorless Breath " + "<option value=\"Colorless Beast\">Colorless Beast " + spacer + "<option value=\"Red\">Red " + "<option value=\"Blue\">Blue " + "<option value=\"Green\">Green " + "<option value=\"Colorless\">Colorless " + spacer + "<option value=\"Melee\">Melee " + "<option value=\"Ranged\">Ranged " + "<option value=\"Physical\">Physical Damage " + "<option value=\"Magic\">Magic Damage " + "<option value=\"BreathUsers\">Breath Users " + "<option value=\"BeastUsers\">Beast Users " + "<option value=\"TomeUsers\">Tome Users " + "<option value=\"Healer\">Healers " + " ";

moveSelect.innerHTML = "" + "<select id=\"moveTypeSelect\" name=\"moveTypeSelect\" class=\"form-control\" onchange=\"filter\">" + "<option selected=\"selected\" value=\"-\">Movement Type " + "<option value=\"Infantry\">Infantry " + "<option value=\"Flying\">Flying " + "<option value=\"Cavalry\">Cavalry " + "<option value=\"Armored\">Armored " + " "; }

function filter { var weaponTypeFilter = document.getElementById("weaponTypeSelect").value; var moveTypeFilter = document.getElementById("moveTypeSelect").value;

// If both weapon and move type are the default values, reset opacity. if (weaponTypeFilter == "-" && moveTypeFilter == "-") { resetFiltersApplied; }   // Else if we have a weapon type filter, but no move type filter // Call the weapon type filter function else if (weaponTypeFilter != "-" && (moveTypeFilter == "-" || moveTypeFilter == "")) { filterByWeaponType(weaponTypeFilter); }   // Else if we have a move type filter, but no weapon type filter // Call the weapon type filter function else if ((weaponTypeFilter == "-" || weaponTypeFilter == "") && moveTypeFilter != "-") { filterByMoveType(moveTypeFilter); }   // Else, both move type and weapon type have filters // So we need to filter using both. else { filterByWeaponAndMoveType(weaponTypeFilter, moveTypeFilter); } }

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

if (element.nodeName == "TR") { if (!applyFilter) { element.style.display = "table-row"; }       else { element.style.display = "none"; }   } }

// Filters by movement type only. function filterByMoveType(filter) { // Go through all the hero grid icons for (var i = 0; i < elementsToFilter.length; i++) { // Retrieve the icon's weapon type var moveType = elementsToFilter[i].getAttribute("data-move-type");

// Check if the icon's move type matches the filter if (moveType == filter) { // If a match, don't apply / unapply filter. applyFilterAction(elementsToFilter[i], false); }       else { // Else apply the filter. applyFilterAction(elementsToFilter[i], true); }   } }

// FIlters by weapon type only. function filterByWeaponType(filter) { // Check if we're separating by group of weapon types and call appropriate function if (filter == "Ranged" || filter == "Melee"        || filter == "Red" || filter == "Blue" || filter == "Green" || filter == "Colorless"        || filter == "Physical" || filter == "Magic"         || filter == "Healer" || filter == "BreathUsers" || filter == "BeastUsers" || filter == "TomeUsers"    ) { filterByWeaponTypeGroup(filter); return; }

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

// Check if the icon's weapon type matches the filter if (weaponType == filter) { // If a match, don't apply / unapply filter. applyFilterAction(elementsToFilter[i], false); }       else { // Else apply the filter. applyFilterAction(elementsToFilter[i], true); }   } }

// Filters by weapon group only function filterByWeaponTypeGroup(filter) { // Go through all the hero grid icons for (var i = 0; i < elementsToFilter.length; i++) { // Retrieve the icon's weapon type var weaponType = elementsToFilter[i].getAttribute("data-weapon-type");

// Check if the weapon type is in the weapon filter group if (isInFilterGroup(filter, weaponType)) { // If a match, don't apply / unapply filter. applyFilterAction(elementsToFilter[i], false); }       else { // Else apply the filter. applyFilterAction(elementsToFilter[i], true); }   } }

function isInFilterGroup(filter, weaponType) { // Keeps track of all the weapons in certain weapon groups to use for filtering. var weaponFilterGroups = { Ranged: ["Colorless Bow", "Colorless Dagger", "Colorless Staff", "Red Tome", "Green Tome", "Blue Tome", "Red Bow", "Blue Bow", "Green Bow", "Red Dagger", "Blue Dagger", "Green Dagger"], Melee: ["Red Sword", "Blue Lance", "Green Axe", "Red Breath", "Blue Breath", "Green Breath", "Colorless Breath", "Red Beast", "Blue Beast", "Green Beast", "Colorless Beast"], Physical: ["Red Sword", "Blue Lance", "Green Axe", "Colorless Bow", "Red Dagger", "Blue Dagger", "Green Dagger", "Colorless Dagger", "Green Bow", "Red Bow", "Blue Bow", "Red Beast", "Blue Beast", "Green Beast", "Colorless Beast"], Magic: ["Red Breath", "Blue Breath", "Green Breath", "Colorless Breath", "Red Tome", "Green Tome", "Blue Tome", "Colorless Staff"], Healer: ["Colorless Staff"], Red: ["Red Sword", "Red Tome", "Red Breath", "Red Bow", "Red Dagger", "Red Beast"], Blue: ["Blue Lance", "Blue Tome", "Blue Breath", "Blue Bow", "Blue Dagger", "Blue Beast"], Green: ["Green Axe", "Green Tome", "Green Breath", "Green Bow", "Green Dagger", "Green Beast"], Colorless: ["Colorless Dagger", "Colorless Bow", "Colorless Staff", "Colorless Breath", "Colorless Beast"], BreathUsers: ["Red Breath", "Blue Breath", "Green Breath", "Colorless Breath"], BeastUsers: ["Red Beast", "Blue Beast", "Green Beast", "Colorless Beast"], TomeUsers: ["Red Tome", "Blue Tome", "Green Tome"] };

return ( weaponFilterGroups[filter].indexOf(weaponType) > -1 ) }

function isInFilterGroup2(filter, weaponType) { // Keeps track of all the weapons in certain weapon groups to use for filtering. var weaponFilterGroups = { Ranged: ["Bow", "Dagger", "Staff", "Tome"], Melee: ["Sword", "Lance", "Axe", "Breath", "Beast"], Physical: ["Sword", "Lance", "Axe", "Bow", "Dagger", "Beast"], Magic: ["Breath", "Tome", "Staff"] };

return ( weaponFilterGroups[filter].indexOf(weaponType) > -1 ) }

// Filters by weapon and move type function filterByWeaponAndMoveType(wepFilter, moveFilter) { // Check if we're separating by group of weapon types and call appropriate function if (wepFilter == "Ranged" || wepFilter == "Melee"        || wepFilter == "Red" || wepFilter == "Blue" || wepFilter == "Green" || wepFilter == "Colorless"        || wepFilter == "Physical" || wepFilter == "Magic"         || wepFilter == "Healer" || wepFilter == "BreathUsers" || wepFilter == "BeastUsers" || wepFilter == "TomeUsers"    ) { filterByWeaponGroupAndMoveType(wepFilter, moveFilter); return; }

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

// Check if the icon's weapon and move type matches the filter if (weaponType == wepFilter && moveType == moveFilter) { // If a match, don't apply / unapply filter. applyFilterAction(elementsToFilter[i], false); }       else { // Else apply the filter. applyFilterAction(elementsToFilter[i], true); }   } }

// Check each row to see if it is in the selected filter(s) function applyAllFilters(colorFilter, weaponFilter, moveFilter) { // Check if we're separating by group of weapon types and call appropriate function var weaponGroup = null; if (weaponFilter == "Ranged" || weaponFilter == "Melee" || weaponFilter == "Physical" || weaponFilter == "Magic") { weaponGroup = weaponFilter; }

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

var showRow = true; if(weaponGroup) { showRow = (isInFilterGroup2(weaponGroup, weaponType)); } else if(weaponFilter) { showRow = (weaponType == weaponFilter); }       showRow = showRow && (!colorFilter || color == colorFilter) && (!moveFilter || moveType == moveFilter); // Apply the filter applyFilterAction(elementsToFilter[i], !showRow); } }

// Filters by weapon group and move type function filterByWeaponGroupAndMoveType(wepFilter, moveFilter) { // Go through all the hero grid icons for (var i = 0; i < elementsToFilter.length; i++) { // Retrieve the icon's weapon and move type var weaponType = elementsToFilter[i].getAttribute("data-weapon-type"); var moveType = elementsToFilter[i].getAttribute("data-move-type");

// Check if the weapon type is in the weapon filter group // And check if move type matches movement type filter. if (isInFilterGroup(wepFilter, weaponType) && moveType == moveFilter) { // If a match, don't apply / unapply filter. applyFilterAction(elementsToFilter[i], false); }       else { // Else apply the filter. applyFilterAction(elementsToFilter[i], true); }   } }

// 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 = "1"; }       else { elementsToFilter[i].style.display = "table-row"; }   } }