Module:FilterBuilder

Description

This module builds a filter with specified parameters to use for filtering lists and tables. It also uses already existing mediawiki button classes.

The elements being filtered must have the filter-element class (module source).

Usage Syntax

{{#invoke:FilterBuilder|filterBuilder|<dataKey>|<filter values>|<filter icons/text>}}

• dataKey is the data-* attribute the filter will be filtering the elements on. For example, if the data attribute is data-color, then you would put color.

Examples

• Basic example using text inside the buttons.

{{#invoke:FilterBuilder|filterBuilder|color|red,blue,yellow|RED,BLUE,YELLOW}}

RED

BLUE

YELLOW

• Another example, but showing images instead of text.
• Can even customize image (e.g. sizing, captions, etc.

{{#invoke:FilterBuilder|filterBuilder|element|fire,water,energy|[[File:Fire (Element) Icon.png|link=|30px|Fire]],[[File:Water (Element) Icon.png|link=|30px|Water]],[[File:Energy (Element) Icon.png|link=|30px|Energy]]}}

How it ALL works together

This is an example template invoking the filter builder module:

To see ^ how the example works, use web inspector to look at the data- types and values set on each button.

Here's the template code that does that:

{{#invoke:FilterBuilder|filterBuilder|rarity|common,uncommon,rare,epic,legendary,primal,divine,ancient|
[[File:Common (classification) Icon.png|20px|link=]],
[[File:Uncommon (classification) Icon.png|20px|link=]],
[[File:Rare (classification) Icon.png|20px|link=]],
[[File:Epic (classification) Icon.png|20px|link=]],
[[File:Legendary (classification) Icon.png|20px|link=]],
[[File:Primal (classification) Icon.png|20px|link=]],
[[File:Divine (classification) Icon.png|20px|link=]],
[[File:Ancient (classification) Icon.png|20px|link=]]}}{{clear}}

Then, in the Cargo surrogate/phantom template, that formats a single row of table output, look at the first line |- that has the corresponding attributes (that the buttons will correspond to and filter by):

|-{{#if:{{{Type|}}}|class="dragon-row-entry filter-element" data-name="{{{Title|Name}}}" data-rarity="{{{Type|}}}"}} style="background-color:{{#ifeq:{{{Uncertain|}}}|1|lightgray|{{{BgColor}}}}};"

• Source Template:DragonBox-CargoRow_Filters (deleted page revision) for that sample.
• The corresponding setup to compare to (aoe) here.

Taking it Farther

You can use multiple filter sets together, so the ones for rarity all have the same <datakey>, another set would have a different data key, and can be used on the same page/table.

See other/more examples here.

---

local p = {}

function p.filterBuilder(frame)
	local dataKey = mw.text.trim(frame.args[1])
	local dataValues = mw.text.split(frame.args[2], ",")
	local contentValues = mw.text.split(frame.args[3], ",")
	
	local filterGroup = mw.html.create('div')
		:addClass('mw-ui-button-group')
		:addClass('filter-group-' .. dataKey)
		:css('margin', '3px 1px')
	
	for i,value in ipairs(dataValues) do
		filterGroup:tag('div')
			:addClass('mw-ui-button')
			:addClass('filter-button')
			:attr('data-key', dataKey)
			:attr('data-value', string.lower(mw.text.trim(value)))
			:css('height', 'auto')
			:wikitext(contentValues[i])
	end
	
	return tostring(filterGroup)
end

return p