Widget:Icon filter/doc

This widget contains javascript that add filtering dropdowns to one or more sections icons of tagged with appropriate data. Selecting specific values in these dropdown then filters out icons whose data values don't match, with filtering out indicated by displaying those icons with 25% opacity.

Implementations

 * FP tagged icon section and FP tagged icon, which includes usage instructions and an example, implement this widget for icons that represent cards with dropdowns for various card values.

Writing a custom implementation
The widget itself is fairly generic, allowing custom fields for dropdowns and data values for customized icons without any modification of the javascript.

Step 1: Create a section
A section can be any kind of block element, mostly likely a, with a   of   and a   that isn't used elsewhere on the same page. The data-id should not include spaces.

A quick example would be:

Step 2: Add a subsection for the dropdowns
This subsection can also be any kind of block element, though a  is probably the most natural choice, that has a   of   placed inside the   block. Usually, the top will be the most natural place for this. It is also recommended that a  of   be added.

Extending the above example:

Step 3: Add dropdown placeholders
Dropdown placeholders are s inside the   block with   and   set. They can also optionally have a. Each placeholder will be replaced with a dropdown when the page has fully loaded provided there are at least two unique values set for that field on the included icons; otherwise, the placeholder is simply removed. (This only affects s with   and   set.)

is the name of the field that dropdown should display values for. For example, with a  of , the field values on each icon would be assigned to. Only numbers, lowercase English letters, and hyphens should be used in the field name. Do not use spaces. (Note that the field name isn't displayed anywhere. It is only used internally by the script to connect data values to the proper dropdown.)

has two purposes. The first is to inform the user what field the dropdown is for, whether it be type, rarity, or something else; it will be the first value in the list and the one automatically selected when the dropdown is added to the page. The second is that this value "matches" any value in the given field, meaning no icons will be filtered out by this dropdown when this value is selected, though other dropdowns may still do so.

is optional and is for specifying custom sorts of field values within the dropdown. The usual sorting order is alphabetical, but this is usually not desirable for fields like rarity where the preferred order will be from most common to most rare. The values should be listed in their preferred order separated by, as in. This does not affect what values actually appear in the dropdown, as those are drawn from the data on the actual icons, but any values that match those in this list are listed first and in the specified order. Any other values appear alphabetically below those.

Extending the example further with type and rarity dropdown placeholders:

Step 4: Add the tagged icons
At this point, inside the  block, but outside the   block, add elements with a   of   with data values for the fields defined above. The values should be set to attributes starting with  and ending with the relevant field name, such as   for a field named.

These do not technically have to be icons. Anything can be put inside the  elements; the script does not check what is there. It only looks at the data items and sets opacity as appropriate.

Extending the example further with three icons:

Step 5: Add the widget somewhere to the page
The widget can only work if it's actually included on the page, though it should only be included once. It doesn't matter how many  blocks there are on the page.

Finishing up the example: