mixitup.Mixer
February 13, 2018 ยท View on GitHub
Overview
The mixitup.Mixer class is extended with API methods relating to
the MultiFilter extension.
For the full list of API methods, please refer to the MixItUp core documentation.
Contents
parseFilterGroups()
Version added: 3.0.0
.parseFilterGroups([animate] [, callback])
Traverses the currently active filters in all groups, building up a compound selector string as per the defined logic. A filter operation is then called on the mixer using the resulting selector.
This method can be used to programmatically trigger the parsing of
filter groups after manipulations to a group's active selector(s) by
the .setFilterGroupSelectors() API method.
| Type | Name | Description | |
|---|---|---|---|
| Param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. true by default. |
| Param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
| Returns | Promise.<mixitup.State> | A promise resolving with the current state object. |
Example: Triggering parsing after programmatically changing the values of a filter group
mixer.setFilterGroupSelectors('color', ['.green', '.blue']);
mixer.parseFilterGroups();
setFilterGroupSelectors()
Version added: 3.2.0
.setFilterGroupSelectors(groupName, selectors)
Programmatically sets one or more active selectors for a specific filter group and updates the group's UI.
Because MixItUp has no way of knowing how to break down a provided
compound selector into its component groups, we can not use the
standard .filter() or toggleOn()/toggleOff() API methods when using
the MultiFilter extension. Instead, this method allows us to perform
multi-dimensional filtering via the API by setting the active selectors of
individual groups and then triggering the .parseFilterGroups() method.
If setting multiple active selectors, do not pass a compound selector. Instead, pass an array with each item containing a single selector string as in example 2.
| Type | Name | Description | |
|---|---|---|---|
| Param | string | groupName | The name of the filter group as defined in the markup via the data-filter-group attribute. |
| Param | string, Array.<string> | selectors | A single selector string, or multiple selector strings as an array. |
| Returns | void |
Example 1: Setting a single active selector for a "color" group
mixer.setFilterGroupSelectors('color', '.green');
mixer.parseFilterGroups();
Example 2: Setting multiple active selectors for a "size" group
mixer.setFilterGroupSelectors('size', ['.small', '.large']);
mixer.parseFilterGroups();
getFilterGroupSelectors()
Version added: 3.2.0
.getFilterGroupSelectors(groupName)
Returns an array of active selectors for a specific filter group.
| Type | Name | Description | |
|---|---|---|---|
| Param | string | groupName | The name of the filter group as defined in the markup via the data-filter-group attribute. |
| Returns | void |
Example: Retrieving the active selectors for a "size" group
mixer.getFilterGroupSelectors('size'); // ['.small', '.large']