API

Schema

Properties
Name Type Description
groups Group[] List of groups.
items Item[] List of items.
data object User data.
Functions
Name Return type Description
constructor(data?: object) - data, a usable plain old JavaScript object defined by the user.
addGroup(group: Group) Adds a new Group to the Schema.
addItem(item: Item) Adds a new Item to the Schema.
addItems(items: Item[]) Adds multiple items to the Schema.

Group

Properties
Name Type Description
name string Name of the group.
filters Filter[] List of filters.
data object User data.
Functions
Name Return type Description
constructor(name: string, data?: object) - name, name of the group.
- data, a usable plain old JavaScript object defined by the user.
addFilter(filter: Filter) Adds a new Filter to the Group.

Filter

Properties
Name Type Description
name string Name of filter.
data object User data.

Item

Properties
Name Type Description
data object User data.
Functions
Name Return type Description
constructor(data?: object) - data, a usable plain old JavaScript object defined by the user.
addFilter(groupName: string, filterName: string) Specifies the
getGroupNames() Set<string> Returns a set of all Group names the Item is in.
getFilterNames(groupName: string) Set<string> Returns a set of all Filter names for a specific Group the Item is in.

Filtering

Properties
Name Type Description
schema Schema
Functions
Name Return type Description
constructor(schema: Schema)
addEventListener(eventName: string, callback: EventCallback, priority?: number) () => void Check out the Filtering Events list below. Also the EventEmitter and EventCallback section at the end for more information on the addEventListener() method and parameters.
Returns a function to unregister the listener.
Events
Name Return type Event Description
filter-item boolean {source: this, data: {item, filterData, schema}} Called before Filtering.filter for each item. Returning true will consider the item for filtering, similar to JavaScript’s Array.filter. If you register multiple event listeners, every one has to return true.

FilterData

Properties
Name Type Description
checkedFilters Map<string, Set<string>> A map representing the checked Data (key: Group names; values: Filter names in the specific group).
Functions
Name Return type Description
checkFilter(groupName: string, filterName: string) Checks a Filter in a Group.
disableGroup(groupName: string) Unchecks all Filters in a Group. Also disables the Group, further checking Filter will have no effect on the Group.

Result

Properties
Name Type Description
schema Schema The Schema used for filtering.
groups GroupResult[] List of GroupResult.
groupNames string[] List of Group names.
filteredItems Item[] List of all items that passed the filtering.
allItems Item[] List of all items considered for filtering.
Functions
Name Return type Description
getGroup(groupName: string) Group Returns a Group by name.

Note: Other functions are mainly relevant for the filtering algorithm to generate the result and shouldn’t be used by the user.


GroupResult

Properties
Name Type Description
schemaGroup Group The corresponding Group of the GroupResult.
filters FilterResult[] List of all FilterResults.
filteredItems Item[] List of all items in the Group that passed the filtering.
allItems Item[] List of all items in the Group considered for filtering.
Functions
Name Return type Description
getFilter(filterName: string) Filter Returns a Filter by name.

Note: Other functions are mainly relevant for the filtering algorithm to generate the result and shouldn’t be used by the user.


FilterResult

Properties
Name Type Description
schemaFilter Filter The corresponding Filter of the FilterResult.
filteredItems Item[] List of all items in the Filter that passed the filtering.
possibleItems Item[] List of all items in the Filter that could pass the filtering.
allItems Item[] List of all items in the Filter considered for filtering.
Functions

| Name | Return type | Description |

Note: Other functions are mainly relevant for the filtering algorithm to generate the result and shouldn’t be used by the user.


FilteringFlow

