Join The Fan Lab, a private Fandom research community for users in the US and UK where you will be asked to share your opinions on all things gaming and entertainment! Click here to see if you qualify

Widget:DropdownSelects

From Fire Emblem Heroes Wiki
Jump to: navigation, search
<script data-colors="<!--{$colors|escape:'html'}-->" data-move-types="<!--{$moveTypes|escape:'html'}-->" data-weapon-types="<!--{$weaponTypes|escape:'html'}-->" data-weapon-classes="<!--{$weaponClasses|escape:'html'}-->">(function() {
	"use strict";
	var elementToInsertAfter = document.currentScript;

	if (!elementToInsertAfter) {
		return;
	}

	var intervalID = setInterval(function() {
		var dependenciesLoaded;

		try {
			dependenciesLoaded =
				mw.loader.using
				&& $
				&& (document.readyState !== "loading")
			;
		} catch (e) {
			return;
		}

		if (dependenciesLoaded) {
			clearInterval(intervalID);
//Begin actual code
mw.loader.using("oojs-ui-core",function() {
	var SELECT_ALL_LABEL = "All";
	var $elementsToFilter = $( ".hero-filter-element" );
	
	function makeDropdown(label, commaList) {
		return new OO.ui.DropdownWidget( {
			indicator: "down",
			label: label,
			menu: {
				items: [SELECT_ALL_LABEL].concat(commaList.split(",")).map(function(ele) {
					return new OO.ui.MenuOptionWidget( {
						label: ele
					} );
				})
			}
		} );
	}
	
	var colorDropdown = makeDropdown("Color", elementToInsertAfter.dataset.colors);
	var weaponDropdown = makeDropdown("Weapon Types", elementToInsertAfter.dataset.weaponTypes);
	var movementDropdown = makeDropdown("Move Types", elementToInsertAfter.dataset.moveTypes);
	
	var colorMenu = colorDropdown.getMenu();
	var movementMenu = movementDropdown.getMenu();
	var weaponMenu = weaponDropdown.getMenu();
	
	weaponMenu.$element.append( "<hr/>" );
	weaponMenu.addItems(elementToInsertAfter.dataset.weaponClasses.split(",").map(function(ele) {
		return new OO.ui.MenuOptionWidget( {
			label: ele
		} );
	}));
	
	colorDropdown.$element.css( "max-width", "9em" );
	weaponDropdown.$element.css( "max-width", "12em" );
	movementDropdown.$element.css( "max-width", "10em" );
	
	function applyFilterAction() {
		var colorItem = colorMenu.findSelectedItem();
		var weaponItem = weaponMenu.findSelectedItem();
		var moveItem = movementMenu.findSelectedItem();
		$elementsToFilter.css( "display", function () {
			var weaponProps = (this.dataset.weaponProps || "").split(";");

			return (!colorItem || colorItem.getLabel() === SELECT_ALL_LABEL || weaponProps.indexOf(colorItem.getLabel()) > -1)
			&& (!weaponItem || weaponItem.getLabel() === SELECT_ALL_LABEL || weaponProps.indexOf(weaponItem.getLabel()) > -1)
			&& (!moveItem || moveItem.getLabel() === SELECT_ALL_LABEL || this.dataset.moveType === moveItem.getLabel())
			? "" : "none";
		} );
	}
	
	colorMenu.on( "choose", applyFilterAction );
	movementMenu.on( "choose", applyFilterAction );
	weaponMenu.on( "choose", applyFilterAction );

	new OO.ui.HorizontalLayout( {
		items: [colorDropdown, weaponDropdown, movementDropdown]
	} ).$element.insertAfter( elementToInsertAfter );
});
//End actual code
		}
	}, 1000);
})();</script>

Test

Marth: Altean Prince
Marth Altean Prince Face FC.webp
Abel: The Panther
Abel The Panther Face FC.webp
Reinhardt: Thunder's Fist
Reinhardt Thunders Fist Face FC.webp
Myrrh: Great Dragon
Myrrh Great Dragon Face FC.webp
Infantry
Armor
Red Sword
Red Breath
HeroMoveWeaponHPAtkSpdDefResTotal
Abel The Panther Face FC.webpAbel: The PantherCavalryBlue Lance3933322525154
Alfonse Askran Duo Face FC.webpAlfonse: Askran DuoInfantryBlue Tome4138173530161
Alfonse Prince of Askr Face FC.webpAlfonse: Prince of AskrInfantryRed Sword4335253222157