Module:FilterBuilder/doc
From Dragon Mania Legends (DML) Wiki
< Module:FilterBuilderThis is the documentation page for Module:FilterBuilder
Documentation subpage |
---|
View this documentation's related template: 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 putcolor
.
Examples
- Basic example using text inside the buttons.
{{#invoke:FilterBuilder|filterBuilder|color|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 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.