Widget:DropdownSelects/sandbox

(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, i) {					return new OO.ui.MenuOptionWidget( { data: (i - 1).toString, 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 entryDropdown = makeDropdown("Entry", elementToInsertAfter.dataset.titles);	var colorMenu = colorDropdown.getMenu;	var movementMenu = movementDropdown.getMenu;	var weaponMenu = weaponDropdown.getMenu;	var entryMenu = entryDropdown.getMenu;	weaponMenu.$element.append( " " );	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" );	entryDropdown.$element.css( "max-width", "20em" );	function applyFilterAction {		var colorItem = colorMenu.findSelectedItem;		var weaponItem = weaponMenu.findSelectedItem;		var moveItem = movementMenu.findSelectedItem;		var entryItem = entryMenu.findSelectedItem;		$elementsToFilter.css( "display", function { var weaponProps = (this.dataset.weaponProps || "").split(";"); var titles = (this.dataset.titles || "").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) && (!entryItem || entryItem.getLabel === SELECT_ALL_LABEL || titles.indexOf(entryItem.getData) > -1) ? "" : "none"; } );	}	colorMenu.on( "choose", applyFilterAction );	movementMenu.on( "choose", applyFilterAction );	weaponMenu.on( "choose", applyFilterAction );	entryMenu.on( "choose", applyFilterAction );

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