mixitup.Mixer
The mixitup.Mixer
class is used to hold discreet, user-configured
instances of MixItUp on a provided container element.
Mixer instances are returned whenever the mixitup()
factory function is called,
which expose a range of methods enabling API-based filtering, sorting,
insertion, removal and more.
show()
.show()
Type | Name | Description | |
---|---|---|---|
@return | Promise.<mixitup.State> |
A shorthand method for .filter('all')
. Shows all targets in the container.
hide()
.hide()
Type | Name | Description | |
---|---|---|---|
@return | Promise.<mixitup.State> |
A shorthand method for .filter('none')
. Hides all targets in the container.
isMixing()
.isMixing()
Type | Name | Description | |
---|---|---|---|
@return | boolean |
Returns a boolean indicating whether or not a MixItUp operation is currently in progress.
filter()
.filter(selector [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | string, HTMLElement, Array.<HTMLElement> | selector | Any valid CSS selector (i.e. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Filters all targets in the container by a provided selector string, or the values 'all'
or 'none'
. Only targets matching the selector will be shown.
toggleOn()
.toggleOn(selector [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | string | selector | Any valid CSS selector (i.e. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Adds an additional selector to the currently active filter selector, concatenating
as per the logic defined in controls.toggleLogic
.
toggleOff()
.toggleOff(selector [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | string | selector | Any valid CSS selector (i.e. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Removes a selector from the active filter selector.
sort()
.sort(sortString [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | string, Array.<HTMLElement> | sortString | A valid sort string (e.g. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Sorts all targets in the container according to a provided sort string.
changeLayout()
.changeLayout(containerClassName [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | string | containerClassName | A layout-specific class name to add to the container. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Changes the layout of the container by adding, removing or updating a
layout-specific class name. If animation.animateResizetargets
is
enabled, MixItUp will attempt to gracefully animate the width, height,
and position of targets between layout states.
dataset()
.dataset(dataset [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | Array.<object> | dataset | An array of objects, each one representing the underlying data model of a target to be rendered. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Updates the contents and order of the container to reflect the provided dataset, if the dataset API is in use.
The dataset API is designed for use in API-driven JavaScript applications, and
can be used instead of DOM-based methods such as .filter()
, .sort()
,
.insert()
, etc. When used, insertion, removal, sorting and pagination can be
achieved purely via changes to your data model, without the uglyness of having
to interact with or query the DOM directly.
multimix()
.multimix(multimixCommand [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | object | multimixCommand | An object containing one or more things to do |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Performs simultaneous filter
, sort
, insert
, remove
and changeLayout
operations as requested.
insert()
.insert(newElements [, index] [, animate], [, callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string | newElements | A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. |
@param | number | index | The index at which to insert the new element(s). |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Inserts one or more new target elements into the container at a specified index.
To be indexed as targets, new elements must match the selectors.target
selector ('.mix'
by default).
insertBefore()
.insertBefore(newElements, referenceElement [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string | newElements | A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. |
@param | HTMLElement | referenceElement | A reference to an existing element in the container to insert new elements before. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Inserts one or more new elements before a provided reference element.
insertAfter()
.insertAfter(newElements, referenceElement [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string | newElements | A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. |
@param | HTMLElement | referenceElement | A reference to an existing element in the container to insert new elements after. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Inserts one or more new elements after a provided reference element.
prepend()
.prepend(newElements [,animate] [,callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string | newElements | A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Inserts one or more new elements into the container before all existing targets.
append()
.append(newElements [,animate] [,callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string | newElements | A reference to a single element to insert, an array-like collection of elements, or an HTML string representing a single element. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Inserts one or more new elements into the container after all existing targets.
remove()
.remove(elements [, animate] [, callback])
Type | Name | Description | |
---|---|---|---|
@param | HTMLElement, Array.<HTMLElement>, string, number | elements | A reference to a single element to remove, an array-like collection of elements, a selector string, or the index of an element to remove. |
@param | boolean | [animate] | An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. |
@param | function | [callback] | An optional callback function to be invoked after the operation has completed. |
@return | Promise.<mixitup.State> | A promise resolving with the current state object. |
Removes one or more existing target elements from the container.
getConfig()
.getConfig([stringKey])
Type | Name | Description | |
---|---|---|---|
@param | string | [stringKey] | A “dot-notation” string key |
@return | * |
Retrieves the the value of any property or sub-object within the current mixitup configuration, or the whole configuration object.
configure()
.configure(config)
Type | Name | Description | |
---|---|---|---|
@param | object | config | An object containing one of more configuration options. |
@return | void |
Updates the configuration of the mixer, after it has been instantiated.
See the Configuration Object documentation for a full list of avilable configuration options.
getState()
.getState();
Type | Name | Description | |
---|---|---|---|
@return | mixitup.State | An object reflecting the current state of the mixer. |
Returns an object containing information about the current state of the mixer. See the State Object documentation for more information.
NB: State objects are immutable and should therefore be regenerated after any operation.
forceRefresh()
.forceRefresh()
Type | Name | Description | |
---|---|---|---|
@return | void |
Forces the re-indexing all targets within the container.
This should only be used if some other piece of code in your application has manipulated the contents of your container, which should be avoided.
If you need to add or remove target elements from the container, use
the built-in .insert()
or .remove()
methods, and MixItUp will keep
itself up to date.
forceRender()
.forceRender()
Type | Name | Description | |
---|---|---|---|
@return | void |
Forces the re-rendering of all targets when using the Dataset API.
By default, targets are only re-rendered when data.dirtyCheck
is
enabled, and an item’s data has changed when dataset()
is called.
The forceRender()
method allows for the re-rendering of all targets
in response to some arbitrary event, such as the changing of the target
render function.
Targets are rendered against their existing data.
destroy()
.destroy([cleanUp])
Type | Name | Description | |
---|---|---|---|
@param | boolean | [cleanUp] | An optional boolean dictating whether or not to clean up any inline |
@return | void |
Removes mixitup functionality from the container, unbinds all control event handlers, and deletes the mixer instance from MixItUp’s internal cache.
This should be performed whenever a mixer’s container is removed from
the DOM, such as during a page change in a single page application,
or React’s componentWillUnmount()
.