Module:FilterBuilder

Documentation

[purge]

Description

Builds a filter with specified parameters to use for filtering lists and tables.

The elements being filtered must have the filter-element class.

Usage

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

• 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.
  • use for cases with simple searchable one DataValue, or non-strict search of any filter value in list(,) of dataValue
• dataKey_strict - add [_strict] to dataKey in filter builder and in filtered html elements. All strict filter groups will be parsed as one same group and each value in DataValues list will be compared with each selected [strict] filter button.
  • use for when DataValue is List(,) and/or data string contains multiple values and complete match with all filters is required.

• reset value of DataKey - creates a button that will un-select all filters buttons on page and return <selected by default filter values to selected state. DataValue need to be present but can be left empty.

Example

• Basic example using text inside the buttons.

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

RED

BLUE

YELLOW

• example for reset button

{{#invoke:FilterBuilder|filterBuilder|reset||Press to reset all filters}}

Press to reset all filters

• Another example, but showing you add images instead of text.

{{#invoke:FilterBuilder|filterBuilder|color|red,blue,yellow|[[File:Fish.png|link=]],[[File:Fish.png|link=]],[[File:Fish.png|link=]]|blue,yellow}}

• Can even customize image (e.g. sizing, captions, etc.

{{#invoke:FilterBuilder|filterBuilder|color|red,blue,yellow|[[File:Fish.png|link=|20px|Red]],[[File:Fish.png|link=|20px|Blue]],[[File:Fish.png|link=|20px|Yellow]]}}

The above documentation is transcluded from Module:FilterBuilder/doc. (edit | history)

---

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 selectedValues = frame.args[4]
	if selectedValues~=nill then
		selectedValues = string.lower(selectedValues)
	end

	local filterGroup = mw.html.create('div')
		:addClass('mw-ui-button-group')
		:addClass('filter-group-' .. dataKey)
		:css('margin', '3px 1px')
		:css('flex-wrap', 'wrap')
	if string.find(dataKey, "strict") then
	    filterGroup:addClass('group-strict')
	end
	
	
	if dataKey == 'reset' then
			filterGroup:tag('div')
				:addClass('filter-reset')
				:addClass('mw-ui-button')
				:addClass('filter-button')
				:css('height', 'auto')
				:wikitext(contentValues[1])
	else
		for i,value in ipairs(dataValues) do
			button=filterGroup:tag('div')
			button
				: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])
			
			if selectedValues~=nill then 
				if string.find(selectedValues, string.lower(mw.text.trim(value))) then
					button
					    :addClass('filter-button-selected')
					    :addClass("default-selected")
				end
			end
		end
	end
	
	
	return tostring(filterGroup)
end

return p