\n * var mixer = mixitup(containerEl, config, foreignDocument);\n *\n * @global\n * @namespace\n * @public\n * @kind function\n * @since 3.0.0\n * @param {(Element|string)} container\n * A DOM element or selector string representing the container(s) on which to instantiate MixItUp.\n * @param {object} [config]\n * An optional \"configuration object\" used to customize the behavior of the MixItUp instance.\n * @param {object} [foreignDoc]\n * An optional reference to a `document`, which can be used to control a MixItUp instance in an iframe.\n * @return {mixitup.Mixer}\n * A \"mixer\" object holding the MixItUp instance.\n */\n\n mixitup = function(container, config, foreignDoc) {\n var el = null,\n returnCollection = false,\n instance = null,\n facade = null,\n doc = null,\n output = null,\n instances = [],\n id = '',\n elements = [],\n i = -1;\n\n doc = foreignDoc || window.document;\n\n if (returnCollection = arguments[3]) {\n // A non-documented 4th paramater enabling control of multiple instances\n\n returnCollection = typeof returnCollection === 'boolean';\n }\n\n if (typeof container === 'string') {\n elements = doc.querySelectorAll(container);\n } else if (container && typeof container === 'object' && h.isElement(container, doc)) {\n elements = [container];\n } else if (container && typeof container === 'object' && container.length) {\n // Although not documented, the container may also be an array-like list of\n // elements such as a NodeList or jQuery collection, is returnCollection is true\n\n elements = container;\n } else {\n throw new Error(mixitup.messages.errorFactoryInvalidContainer());\n }\n\n if (elements.length < 1) {\n throw new Error(mixitup.messages.errorFactoryContainerNotFound());\n }\n\n for (i = 0; el = elements[i]; i++) {\n if (i > 0 && !returnCollection) break;\n\n if (!el.id) {\n id = 'MixItUp' + h.randomHex();\n\n el.id = id;\n } else {\n id = el.id;\n }\n\n if (mixitup.instances[id] instanceof mixitup.Mixer) {\n instance = mixitup.instances[id];\n\n if (!config || (config && config.debug && config.debug.showWarnings !== false)) {\n console.warn(mixitup.messages.warningFactoryPreexistingInstance());\n }\n } else {\n instance = new mixitup.Mixer();\n\n instance.attach(el, doc, id, config);\n\n mixitup.instances[id] = instance;\n }\n\n facade = new mixitup.Facade(instance);\n\n if (config && config.debug && config.debug.enable) {\n instances.push(instance);\n } else {\n instances.push(facade);\n }\n }\n\n if (returnCollection) {\n output = new mixitup.Collection(instances);\n } else {\n // Return the first instance regardless\n\n output = instances[0];\n }\n\n return output;\n };\n\n /**\n * The `.use()` static method is used to extend the functionality of mixitup with compatible\n * extensions and libraries in an environment with modular scoping e.g. ES2015, CommonJS, or RequireJS.\n *\n * You need only call the `.use()` function once per project, per extension, as module loaders\n * will cache a single reference to MixItUp inclusive of all changes made.\n *\n * @example\n * mixitup.use(extension)\n *\n * @example
Example 1: Extending MixItUp with the Pagination Extension
\n *\n * import mixitup from 'mixitup';\n * import mixitupPagination from 'mixitup-pagination';\n *\n * mixitup.use(mixitupPagination);\n *\n * // All mixers created by the factory function in all modules will now\n * // have pagination functionality\n *\n * var mixer = mixitup('.container');\n *\n * @public\n * @name use\n * @memberof mixitup\n * @kind function\n * @static\n * @since 3.0.0\n * @param {*} extension A reference to the extension or library to be used.\n * @return {void}\n */\n\n mixitup.use = function(extension) {\n mixitup.Base.prototype.callActions.call(mixitup, 'beforeUse', arguments);\n\n // Call the extension's factory function, passing\n // the mixitup factory as a paramater\n\n if (typeof extension === 'function' && extension.TYPE === 'mixitup-extension') {\n // Mixitup extension\n\n if (typeof mixitup.extensions[extension.NAME] === 'undefined') {\n extension(mixitup);\n\n mixitup.extensions[extension.NAME] = extension;\n }\n } else if (extension.fn && extension.fn.jquery) {\n // jQuery\n\n mixitup.libraries.$ = extension;\n }\n\n mixitup.Base.prototype.callActions.call(mixitup, 'afterUse', arguments);\n };\n\n mixitup.instances = {};\n mixitup.extensions = {};\n mixitup.libraries = {};\n\n /**\n * @private\n */\n\n h = {\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} cls\n * @return {boolean}\n */\n\n hasClass: function(el, cls) {\n return !!el.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'));\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} cls\n * @return {void}\n */\n\n addClass: function(el, cls) {\n if (!this.hasClass(el, cls)) el.className += el.className ? ' ' + cls : cls;\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} cls\n * @return {void}\n */\n\n removeClass: function(el, cls) {\n if (this.hasClass(el, cls)) {\n var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)');\n\n el.className = el.className.replace(reg, ' ').trim();\n }\n },\n\n /**\n * Merges the properties of the source object onto the\n * target object. Alters the target object.\n *\n * @private\n * @param {object} destination\n * @param {object} source\n * @param {boolean} [deep=false]\n * @param {boolean} [handleErrors=false]\n * @return {void}\n */\n\n extend: function(destination, source, deep, handleErrors) {\n var sourceKeys = [],\n key = '',\n i = -1;\n\n deep = deep || false;\n handleErrors = handleErrors || false;\n\n try {\n if (Array.isArray(source)) {\n for (i = 0; i < source.length; i++) {\n sourceKeys.push(i);\n }\n } else if (source) {\n sourceKeys = Object.keys(source);\n }\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n\n if (!deep || typeof source[key] !== 'object' || this.isElement(source[key])) {\n // All non-object properties, or all properties if shallow extend\n\n destination[key] = source[key];\n } else if (Array.isArray(source[key])) {\n // Arrays\n\n if (!destination[key]) {\n destination[key] = [];\n }\n\n this.extend(destination[key], source[key], deep, handleErrors);\n } else {\n // Objects\n\n if (!destination[key]) {\n destination[key] = {};\n }\n\n this.extend(destination[key], source[key], deep, handleErrors);\n }\n }\n } catch(err) {\n if (handleErrors) {\n this.handleExtendError(err, destination);\n } else {\n throw err;\n }\n }\n\n return destination;\n },\n\n /**\n * @private\n * @param {Error} err\n * @param {object} destination\n * @return {void}\n */\n\n handleExtendError: function(err, destination) {\n var re = /property \"?(\\w*)\"?[,:] object/i,\n matches = null,\n erroneous = '',\n message = '',\n suggestion = '',\n probableMatch = '',\n key = '',\n mostMatchingChars = -1,\n i = -1;\n\n if (err instanceof TypeError && (matches = re.exec(err.message))) {\n erroneous = matches[1];\n\n for (key in destination) {\n i = 0;\n\n while (i < erroneous.length && erroneous.charAt(i) === key.charAt(i)) {\n i++;\n }\n\n if (i > mostMatchingChars) {\n mostMatchingChars = i;\n probableMatch = key;\n }\n }\n\n if (mostMatchingChars > 1) {\n suggestion = mixitup.messages.errorConfigInvalidPropertySuggestion({\n probableMatch: probableMatch\n });\n }\n\n message = mixitup.messages.errorConfigInvalidProperty({\n erroneous: erroneous,\n suggestion: suggestion\n });\n\n throw new TypeError(message);\n }\n\n throw err;\n },\n\n /**\n * @private\n * @param {string} str\n * @return {function}\n */\n\n template: function(str) {\n var re = /\\${([\\w]*)}/g,\n dynamics = {},\n matches = null;\n\n while ((matches = re.exec(str))) {\n dynamics[matches[1]] = new RegExp('\\\\${' + matches[1] + '}', 'g');\n }\n\n return function(data) {\n var key = '',\n output = str;\n\n data = data || {};\n\n for (key in dynamics) {\n output = output.replace(dynamics[key], typeof data[key] !== 'undefined' ? data[key] : '');\n }\n\n return output;\n };\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} type\n * @param {function} fn\n * @param {boolean} useCapture\n * @return {void}\n */\n\n on: function(el, type, fn, useCapture) {\n if (!el) return;\n\n if (el.addEventListener) {\n el.addEventListener(type, fn, useCapture);\n } else if (el.attachEvent) {\n el['e' + type + fn] = fn;\n\n el[type + fn] = function() {\n el['e' + type + fn](window.event);\n };\n\n el.attachEvent('on' + type, el[type + fn]);\n }\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} type\n * @param {function} fn\n * @return {void}\n */\n\n off: function(el, type, fn) {\n if (!el) return;\n\n if (el.removeEventListener) {\n el.removeEventListener(type, fn, false);\n } else if (el.detachEvent) {\n el.detachEvent('on' + type, el[type + fn]);\n el[type + fn] = null;\n }\n },\n\n /**\n * @private\n * @param {string} eventType\n * @param {object} detail\n * @param {Document} [doc]\n * @return {CustomEvent}\n */\n\n getCustomEvent: function(eventType, detail, doc) {\n var event = null;\n\n doc = doc || window.document;\n\n if (typeof window.CustomEvent === 'function') {\n event = new window.CustomEvent(eventType, {\n detail: detail,\n bubbles: true,\n cancelable: true\n });\n } else if (typeof doc.createEvent === 'function') {\n event = doc.createEvent('CustomEvent');\n event.initCustomEvent(eventType, true, true, detail);\n } else {\n event = doc.createEventObject(),\n event.type = eventType;\n\n event.returnValue = false;\n event.cancelBubble = false;\n event.detail = detail;\n }\n\n return event;\n },\n\n /**\n * @private\n * @param {Event} e\n * @return {Event}\n */\n\n getOriginalEvent: function(e) {\n if (e.touches && e.touches.length) {\n return e.touches[0];\n } else if (e.changedTouches && e.changedTouches.length) {\n return e.changedTouches[0];\n } else {\n return e;\n }\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} selector\n * @return {Number}\n */\n\n index: function(el, selector) {\n var i = 0;\n\n while ((el = el.previousElementSibling) !== null) {\n if (!selector || el.matches(selector)) {\n ++i;\n }\n }\n\n return i;\n },\n\n /**\n * Converts a dash or snake-case string to camel case.\n *\n * @private\n * @param {string} str\n * @param {boolean} [isPascal]\n * @return {string}\n */\n\n camelCase: function(str) {\n return str.toLowerCase().replace(/([_-][a-z])/g, function($1) {\n return $1.toUpperCase().replace(/[_-]/, '');\n });\n },\n\n /**\n * Converts a dash or snake-case string to pascal case.\n *\n * @private\n * @param {string} str\n * @param {boolean} [isPascal]\n * @return {string}\n */\n\n pascalCase: function(str) {\n return (str = this.camelCase(str)).charAt(0).toUpperCase() + str.slice(1);\n },\n\n /**\n * Converts a camel or pascal-case string to dash case.\n *\n * @private\n * @param {string} str\n * @return {string}\n */\n\n dashCase: function(str) {\n return str.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase();\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {HTMLHtmlElement} [doc]\n * @return {boolean}\n */\n\n isElement: function(el, doc) {\n doc = doc || window.document;\n\n if (\n window.HTMLElement &&\n el instanceof window.HTMLElement\n ) {\n return true;\n } else if (\n doc.defaultView &&\n doc.defaultView.HTMLElement &&\n el instanceof doc.defaultView.HTMLElement\n ) {\n return true;\n } else {\n return (\n el !== null &&\n el.nodeType === 1 &&\n typeof el.nodeName === 'string'\n );\n }\n },\n\n /**\n * @private\n * @param {string} htmlString\n * @param {HTMLHtmlElement} [doc]\n * @return {DocumentFragment}\n */\n\n createElement: function(htmlString, doc) {\n var frag = null,\n temp = null;\n\n doc = doc || window.document;\n\n frag = doc.createDocumentFragment();\n temp = doc.createElement('div');\n\n temp.innerHTML = htmlString.trim();\n\n while (temp.firstChild) {\n frag.appendChild(temp.firstChild);\n }\n\n return frag;\n },\n\n /**\n * @private\n * @param {Node} node\n * @return {void}\n */\n\n removeWhitespace: function(node) {\n var deleting;\n\n while (node && node.nodeName === '#text') {\n deleting = node;\n\n node = node.previousSibling;\n\n deleting.parentElement && deleting.parentElement.removeChild(deleting);\n }\n },\n\n /**\n * @private\n * @param {Array<*>} a\n * @param {Array<*>} b\n * @return {boolean}\n */\n\n isEqualArray: function(a, b) {\n var i = a.length;\n\n if (i !== b.length) return false;\n\n while (i--) {\n if (a[i] !== b[i]) return false;\n }\n\n return true;\n },\n\n /**\n * @private\n * @param {object} a\n * @param {object} b\n * @return {boolean}\n */\n\n deepEquals: function(a, b) {\n var key;\n\n if (typeof a === 'object' && a && typeof b === 'object' && b) {\n if (Object.keys(a).length !== Object.keys(b).length) return false;\n\n for (key in a) {\n if (!b.hasOwnProperty(key) || !this.deepEquals(a[key], b[key])) return false;\n }\n } else if (a !== b) {\n return false;\n }\n\n return true;\n },\n\n /**\n * @private\n * @param {Array<*>} oldArray\n * @return {Array<*>}\n */\n\n arrayShuffle: function(oldArray) {\n var newArray = oldArray.slice(),\n len = newArray.length,\n i = len,\n p = -1,\n t = [];\n\n while (i--) {\n p = ~~(Math.random() * len);\n t = newArray[i];\n\n newArray[i] = newArray[p];\n newArray[p] = t;\n }\n\n return newArray;\n },\n\n /**\n * @private\n * @param {object} list\n */\n\n arrayFromList: function(list) {\n var output, i;\n\n try {\n return Array.prototype.slice.call(list);\n } catch(err) {\n output = [];\n\n for (i = 0; i < list.length; i++) {\n output.push(list[i]);\n }\n\n return output;\n }\n },\n\n /**\n * @private\n * @param {function} func\n * @param {Number} wait\n * @param {boolean} immediate\n * @return {function}\n */\n\n debounce: function(func, wait, immediate) {\n var timeout;\n\n return function() {\n var self = this,\n args = arguments,\n callNow = immediate && !timeout,\n later = null;\n\n later = function() {\n timeout = null;\n\n if (!immediate) {\n func.apply(self, args);\n }\n };\n\n clearTimeout(timeout);\n\n timeout = setTimeout(later, wait);\n\n if (callNow) func.apply(self, args);\n };\n },\n\n /**\n * @private\n * @param {HTMLElement} element\n * @return {object}\n */\n\n position: function(element) {\n var xPosition = 0,\n yPosition = 0,\n offsetParent = element;\n\n while (element) {\n xPosition -= element.scrollLeft;\n yPosition -= element.scrollTop;\n\n if (element === offsetParent) {\n xPosition += element.offsetLeft;\n yPosition += element.offsetTop;\n\n offsetParent = element.offsetParent;\n }\n\n element = element.parentElement;\n }\n\n return {\n x: xPosition,\n y: yPosition\n };\n },\n\n /**\n * @private\n * @param {object} node1\n * @param {object} node2\n * @return {Number}\n */\n\n getHypotenuse: function(node1, node2) {\n var distanceX = node1.x - node2.x,\n distanceY = node1.y - node2.y;\n\n distanceX = distanceX < 0 ? distanceX * -1 : distanceX,\n distanceY = distanceY < 0 ? distanceY * -1 : distanceY;\n\n return Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));\n },\n\n /**\n * Calcuates the area of intersection between two rectangles and expresses it as\n * a ratio in comparison to the area of the first rectangle.\n *\n * @private\n * @param {Rect} box1\n * @param {Rect} box2\n * @return {number}\n */\n\n getIntersectionRatio: function(box1, box2) {\n var controlArea = box1.width * box1.height,\n intersectionX = -1,\n intersectionY = -1,\n intersectionArea = -1,\n ratio = -1;\n\n intersectionX =\n Math.max(0, Math.min(box1.left + box1.width, box2.left + box2.width) - Math.max(box1.left, box2.left));\n\n intersectionY =\n Math.max(0, Math.min(box1.top + box1.height, box2.top + box2.height) - Math.max(box1.top, box2.top));\n\n intersectionArea = intersectionY * intersectionX;\n\n ratio = intersectionArea / controlArea;\n\n return ratio;\n },\n\n /**\n * @private\n * @param {object} el\n * @param {string} selector\n * @param {boolean} [includeSelf]\n * @param {HTMLHtmlElement} [doc]\n * @return {Element|null}\n */\n\n closestParent: function(el, selector, includeSelf, doc) {\n var parent = el.parentNode;\n\n doc = doc || window.document;\n\n if (includeSelf && el.matches(selector)) {\n return el;\n }\n\n while (parent && parent != doc.body) {\n if (parent.matches && parent.matches(selector)) {\n return parent;\n } else if (parent.parentNode) {\n parent = parent.parentNode;\n } else {\n return null;\n }\n }\n\n return null;\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} selector\n * @param {HTMLHtmlElement} [doc]\n * @return {NodeList}\n */\n\n children: function(el, selector, doc) {\n var children = [],\n tempId = '';\n\n doc = doc || window.doc;\n\n if (el) {\n if (!el.id) {\n tempId = 'Temp' + this.randomHexKey();\n\n el.id = tempId;\n }\n\n children = doc.querySelectorAll('#' + el.id + ' > ' + selector);\n\n if (tempId) {\n el.removeAttribute('id');\n }\n }\n\n return children;\n },\n\n /**\n * Creates a clone of a provided array, with any empty strings removed.\n *\n * @private\n * @param {Array<*>} originalArray\n * @return {Array<*>}\n */\n\n clean: function(originalArray) {\n var cleanArray = [],\n i = -1;\n\n for (i = 0; i < originalArray.length; i++) {\n if (originalArray[i] !== '') {\n cleanArray.push(originalArray[i]);\n }\n }\n\n return cleanArray;\n },\n\n /**\n * Abstracts an ES6 promise into a q-like deferred interface for storage and deferred resolution.\n *\n * @private\n * @param {object} libraries\n * @return {h.Deferred}\n */\n\n defer: function(libraries) {\n var deferred = null,\n promiseWrapper = null,\n $ = null;\n\n promiseWrapper = new this.Deferred();\n\n if (mixitup.features.has.promises) {\n // ES6 native promise or polyfill\n\n promiseWrapper.promise = new Promise(function(resolve, reject) {\n promiseWrapper.resolve = resolve;\n promiseWrapper.reject = reject;\n });\n } else if (($ = (window.jQuery || libraries.$)) && typeof $.Deferred === 'function') {\n // jQuery\n\n deferred = $.Deferred();\n\n promiseWrapper.promise = deferred.promise();\n promiseWrapper.resolve = deferred.resolve;\n promiseWrapper.reject = deferred.reject;\n } else if (window.console) {\n // No implementation\n\n console.warn(mixitup.messages.warningNoPromiseImplementation());\n }\n\n return promiseWrapper;\n },\n\n /**\n * @private\n * @param {Array} tasks\n * @param {object} libraries\n * @return {Promise}\n */\n\n all: function(tasks, libraries) {\n var $ = null;\n\n if (mixitup.features.has.promises) {\n return Promise.all(tasks);\n } else if (($ = (window.jQuery || libraries.$)) && typeof $.when === 'function') {\n return $.when.apply($, tasks)\n .done(function() {\n // jQuery when returns spread arguments rather than an array or resolutions\n\n return arguments;\n });\n }\n\n // No implementation\n\n if (window.console) {\n console.warn(mixitup.messages.warningNoPromiseImplementation());\n }\n\n return [];\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @param {string} property\n * @param {Array} vendors\n * @return {string}\n */\n\n getPrefix: function(el, property, vendors) {\n var i = -1,\n prefix = '';\n\n if (h.dashCase(property) in el.style) return '';\n\n for (i = 0; prefix = vendors[i]; i++) {\n if (prefix + property in el.style) {\n return prefix.toLowerCase();\n }\n }\n\n return 'unsupported';\n },\n\n /**\n * @private\n * @return {string}\n */\n\n randomHex: function() {\n return ('00000' + (Math.random() * 16777216 << 0).toString(16)).substr(-6).toUpperCase();\n },\n\n /**\n * @private\n * @param {HTMLDocument} [doc]\n * @return {object}\n */\n\n getDocumentState: function(doc) {\n doc = typeof doc.body === 'object' ? doc : window.document;\n\n return {\n scrollTop: window.pageYOffset,\n scrollLeft: window.pageXOffset,\n docHeight: doc.documentElement.scrollHeight,\n docWidth: doc.documentElement.scrollWidth,\n viewportHeight: doc.documentElement.clientHeight,\n viewportWidth: doc.documentElement.clientWidth\n };\n },\n\n /**\n * @private\n * @param {object} obj\n * @param {function} fn\n * @return {function}\n */\n\n bind: function(obj, fn) {\n return function() {\n return fn.apply(obj, arguments);\n };\n },\n\n /**\n * @private\n * @param {HTMLElement} el\n * @return {boolean}\n */\n\n isVisible: function(el) {\n var styles = null;\n\n if (el.offsetParent) return true;\n\n styles = window.getComputedStyle(el);\n\n if (\n styles.position === 'fixed' &&\n styles.visibility !== 'hidden' &&\n styles.opacity !== '0'\n ) {\n // Fixed elements report no offsetParent,\n // but may still be invisible\n\n return true;\n }\n\n return false;\n },\n\n /**\n * @private\n * @param {object} obj\n */\n\n seal: function(obj) {\n if (typeof Object.seal === 'function') {\n Object.seal(obj);\n }\n },\n\n /**\n * @private\n * @param {object} obj\n */\n\n freeze: function(obj) {\n if (typeof Object.freeze === 'function') {\n Object.freeze(obj);\n }\n },\n\n /**\n * @private\n * @param {string} control\n * @param {string} specimen\n * @return {boolean}\n */\n\n compareVersions: function(control, specimen) {\n var controlParts = control.split('.'),\n specimenParts = specimen.split('.'),\n controlPart = -1,\n specimenPart = -1,\n i = -1;\n\n for (i = 0; i < controlParts.length; i++) {\n controlPart = parseInt(controlParts[i].replace(/[^\\d.]/g, ''));\n specimenPart = parseInt(specimenParts[i].replace(/[^\\d.]/g, '') || 0);\n\n if (specimenPart < controlPart) {\n return false;\n } else if (specimenPart > controlPart) {\n return true;\n }\n }\n\n return true;\n },\n\n /**\n * @private\n * @constructor\n */\n\n Deferred: function() {\n this.promise = null;\n this.resolve = null;\n this.reject = null;\n this.id = h.randomHex();\n },\n\n /**\n * @private\n * @param {object} obj\n * @return {boolean}\n */\n\n isEmptyObject: function(obj) {\n var key = '';\n\n if (typeof Object.keys === 'function') {\n return Object.keys(obj).length === 0;\n }\n\n for (key in obj) {\n if (obj.hasOwnProperty(key)) {\n return false;\n }\n }\n\n return true;\n },\n\n /**\n * @param {mixitup.Config.ClassNames} classNames\n * @param {string} elementName\n * @param {string} [modifier]\n * @return {string}\n */\n\n getClassname: function(classNames, elementName, modifier) {\n var classname = '';\n\n classname += classNames.block;\n\n if (classname.length) {\n classname += classNames.delineatorElement;\n }\n\n classname += classNames['element' + this.pascalCase(elementName)];\n\n if (!modifier) return classname;\n\n if (classname.length) {\n classname += classNames.delineatorModifier;\n }\n\n classname += modifier;\n\n return classname;\n },\n\n /**\n * Returns the value of a property on a given object via its string key.\n *\n * @param {object} obj\n * @param {string} stringKey\n * @return {*} value\n */\n\n getProperty: function(obj, stringKey) {\n var parts = stringKey.split('.'),\n returnCurrent = null,\n current = '',\n i = 0;\n\n if (!stringKey) {\n return obj;\n }\n\n returnCurrent = function(obj) {\n if (!obj) {\n return null;\n } else {\n return obj[current];\n }\n };\n\n while (i < parts.length) {\n current = parts[i];\n\n obj = returnCurrent(obj);\n\n i++;\n }\n\n if (typeof obj !== 'undefined') {\n return obj;\n } else {\n return null;\n }\n }\n };\n\n mixitup.h = h;\n\n /**\n * The Base class adds instance methods to all other extensible MixItUp classes,\n * enabling the calling of any registered hooks.\n *\n * @constructor\n * @namespace\n * @memberof mixitup\n * @private\n * @since 3.0.0\n */\n\n mixitup.Base = function() {};\n\n mixitup.Base.prototype = {\n constructor: mixitup.Base,\n\n /**\n * Calls any registered hooks for the provided action.\n *\n * @memberof mixitup.Base\n * @private\n * @instance\n * @since 2.0.0\n * @param {string} actionName\n * @param {Array<*>} args\n * @return {void}\n */\n\n callActions: function(actionName, args) {\n var self = this,\n hooks = self.constructor.actions[actionName],\n extensionName = '';\n\n if (!hooks || h.isEmptyObject(hooks)) return;\n\n for (extensionName in hooks) {\n hooks[extensionName].apply(self, args);\n }\n },\n\n /**\n * Calls any registered hooks for the provided filter.\n *\n * @memberof mixitup.Base\n * @private\n * @instance\n * @since 2.0.0\n * @param {string} filterName\n * @param {*} input\n * @param {Array<*>} args\n * @return {*}\n */\n\n callFilters: function(filterName, input, args) {\n var self = this,\n hooks = self.constructor.filters[filterName],\n output = input,\n extensionName = '';\n\n if (!hooks || h.isEmptyObject(hooks)) return output;\n\n args = args || [];\n\n for (extensionName in hooks) {\n args = h.arrayFromList(args);\n\n args.unshift(output);\n\n output = hooks[extensionName].apply(self, args);\n }\n\n return output;\n }\n };\n\n /**\n * The BaseStatic class holds a set of static methods which are then added to all other\n * extensible MixItUp classes as a means of integrating extensions via the addition of new\n * methods and/or actions and hooks.\n *\n * @constructor\n * @namespace\n * @memberof mixitup\n * @private\n * @since 3.0.0\n */\n\n mixitup.BaseStatic = function() {\n this.actions = {};\n this.filters = {};\n\n /**\n * Performs a shallow extend on the class's prototype, adding one or more new members to\n * the class in a single operation.\n *\n * @memberof mixitup.BaseStatic\n * @public\n * @static\n * @since 2.1.0\n * @param {object} extension\n * @return {void}\n */\n\n this.extend = function(extension) {\n h.extend(this.prototype, extension);\n };\n\n /**\n * Registers a function to be called on the action hook of the provided name.\n *\n * @memberof mixitup.BaseStatic\n * @public\n * @static\n * @since 2.1.0\n * @param {string} hookName\n * @param {string} extensionName\n * @param {function} func\n * @return {void}\n */\n\n this.registerAction = function(hookName, extensionName, func) {\n (this.actions[hookName] = this.actions[hookName] || {})[extensionName] = func;\n };\n\n /**\n * Registers a function to be called on the filter of the provided name.\n *\n * @memberof mixitup.BaseStatic\n * @public\n * @static\n * @since 2.1.0\n * @param {string} hookName\n * @param {string} extensionName\n * @param {function} func\n * @return {void}\n */\n\n this.registerFilter = function(hookName, extensionName, func) {\n (this.filters[hookName] = this.filters[hookName] || {})[extensionName] = func;\n };\n };\n\n /**\n * The `mixitup.Features` class performs all feature and CSS prefix detection\n * neccessary for MixItUp to function correctly, as well as storing various\n * string and array constants. All feature decection is on evaluation of the\n * library and stored in a singleton instance for use by other internal classes.\n *\n * @constructor\n * @namespace\n * @memberof mixitup\n * @private\n * @since 3.0.0\n */\n\n mixitup.Features = function() {\n mixitup.Base.call(this);\n\n this.callActions('beforeConstruct');\n\n this.boxSizingPrefix = '';\n this.transformPrefix = '';\n this.transitionPrefix = '';\n\n this.boxSizingPrefix = '';\n this.transformProp = '';\n this.transformRule = '';\n this.transitionProp = '';\n this.perspectiveProp = '';\n this.perspectiveOriginProp = '';\n\n this.has = new mixitup.Has();\n\n this.canary = null;\n\n this.BOX_SIZING_PROP = 'boxSizing';\n this.TRANSITION_PROP = 'transition';\n this.TRANSFORM_PROP = 'transform';\n this.PERSPECTIVE_PROP = 'perspective';\n this.PERSPECTIVE_ORIGIN_PROP = 'perspectiveOrigin';\n this.VENDORS = ['Webkit', 'moz', 'O', 'ms'];\n\n this.TWEENABLE = [\n 'opacity',\n 'width', 'height',\n 'marginRight', 'marginBottom',\n 'x', 'y',\n 'scale',\n 'translateX', 'translateY', 'translateZ',\n 'rotateX', 'rotateY', 'rotateZ'\n ];\n\n this.callActions('afterConstruct');\n };\n\n mixitup.BaseStatic.call(mixitup.Features);\n\n mixitup.Features.prototype = Object.create(mixitup.Base.prototype);\n\n h.extend(mixitup.Features.prototype,\n /** @lends mixitup.Features */\n {\n constructor: mixitup.Features,\n\n /**\n * @private\n * @return {void}\n */\n\n init: function() {\n var self = this;\n\n self.callActions('beforeInit', arguments);\n\n self.canary = document.createElement('div');\n\n self.setPrefixes();\n self.runTests();\n\n self.callActions('beforeInit', arguments);\n },\n\n /**\n * @private\n * @return {void}\n */\n\n runTests: function() {\n var self = this;\n\n self.callActions('beforeRunTests', arguments);\n\n self.has.promises = typeof window.Promise === 'function';\n self.has.transitions = self.transitionPrefix !== 'unsupported';\n\n self.callActions('afterRunTests', arguments);\n\n h.freeze(self.has);\n },\n\n /**\n * @private\n * @return {void}\n */\n\n setPrefixes: function() {\n var self = this;\n\n self.callActions('beforeSetPrefixes', arguments);\n\n self.transitionPrefix = h.getPrefix(self.canary, 'Transition', self.VENDORS);\n self.transformPrefix = h.getPrefix(self.canary, 'Transform', self.VENDORS);\n self.boxSizingPrefix = h.getPrefix(self.canary, 'BoxSizing', self.VENDORS);\n\n self.boxSizingProp = self.boxSizingPrefix ?\n self.boxSizingPrefix + h.pascalCase(self.BOX_SIZING_PROP) : self.BOX_SIZING_PROP;\n\n self.transitionProp = self.transitionPrefix ?\n self.transitionPrefix + h.pascalCase(self.TRANSITION_PROP) : self.TRANSITION_PROP;\n\n self.transformProp = self.transformPrefix ?\n self.transformPrefix + h.pascalCase(self.TRANSFORM_PROP) : self.TRANSFORM_PROP;\n\n self.transformRule = self.transformPrefix ?\n '-' + self.transformPrefix + '-' + self.TRANSFORM_PROP : self.TRANSFORM_PROP;\n\n self.perspectiveProp = self.transformPrefix ?\n self.transformPrefix + h.pascalCase(self.PERSPECTIVE_PROP) : self.PERSPECTIVE_PROP;\n\n self.perspectiveOriginProp = self.transformPrefix ?\n self.transformPrefix + h.pascalCase(self.PERSPECTIVE_ORIGIN_PROP) :\n self.PERSPECTIVE_ORIGIN_PROP;\n\n self.callActions('afterSetPrefixes', arguments);\n }\n });\n\n /**\n * @constructor\n * @memberof mixitup\n * @private\n * @since 3.0.0\n */\n\n mixitup.Has = function() {\n this.transitions = false;\n this.promises = false;\n\n h.seal(this);\n };\n\n // Assign a singleton instance to `mixitup.features` and initialise:\n\n mixitup.features = new mixitup.Features();\n\n mixitup.features.init();\n\n /**\n * A group of properties defining the mixer's animation and effects settings.\n *\n * @constructor\n * @memberof mixitup.Config\n * @name animation\n * @namespace\n * @public\n * @since 2.0.0\n */\n\n mixitup.ConfigAnimation = function() {\n mixitup.Base.call(this);\n\n this.callActions('beforeConstruct');\n\n /**\n * A boolean dictating whether or not animation should be enabled for the MixItUp instance.\n * If `false`, all operations will occur instantly and syncronously, although callback\n * functions and any returned promises will still be fulfilled.\n *\n * @example
Example: Create a mixer with all animations disabled
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * enable: false\n * }\n * });\n *\n * @name enable\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.enable = true;\n\n /**\n * A string of one or more space-separated properties to which transitions will be\n * applied for all filtering animations.\n *\n * Properties can be listed any order or combination, although they will be applied in a specific\n * predefined order to produce consistent results.\n *\n * To learn more about available effects, experiment by providing different animation configurations to any of our [demos](https://patrickunka.github.io/mixitup/demos).\n *\n * @example
Example: Apply \"fade\" and \"translateZ\" effects to all animations
\n * // As targets are filtered in and out, they will fade between\n * // opacity 1 and 0 and transform between translateZ(-100px) and\n * // translateZ(0).\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effects: 'fade translateZ(-100px)'\n * }\n * });\n *\n * @name effects\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default 'fade scale'\n */\n\n this.effects = 'fade scale';\n\n /**\n * A string of one or more space-seperated effects to be applied only to filter-in\n * animations, overriding `config.animation.effects` if set.\n *\n * @example
Example: Apply downwards vertical translate to targets being filtered in
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effectsIn: 'fade translateY(-100%)'\n * }\n * });\n *\n * @name effectsIn\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default ''\n */\n\n this.effectsIn = '';\n\n /**\n * A string of one or more space-seperated effects to be applied only to filter-out\n * animations, overriding `config.animation.effects` if set.\n *\n * @example
Example: Apply upwards vertical translate to targets being filtered out
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effectsOut: 'fade translateY(-100%)'\n * }\n * });\n *\n * @name effectsOut\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default ''\n */\n\n this.effectsOut = '';\n\n /**\n * An integer dictating the duration of all MixItUp animations in milliseconds, not\n * including any additional delay apllied via the `'stagger'` effect.\n *\n * @example
Example: Apply an animation duration of 200ms to all mixitup animations
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * duration: 200\n * }\n * });\n *\n * @name duration\n * @memberof mixitup.Config.animation\n * @instance\n * @type {number}\n * @default 600\n */\n\n this.duration = 600;\n\n /**\n * A valid CSS3 transition-timing function or shorthand. For a full list of accepted\n * values, visit easings.net.\n *\n * @example
Example 1: Apply \"ease-in-out\" easing to all animations
Example 2: Apply a custom \"cubic-bezier\" easing function to all animations
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'\n * }\n * });\n *\n * @name easing\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default 'ease'\n */\n\n this.easing = 'ease';\n\n /**\n * A boolean dictating whether or not to apply perspective to the MixItUp container\n * during animations. By default, perspective is always applied and creates the\n * illusion of three-dimensional space for effects such as `translateZ`, `rotateX`,\n * and `rotateY`.\n *\n * You may wish to disable this and define your own perspective settings via CSS.\n *\n * @example
Example: Prevent perspective from being applied to any 3D transforms
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * applyPerspective: false\n * }\n * });\n *\n * @name applyPerspective\n * @memberof mixitup.Config.animation\n * @instance\n * @type {bolean}\n * @default true\n */\n\n this.applyPerspective = true;\n\n /**\n * The perspective distance value to be applied to the container during animations,\n * affecting any 3D-transform-based effects.\n *\n * @example
Example: Set a perspective distance of 2000px
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effects: 'rotateY(-25deg)',\n * perspectiveDistance: '2000px'\n * }\n * });\n *\n * @name perspectiveDistance\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default '3000px'\n */\n\n this.perspectiveDistance = '3000px';\n\n /**\n * The perspective-origin value to be applied to the container during animations,\n * affecting any 3D-transform-based effects.\n *\n * @example
Example: Set a perspective origin in the top-right of the container
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effects: 'transateZ(-200px)',\n * perspectiveOrigin: '100% 0'\n * }\n * });\n *\n * @name perspectiveOrigin\n * @memberof mixitup.Config.animation\n * @instance\n * @type {string}\n * @default '50% 50%'\n */\n\n this.perspectiveOrigin = '50% 50%';\n\n /**\n * A boolean dictating whether or not to enable the queuing of operations.\n *\n * If `true` (default), and a control is clicked or an API call is made while another\n * operation is progress, the operation will go into the queue and will be automatically exectuted\n * when the previous operaitons is finished.\n *\n * If `false`, any requested operations will be ignored, and the `onMixBusy` callback and `mixBusy`\n * event will be fired. If `debug.showWarnings` is enabled, a console warning will also occur.\n *\n * @example
Example: Disable queuing
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * queue: false\n * }\n * });\n *\n * @name queue\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.queue = true;\n\n /**\n * An integer dictacting the maximum number of operations allowed in the queue at\n * any time, when queuing is enabled.\n *\n * @example
Example: Allow a maximum of 5 operations in the queue at any time
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * queueLimit: 5\n * }\n * });\n *\n * @name queueLimit\n * @memberof mixitup.Config.animation\n * @instance\n * @type {number}\n * @default 3\n */\n\n this.queueLimit = 3;\n\n /**\n * A boolean dictating whether or not to transition the height and width of the\n * container as elements are filtered in and out. If disabled, the container height\n * will change abruptly.\n *\n * It may be desirable to disable this on mobile devices as the CSS `height` and\n * `width` properties do not receive GPU-acceleration and can therefore cause stuttering.\n *\n * @example
Example 1: Disable the transitioning of the container height and/or width
Example 2: Disable the transitioning of the container height and/or width for mobile devices only
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * animateResizeContainer: myFeatureTests.isMobile ? false : true\n * }\n * });\n *\n * @name animateResizeContainer\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.animateResizeContainer = true;\n\n /**\n * A boolean dictating whether or not to transition the height and width of target\n * elements as they change throughout the course of an animation.\n *\n * This is often a must for flex-box grid layouts where the size of target elements may change\n * depending on final their position in relation to their siblings, or for `.changeLayout()`\n * operations where the size of targets change between layouts.\n *\n * NB: This feature requires additional calculations and manipulation to non-hardware-accelerated\n * properties which may adversely affect performance on slower devices, and is therefore\n * disabled by default.\n *\n * @example
Example: Enable the transitioning of target widths and heights
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * animateResizeTargets: true\n * }\n * });\n *\n * @name animateResizeTargets\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default false\n */\n\n this.animateResizeTargets = false;\n\n /**\n * A custom function used to manipulate the order in which the stagger delay is\n * incremented when using the ‘stagger’ effect.\n *\n * When using the 'stagger' effect, the delay applied to each target element is incremented\n * based on its index. You may create a custom function to manipulate the order in which the\n * delay is incremented and create engaging non-linear stagger effects.\n *\n * The function receives the index of the target element as a parameter, and must\n * return an integer which serves as the multiplier for the stagger delay.\n *\n * @example
Example 1: Stagger target elements by column in a 3-column grid
Example 2: Using an algorithm to produce a more complex sequence
\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effects: 'fade stagger(100ms)',\n * staggerSequence: function(i) {\n * return (2*i) - (5*((i/3) - ((1/3) * (i%3))));\n * }\n * }\n * });\n *\n * @name staggerSequence\n * @memberof mixitup.Config.animation\n * @instance\n * @type {function}\n * @default null\n */\n\n this.staggerSequence = null;\n\n /**\n * A boolean dictating whether or not to reverse the direction of `translate`\n * and `rotate` transforms for elements being filtered out.\n *\n * It can be used to create carousel-like animations where elements enter and exit\n * from opposite directions. If enabled, the effect `translateX(-100%)` for elements\n * being filtered in would become `translateX(100%)` for targets being filtered out.\n *\n * This functionality can also be achieved by providing seperate effects\n * strings for `config.animation.effectsIn` and `config.animation.effectsOut`.\n *\n * @example
Example: Reverse the desired direction on any translate/rotate effect for targets being filtered out
\n * // Elements being filtered in will be translated from '100%' to '0' while\n * // elements being filtered out will be translated from 0 to '-100%'\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * effects: 'fade translateX(100%)',\n * reverseOut: true,\n * nudge: false // Disable nudging to create a carousel-like effect\n * }\n * });\n *\n * @name reverseOut\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default false\n */\n\n this.reverseOut = false;\n\n /**\n * A boolean dictating whether or not to \"nudge\" the animation path of targets\n * when they are being filtered in and out simulatenously.\n *\n * This has been the default behavior of MixItUp since version 1, but it\n * may be desirable to disable this effect when filtering directly from\n * one exclusive set of targets to a different exclusive set of targets,\n * to create a carousel-like effect, or a generally more subtle animation.\n *\n * @example
Example: Disable the \"nudging\" of targets being filtered in and out simulatenously
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * nudge: false\n * }\n * });\n *\n * @name nudge\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.nudge = true;\n\n /**\n * A boolean dictating whether or not to clamp the height of the container while MixItUp's\n * geometry tests are carried out before an operation.\n *\n * To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the\n * height of the container might affect its vertical positioning in the viewport\n * (e.g. a vertically-centered container), this should be turned off to ensure accurate\n * test results and a smooth animation.\n *\n * @example
Example: Disable container height-clamping
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * clampHeight: false\n * }\n * });\n *\n * @name clampHeight\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.clampHeight = true;\n\n /**\n * A boolean dictating whether or not to clamp the width of the container while MixItUp's\n * geometry tests are carried out before an operation.\n *\n * To prevent scroll-bar flicker, clamping is turned on by default. But in the case where the\n * width of the container might affect its horitzontal positioning in the viewport\n * (e.g. a horizontall-centered container), this should be turned off to ensure accurate\n * test results and a smooth animation.\n *\n * @example
Example: Disable container width-clamping
\n *\n * var mixer = mixitup(containerEl, {\n * animation: {\n * clampWidth: false\n * }\n * });\n *\n * @name clampWidth\n * @memberof mixitup.Config.animation\n * @instance\n * @type {boolean}\n * @default true\n */\n\n this.clampWidth = true;\n\n this.callActions('afterConstruct');\n\n h.seal(this);\n };\n\n mixitup.BaseStatic.call(mixitup.ConfigAnimation);\n\n mixitup.ConfigAnimation.prototype = Object.create(mixitup.Base.prototype);\n\n mixitup.ConfigAnimation.prototype.constructor = mixitup.ConfigAnimation;\n\n /**\n * A group of properties relating to the behavior of the Mixer.\n *\n * @constructor\n * @memberof mixitup.Config\n * @name behavior\n * @namespace\n * @public\n * @since 3.1.12\n */\n\n mixitup.ConfigBehavior = function() {\n mixitup.Base.call(this);\n\n this.callActions('beforeConstruct');\n\n /**\n * A boolean dictating whether to allow \"live\" sorting of the mixer.\n *\n * Because of the expensive nature of sorting, MixItUp makes use of several\n * internal optimizations to skip redundant sorting operations, such as when\n * the newly requested sort command is the same as the active one. The caveat\n * to this optimization is that \"live\" edits to the value of a target's sorting\n * attribute will be ignored when requesting a re-sort by the same attribute.\n *\n * By setting to `behavior.liveSort` to `true`, the mixer will always re-sort\n * regardless of whether or not the sorting attribute and order have changed.\n *\n * @example
Example: Enabling `liveSort` to allow for re-sorting
\n *\n * var mixer = mixitup(containerEl, {\n * behavior: {\n * liveSort: true\n * },\n * load: {\n * sort: 'edited:desc'\n * }\n * });\n *\n * var target = containerEl.children[3];\n *\n * console.log(target.getAttribute('data-edited')); // '2015-04-24'\n *\n * target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date\n *\n * mixer.sort('edited:desc')\n * .then(function(state) {\n * // The target is now at the top of the list\n *\n * console.log(state.targets[0] === target); // true\n * });\n *\n * @name liveSort\n * @memberof mixitup.Config.behavior\n * @instance\n * @type {boolean}\n * @default false\n */\n\n this.liveSort = false;\n\n this.callActions('afterConstruct');\n\n h.seal(this);\n };\n\n mixitup.BaseStatic.call(mixitup.ConfigBehavior);\n\n mixitup.ConfigBehavior.prototype = Object.create(mixitup.Base.prototype);\n\n mixitup.ConfigBehavior.prototype.constructor = mixitup.ConfigBehavior;\n\n /**\n * A group of optional callback functions to be invoked at various\n * points within the lifecycle of a mixer operation.\n *\n * Each function is analogous to an event of the same name triggered from the\n * container element, and is invoked immediately after it.\n *\n * All callback functions receive the current `state` object as their first\n * argument, as well as other more specific arguments described below.\n *\n * @constructor\n * @memberof mixitup.Config\n * @name callbacks\n * @namespace\n * @public\n * @since 2.0.0\n */\n\n mixitup.ConfigCallbacks = function() {\n mixitup.Base.call(this);\n\n this.callActions('beforeConstruct');\n\n /**\n * A callback function invoked immediately after any MixItUp operation is requested\n * and before animations have begun.\n *\n * A second `futureState` argument is passed to the function which represents the final\n * state of the mixer once the requested operation has completed.\n *\n * @example
Example: Adding an `onMixStart` callback function
\n * var mixer = mixitup(containerEl, {\n * callbacks: {\n * onMixStart: function(state, futureState) {\n * console.log('Starting operation...');\n * }\n * }\n * });\n *\n * @name onMixStart\n * @memberof mixitup.Config.callbacks\n * @instance\n * @type {function}\n * @default null\n */\n\n this.onMixStart = null;\n\n /**\n * A callback function invoked when a MixItUp operation is requested while another\n * operation is in progress, and the animation queue is full, or queueing\n * is disabled.\n *\n * @example
Example: Adding an `onMixBusy` callback function
\n * var mixer = mixitup(containerEl, {\n * callbacks: {\n * onMixBusy: function(state) {\n * console.log('Mixer busy');\n * }\n * }\n * });\n *\n * @name onMixBusy\n * @memberof mixitup.Config.callbacks\n * @instance\n * @type {function}\n * @default null\n */\n\n this.onMixBusy = null;\n\n /**\n * A callback function invoked after any MixItUp operation has completed, and the\n * state has been updated.\n *\n * @example
Example: Adding an `onMixEnd` callback function
\n * var mixer = mixitup(containerEl, {\n * callbacks: {\n * onMixEnd: function(state) {\n * console.log('Operation complete');\n * }\n * }\n * });\n *\n * @name onMixEnd\n * @memberof mixitup.Config.callbacks\n * @instance\n * @type {function}\n * @default null\n */\n\n this.onMixEnd = null;\n\n /**\n * A callback function invoked whenever an operation \"fails\", i.e. no targets\n * could be found matching the requested filter.\n *\n * @example
Example: Adding an `onMixFail` callback function
\n * var mixer = mixitup(containerEl, {\n * callbacks: {\n * onMixFail: function(state) {\n * console.log('No items could be found matching the requested filter');\n * }\n * }\n * });\n *\n * @name onMixFail\n * @memberof mixitup.Config.callbacks\n * @instance\n * @type {function}\n * @default null\n */\n\n this.onMixFail = null;\n\n /**\n * A callback function invoked whenever a MixItUp control is clicked, and before its\n * respective operation is requested.\n *\n * The clicked element is assigned to the `this` keyword within the function. The original\n * click event is passed to the function as the second argument, which can be useful if\n * using `` tags as controls where the default behavior needs to be prevented.\n *\n * Returning `false` from the callback will prevent the control click from triggering\n * an operation.\n *\n * @example