Properties
Name Type Description
root HTMLElement
options FilteringOptions
parser Parser
schema Schema
filtering Filtering
Functions
Name Return type Description
constructor(root: HTMLElement, options: FilteringFlowOptions}) - root, a HTML element containing all group, filter and item elements.
- FilteringFlowOptions
initializeParser() Parser Initializes a Parser with default parserOptions. Overrider to return a custom Parser.
initializeSchema() Schema Initializes a Schema parsed from the Parser. Override to return a custom Schema.
initializeFiltering() Filtering Initializes a Filtering by using the parsed Schema. Override to return a custom Filtering.
initializeFilterListener() Adds a click listener to each filter element. Override to handle initializing listeners by yourself.
filter(filterData?: FilterData) If no filterData is passed, it parses the checked Filters from HTML first. Then emits and returns the Result
destroy() Removes all element event listeners and stored variables.
addEventListener(eventName: string, callback: EventCallback, priority?: number) () => void Check out the Filtering Events list below. Also the EventEmitter and EventCallback section at the end for more information on the addEventListener() method and parameters.
Returns a function to unregister the listener.
Events
Name Return type Event Description
should-filter boolean {source: this, data: {filter}} Called when a filter element is clicked. If any listener returns false, the filtering magic will be aborted.
before-filter {source: this, data: {filterData}} Called right before filter(). TODO: why is it useful?
filter source: this, data: {result, filterData} Called after filtering. This will be the most registered event because here you can react right after the filtering happened, check the filter result and filter states.
destroy {source: this} Called right before unregister listeners and removing references. Here you can do your custom clean up.

FilteringFlowOptions

Properties
Name Type Description
disabledFilterClass string CSS class that is added to a Filter when it is disabled.
Defaults to disabled.
filteredItemClass string CSS class that is added to an Item when it’s filtered.
Defaults to filtered.
triggerFilterAfterInitializing boolean If true, the filtering will be triggered after initializing the FilteringFlow.
Defaults to true.

Parser

Properties
Name Type Description
options ParserOptions
Functions
Name Return type Description
constructor(options?: ParserOptions) - options
parseSchemaFromHtml(root: HTMLElement, schema?: Schema) Schema Queries and parses Schema from a HTML Element. The parser queries for elements, which have to be descendants of the root, having the classes specified in ParserOptions. If a Schema is passed, the parsed Groups, Filters and Itesm will be added to this Schema, otherwise a new default Schema will be created.
- root, the HTML Element having Groups, Filters and Items as descendants.
-schema, optional Schema to use and add parsed Groups, Filters and Items. If no schema is passed, a new, default one will be created.
parseGroupsAndFiltersFromHtml(root: HTMLElement, schema: Schema) Queries and parses Groups and Filters from a HTML Element. The parser queries for elements, which have to be descendants of the root, having the classes specified in ParserOptions. Parsed Groups and Filters will be added to the Schema.
- root, the HTML Element having Groups and Filters as descendants.
parseItemsFromHtml(root: HTMLElement) Item[] Queries and parses Items from a HTML Element. The parser queries for elements, which have to be descendants of the root, having the classes specified in ParserOptions. Parsed Groups and Filters will be added to the Schema.
- root, the HTML Element having Groups and Filters as descendants.
parseCheckedFilterDataFromHtml(root: HTMLElement) FilterData - root, parse Schema from a HTML Element. The parser queries for elements having the classes specified in ParserOptions.

ParserOptions

Properties
Name Type Description
groupClass string CSS class that is added to a Group Element.
Defaults to filtering-group.
filterClass string CSS class that is added to a Filter Element.
Defaults to filtering-filter.
itemClass string CSS class used to query for Item Elements.
Defaults to filtering-item.
itemFilterDataAttribute string Data attribute that is used to store the FilterData of an Item.
Defaults to data-filter.
itemCheckedClass string CSS class that is added to an Item Element when it is checked.
Defaults to checked.

EventEmitter

Functions
Name Return type Description
emit(eventName: string, event: Event) any[] The emitted event should have a source property, normally this, and an optional data property for any additional data.
The returned array stores the return values from each callback.
addEventListener(eventName: string, callback: EventCallback, priority?: number) () => void If for some reason the callback order matters, you can set a custom priority, defaults to 0. Higher values are called first.
Returns a function to unregister the listener.

EventCallback

(event) => {} where event is a plain old JavaScript object with the properties source and an optional data.