Initial version

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+components
+.tmp
+.DS_Store
+.log
+coverage/

.jscsrc

@@ -0,0 +1,97 @@
+{
+    "requireCurlyBraces": [
+        "else",
+        "for",
+        "while",
+        "do",
+        "try",
+        "catch"
+    ],
+    "requireSpaceAfterKeywords": [
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "case",
+        "return",
+        "try",
+        "typeof"
+    ],
+    "safeContextKeyword": ["self"],
+    "maximumLineLength": {
+      "value": 140,
+      "allowComments": false,
+      "allowRegex": true
+    },
+    "requireSpaceBeforeBlockStatements": true,
+    "requireParenthesesAroundIIFE": true,
+    "requireSpaceAfterLineComment": {
+        "allExcept": ["#", "="]
+    },
+    "requireSpacesInConditionalExpression": true,
+    "disallowSpacesInNamedFunctionExpression": {
+        "beforeOpeningRoundBrace": true
+    },
+    "disallowSpacesInFunctionDeclaration": {
+        "beforeOpeningRoundBrace": true
+    },
+    "disallowFunctionDeclarations": true,
+    "requireSpaceBetweenArguments": true,
+    "requireMultipleVarDecl": {
+        "allExcept": ["require"]
+    },
+    "requireBlocksOnNewline": true,
+    "requireSemicolons": true,
+    "disallowEmptyBlocks": true,
+    "disallowSpacesInsideArrayBrackets": true,
+    "disallowSpacesInsideParentheses": true,
+    "requireCommaBeforeLineBreak": true,
+    "requireLineBreakAfterVariableAssignment": true,
+    "requirePaddingNewlinesBeforeKeywords": [
+        "do",
+        "for",
+        "if",
+        "switch",
+        "try",
+        "void",
+        "while",
+        "return"
+    ],
+    "requirePaddingNewLinesInObjects": true,
+    "disallowSpaceAfterPrefixUnaryOperators": true,
+    "disallowSpaceBeforePostfixUnaryOperators": true,
+    "disallowSpaceBeforeBinaryOperators": [
+        ","
+    ],
+    "requireSpacesInForStatement": true,
+    "requireSpaceBeforeBinaryOperators": true,
+    "requireSpaceAfterBinaryOperators": true,
+    "disallowKeywords": [
+        "with"
+    ],
+    "validateIndentation": 4,
+    "disallowMixedSpacesAndTabs": true,
+    "disallowTrailingWhitespace": true,
+    "disallowTrailingComma": true,
+    "disallowKeywordsOnNewLine": [
+        "else"
+    ],
+    "requireCapitalizedConstructors": true,
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowMultipleLineStrings": true,
+    "disallowMultipleLineBreaks": true,
+    "requireSpaceBeforeObjectValues": true,
+    "validateQuoteMarks": "'",
+    "jsDoc": {
+        "checkAnnotations": true,
+        "requireParamTypes": true,
+        "checkParamNames": true,
+        "checkParamExistence": true,
+        // "checkRedundantParams": true,
+        "checkReturnTypes": true,
+        "requireNewlineAfterDescription": true,
+        // "requireParamDescription": true,
+        "requireDescriptionCompleteSentence": true
+    }
+}

.jshintrc

@@ -0,0 +1,19 @@
+{
+    "-W030": true,
+    "-W053": true,
+    "-W084": true,
+    "-W055": true,
+    "-W069": true,
+    "-W097": true,
+    "undef": true,
+    "unused": true,
+    "laxbreak": true,
+    "node": true,
+    "browser": true,
+    "predef": [
+        "window",
+        "Promise",
+        "define",
+        "console"
+    ]
+}

CHANGELOG.md

@@ -0,0 +1,20 @@
+Change Log
+==========
+
+## 3.3.0
+- Adds missing documentation for various configuration options.
+- Adds `onPaginateStart` and `onPaginateEnd` callbacks, and corresponding events.
+- Adds a load more button demo.
+
+## 3.2.0
+
+- Adds ability to query and render multiple `pageList` and `pageStats` elements in the DOM.
+- Adds two new demos
+
+## 3.1.0
+
+- Bump core dependency to 3.1.2, improves version comparison functionality.
+
+## 3.0.0
+
+- Release

README.md

@@ -0,0 +1,169 @@
+# MixItUp Pagination
+
+MixItUp Pagination is a premium extension for the MixItUp 3, adding dynamic and responsive client-side pagination to filterable and sortable content.
+
+### Features
+
+- Paginate through **filtered** and **sorted** content
+- Real-time page limit configuration – ideal for **responsive** grids
+- Real-time **dynamically generated controls** and **page statistics** based on the current filter, sort, and page limit values
+- New API methods
+- New configuration options
+
+### Uses
+
+- Increase usability and reduce excessive scrolling when dealing with large datasets
+- Provide visual feedback about content to users as they filter and sort
+
+### Limitations
+
+- Client-side only - the entire target collection must exist in the DOM
+
+*NB: If you're looking to integrate server-side ajax pagination with MixItUp, consider using MixItUp 3's Dataset API.*
+
+## Get Started
+
+### Installing Extensions
+
+Premium extensions are not publicly available via GitHub or NPM and must therefore be downloaded from your KunkaLabs account after purchase. Once downloaded they can be included in your project in a directory of your choosing, and then required as modules, or globally via a script tag.
+
+#### Script Tag
+
+If using a script tag, you simply need to load the pagination distribution script (i.e. `mixitup-pagination.min.js`) **after** mixitup, and the extension will automatically detect the `mixitup` global variable and install itself.
+
+```html
+        ...
+
+        <script src="/path/to/mixitup.min.js"></script>
+        <script src="/path/to/mixitup-pagination.min.js"></script>
+    </body>
+</html>
+```
+
+#### Module Import
+
+If you are building a modular JavaScript project with Webpack, Browserify, or RequireJS, no global variables are exposed. Firstly require both the MixItUp core *and* the Pagination extension into your module. Then call `mixitup.use()` with the extension passed in as an argument. Your extension will be installed and made available to all MixItUp instances throughout your project.
+
+```js
+// ES2015
+
+import mixitup from 'mixitup'; // loaded from node_modules
+import mixitupPagination from '../path/to/mixitup-pagination'; // loaded from a directory of your choice within your project
+
+// Call the mixitup factory's .use() method, passing in the extension to install it
+
+mixitup.use(mixitupPagination);
+```
+
+```js
+// CommonJS
+
+var mixitup = require('mixitup');
+var mixitupPagination = require('../path/to/mixitup-pagination');
+
+mixitup.use(mixitupPagination);
+```
+
+```js
+// AMD
+
+require([
+    'mixitup',
+    '../path/to/mixitup-pagination'
+], function(
+    mixitup,
+    mixitupPagination
+) {
+    mixitup.use(mixitupPagination);
+});
+```
+
+You need only call the `.use()` function once per project, per extension, as module loaders will cache a single reference to MixItUp inclusive of all changes made.
+
+### Using Pagination
+
+MixItUp Pagination extends MixItUp's API and configuration object with various new methods and properties.
+
+By default, pagination functionality is disabled so that you can use MixItUp as normal, even with the extension installed. To enable pagination functionality for a mixer, you simply need to set a value for the `pagination.limit` configuration option.
+
+```js
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8 // impose a limit of 8 targets per page
+    }
+});
+```
+
+### Page List UI
+
+Given a "page list" element in DOM, MixItUp Pagination will automatically generate a list of "pager" controls allowing the user to move from page to page, as well as providing visual feedback about the current number of pages.
+
+MixItUp Pagination will query the DOM for an element matching the `selectors.pageList` configuration option (`'.mixitup-page-list'` by default). If a matching element is found, a list of pager buttons will be automatically rendered inside this element.
+
+```html
+<div class="container">
+    <div class="mix"></div>
+    <div class="mix"></div>
+    ...
+</div>
+
+<div class="mixitup-page-list"></div>
+```
+
+### Page Stats UI
+
+Given a "page stats" element in the DOM, MixItUp Pagination will automatically render information about the page and matching dataset, for example "5-8 of 32".
+
+MixItUp Pagination will query the DOM for an element matching the `selectors.pageStats` configuration option (`'.mixitup-page-stats'` by default). If a matching element is found, content will be rendered inside this element.
+
+```html
+<div class="container">
+    <div class="mix"></div>
+    <div class="mix"></div>
+    ...
+</div>
+
+<div class="mixitup-page-list"></div>
+<div class="mixitup-page-stats"></div>
+```
+
+## Using the API
+
+As with the MixItUp core, the default "pager" controls are optional. If you wish to change the curent page or page limit via the API, MixItUp Pagination adds several new mixer API methods allowing API-based full control.
+
+###### Example: Calling an API method
+
+```js
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 12
+    }
+});
+
+mixer.paginate(2); // go to page 2
+```
+
+Further reading: [Mixer API Methods](./docs/mixitup.Mixer.md)
+
+## Configuration
+
+MixItUp Pagination adds various new properties to the configuration object. If no configuration object is passed, the default settings will be used. However, `pagination.limit` must always be set to a value greater than `0` if you wish to enable pagination on instantiation.
+
+###### Example: Customizing pagination options
+
+```js
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 4,
+        maintainActivePage: false,
+        loop: true,
+        hidePageListIfSinglePage: true
+    },
+    load: {
+        page: 3 // load page 3 on instantiation
+    }
+});
+```
+
+Further reading: [Configuration Object](/docs/mixitup.Config.md)
+

demos/basic/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="../reset.css" rel="stylesheet"/>
+        <link href="./style.css" rel="stylesheet"/>
+
+        <title>MixItUp Pagination Demo - Basic Pagination Functionality</title>
+    </head>
+    <body>
+        <div class="controls">
+            <button type="button" class="control" data-filter="all">All</button>
+            <button type="button" class="control" data-filter=".green">Green</button>
+            <button type="button" class="control" data-filter=".blue">Blue</button>
+            <button type="button" class="control" data-filter=".pink">Pink</button>
+            <button type="button" class="control" data-filter="none">None</button>
+
+            <button type="button" class="control" data-sort="default:asc">Asc</button>
+            <button type="button" class="control" data-sort="default:desc">Desc</button>
+        </div>
+
+        <div class="container">
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <div class="controls-pagination">
+            <div class="mixitup-page-list"></div>
+            <div class="mixitup-page-stats"></div>
+        </div>
+
+        <script src="../mixitup.min.js"></script>
+        <script src="../../dist/mixitup-pagination.js"></script>
+
+        <script>
+            var containerEl = document.querySelector('.container');
+
+            var mixer = mixitup(containerEl, {
+                pagination: {
+                    limit: 4
+                }
+            });
+        </script>
+    </body>
+</html>

demos/basic/style.css

@@ -0,0 +1,270 @@
+html,
+body {
+    height: 100%;
+    background: #f2f2f2;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* Controls
+---------------------------------------------------------------------- */
+
+.controls {
+    padding: 1rem;
+    background: #333;
+    font-size: 0.1px;
+}
+
+.control {
+    position: relative;
+    display: inline-block;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #444;
+    cursor: pointer;
+    font-size: 0.1px;
+    color: white;
+    transition: background 150ms;
+}
+
+.control:hover {
+    background: #3f3f3f;
+}
+
+.control[data-filter]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background: currentColor;
+    transition: background-color 150ms, border-color 150ms;
+}
+
+.control[data-sort]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-left: 2px solid;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    transform:  translateY(1px) rotate(45deg);
+}
+
+.control[data-sort*=":desc"]:after {
+    transform:  translateY(-4px) rotate(-135deg);
+}
+
+.mixitup-control-active {
+    background: #393939;
+}
+
+.mixitup-control-active[data-filter]:after {
+    background: transparent;
+}
+
+.control:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.control:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+
+.control[data-filter] + .control[data-sort] {
+    margin-left: .75rem;
+}
+
+.control[data-filter=".green"] {
+    color: #91e6c7;
+}
+
+.control[data-filter=".blue"] {
+    color: #5ecdde;
+}
+
+.control[data-filter=".pink"] {
+    color: #d595aa;
+}
+
+.control[data-filter="none"] {
+    color: #2f2f2f;
+}
+
+/* Pagination Controls
+---------------------------------------------------------------------- */
+
+.controls-pagination {
+    padding: 1rem;
+    font-size: 0.1px;
+    text-align: justify;
+}
+
+.controls-pagination:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+.mixitup-page-list,
+.mixitup-page-stats {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.mixitup-page-list {
+    text-align: left;
+}
+
+.mixitup-page-stats {
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+}
+
+.mixitup-control {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #fff;
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    margin-right: 1px;
+    cursor: pointer;
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+    transition: color 150ms, border-color 150ms;
+    vertical-align: middle;
+}
+
+.mixitup-control:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.mixitup-control:last-child {
+    border-radius: 0 3px 3px 0;
+}
+
+.mixitup-control:not(.mixitup-control-active):hover {
+    color: #91e6c7;
+}
+
+.mixitup-control-active {
+    border-bottom-color: #91e6c7;
+    cursor: default;
+}
+
+.mixitup-control:disabled {
+    background: #eaeaea;
+    color: #aaa;
+    cursor: default;
+}
+
+.mixitup-control-truncation-marker {
+    background: transparent;
+    pointer-events: none;
+    line-height: 2.2em;
+}
+
+/* Container
+---------------------------------------------------------------------- */
+
+.container {
+    padding: 1rem;
+    text-align: justify;
+    font-size: 0.1px;
+}
+
+.container:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+/* Target Elements
+---------------------------------------------------------------------- */
+
+.mix,
+.gap {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.mix {
+    background: #fff;
+    border-top: .5rem solid currentColor;
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.mix:before {
+    content: '';
+    display: inline-block;
+    padding-top: 56.25%;
+}
+
+.mix.green {
+    color: #91e6c7;
+}
+
+.mix.pink {
+    color: #d595aa;
+}
+
+.mix.blue {
+    color: #5ecdde;
+}
+
+/* Grid Breakpoints
+---------------------------------------------------------------------- */
+
+/* 2 Columns */
+
+.mix,
+.gap {
+    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
+}
+
+/* 3 Columns */
+
+@media screen and (min-width: 541px) {
+    .mix,
+    .gap {
+        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
+    }
+}
+
+/* 4 Columns */
+
+@media screen and (min-width: 961px) {
+    .mix,
+    .gap {
+        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
+    }
+}
+
+/* 5 Columns */
+
+@media screen and (min-width: 1281px) {
+    .mix,
+    .gap {
+        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
+    }
+}
+
+

demos/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>MixItUp Pagination Demos</title>
+    </head>
+    <body>
+        <h1>MixItUp Pagination Demos</h1>
+
+        <ul>
+            <li><a href="./basic/">Basic Pagination Functionality</a></li>
+            <li><a href="./multiple-pagination-ui/">Multiple Pagination UI</a></li>
+            <li><a href="./responsive-pagination/">Responsive Pagination</a></li>
+            <li><a href="./load-more-button/">Load More Button</a></li>
+            <li><a href="./infinite-scroll/">Infinite Scroll</a></li>
+        </ul>
+    </body>
+</html>

demos/infinite-scroll/index.html

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="../reset.css" rel="stylesheet"/>
+        <link href="./style.css" rel="stylesheet"/>
+
+        <title>MixItUp Pagination Demo - Infinite Scroll</title>
+
+        <!--
+        NB: This grid's responsive behavior has been limited to 2 or 4 columns for
+        simplicity, but could easily be combined with the responsive pagination demo
+        to load in a dynamic amount of items while scrolling, as per the current
+        column count.
+        -->
+    </head>
+    <body>
+        <div class="controls">
+            <button type="button" class="control" data-filter="all">All</button>
+            <button type="button" class="control" data-filter=".green">Green</button>
+            <button type="button" class="control" data-filter=".blue">Blue</button>
+            <button type="button" class="control" data-filter=".pink">Pink</button>
+            <button type="button" class="control" data-filter="none">None</button>
+
+            <button type="button" class="control" data-sort="default:asc">Asc</button>
+            <button type="button" class="control" data-sort="default:desc">Desc</button>
+        </div>
+
+        <div class="container">
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <script src="../mixitup.min.js"></script>
+        <script src="../../dist/mixitup-pagination.js"></script>
+
+        <script>
+            var containerEl = document.querySelector('.container');
+            var loadMoreEl = document.querySelector('.load-more');
+            var currentLimit = 16;
+            var incrementAmount = 4;
+            var canLoadMore = true;
+            var scrollThreshold = 50;
+
+            /**
+             * A generic throttle function to prevent UI thrashing
+             * on scroll.
+             *
+             * @param  {function} fn
+             * @param  {number}   interval
+             * @return {function}
+             */
+
+            function throttle(fn, interval) {
+                var timeoutId = -1;
+                var last = -1;
+
+                return function() {
+                    var self = this;
+                    var args = arguments;
+                    var now = Date.now();
+                    var difference = last ? now - last : Infinity;
+
+                    var later = function() {
+                        last = now;
+
+                        fn.apply(self, args);
+                    };
+
+                    if (!last || difference >= interval) {
+                        later();
+                    } else {
+                        clearTimeout(timeoutId);
+
+                        timeoutId = setTimeout(later, interval - difference);
+                    }
+                };
+            }
+
+            /**
+             * Checks if we are within the scroll threshold on each
+             * scroll event, and if so, increments the page limit.
+             *
+             * @return {void}
+             */
+
+            function handleScroll() {
+                if (mixer.isMixing() || !canLoadMore) return;
+
+                var scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
+                var offset = scrollTop + window.innerHeight;
+                var containerHeight = containerEl.offsetHeight;
+
+                if (offset >= containerHeight - scrollThreshold) {
+                    incrementPageLimit();
+                }
+            }
+
+            /**
+             * Shows a set number of new targets at the bottom of
+             * the page by incrementing the page limit.
+             *
+             * @return {void}
+             */
+
+            function incrementPageLimit() {
+                currentLimit += incrementAmount;
+
+                mixer.paginate({limit: currentLimit});
+            }
+
+            /**
+             * Check whether the current matching collection of target
+             * elements has additional hidden elements, and set the
+             * `canLoadMore` flag accordingly.
+             *
+             * @param {mixitup.State} state
+             * @return {void}
+             */
+
+            function handleMixEnd(state) {
+                // At the end of each operation, we must check whether the current
+                // matching collection of target elements has additional hidden
+                // elements, and set the `canLoadMore` flag accordingly.
+
+                if (state.activePagination.limit + incrementAmount >= state.totalMatching) {
+                    canLoadMore = false;
+                } else {
+                    canLoadMore = true;
+                }
+
+                setTimeout(handleScroll, 10);
+            }
+
+            // Instantiate mixitup
+
+            var mixer = mixitup(containerEl, {
+                pagination: {
+                    limit: currentLimit
+                },
+                callbacks: {
+                    onMixEnd: handleMixEnd
+                }
+            });
+
+            // Attach a throttled scroll handler to the scroll event. Will fire
+            // up to a maximum of once every 50ms.
+
+            window.addEventListener('scroll', throttle(handleScroll, 50));
+        </script>
+    </body>
+</html>

demos/infinite-scroll/style.css

@@ -0,0 +1,170 @@
+html,
+body {
+    height: 100%;
+    background: #f2f2f2;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* Controls
+---------------------------------------------------------------------- */
+
+.controls {
+    padding: 1rem;
+    background: #333;
+    font-size: 0.1px;
+}
+
+.control {
+    position: relative;
+    display: inline-block;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #444;
+    cursor: pointer;
+    font-size: 0.1px;
+    color: white;
+    transition: background 150ms;
+}
+
+.control:hover {
+    background: #3f3f3f;
+}
+
+.control[data-filter]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background: currentColor;
+    transition: background-color 150ms, border-color 150ms;
+}
+
+.control[data-sort]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-left: 2px solid;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    transform:  translateY(1px) rotate(45deg);
+}
+
+.control[data-sort*=":desc"]:after {
+    transform:  translateY(-4px) rotate(-135deg);
+}
+
+.mixitup-control-active {
+    background: #393939;
+}
+
+.mixitup-control-active[data-filter]:after {
+    background: transparent;
+}
+
+.control:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.control:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+
+.control[data-filter] + .control[data-sort] {
+    margin-left: .75rem;
+}
+
+.control[data-filter=".green"] {
+    color: #91e6c7;
+}
+
+.control[data-filter=".blue"] {
+    color: #5ecdde;
+}
+
+.control[data-filter=".pink"] {
+    color: #d595aa;
+}
+
+.control[data-filter="none"] {
+    color: #2f2f2f;
+}
+
+/* Container
+---------------------------------------------------------------------- */
+
+.container {
+    padding: 1rem;
+    text-align: justify;
+    font-size: 0.1px;
+}
+
+.container:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+/* Target Elements
+---------------------------------------------------------------------- */
+
+.mix,
+.gap {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.mix {
+    background: #fff;
+    border-top: .5rem solid currentColor;
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.mix:before {
+    content: '';
+    display: inline-block;
+    padding-top: 56.25%;
+}
+
+.mix.green {
+    color: #91e6c7;
+}
+
+.mix.pink {
+    color: #d595aa;
+}
+
+.mix.blue {
+    color: #5ecdde;
+}
+
+/* Grid Breakpoints
+---------------------------------------------------------------------- */
+
+/* 2 Columns */
+
+.mix,
+.gap {
+    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
+}
+
+/* 4 Columns */
+
+@media screen and (min-width: 961px) {
+    .mix,
+    .gap {
+        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
+    }
+}

demos/load-more-button/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="../reset.css" rel="stylesheet"/>
+        <link href="./style.css" rel="stylesheet"/>
+
+        <title>MixItUp Pagination Demo - Load More Button</title>
+
+        <!--
+        NB: This grid's responsive behavior has been limited to 2 or 4 columns for
+        simplicity, but could easily be combined with the responsive pagination demo
+        to load in a dynamic amount of items on each click, as per the current
+        column count.
+        -->
+
+    </head>
+    <body>
+        <div class="controls">
+            <button type="button" class="control" data-filter="all">All</button>
+            <button type="button" class="control" data-filter=".green">Green</button>
+            <button type="button" class="control" data-filter=".blue">Blue</button>
+            <button type="button" class="control" data-filter=".pink">Pink</button>
+            <button type="button" class="control" data-filter="none">None</button>
+
+            <button type="button" class="control" data-sort="default:asc">Asc</button>
+            <button type="button" class="control" data-sort="default:desc">Desc</button>
+        </div>
+
+        <div class="container">
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <div class="load-more-wrapper">
+            <button type="button" class="load-more">Load more</button>
+        </div>
+
+        <script src="../mixitup.min.js"></script>
+        <script src="../../dist/mixitup-pagination.js"></script>
+
+        <script>
+            var containerEl = document.querySelector('.container');
+            var loadMoreEl = document.querySelector('.load-more');
+            var currentLimit = 4;
+            var incrementAmount = 4;
+
+            var mixer = mixitup(containerEl, {
+                pagination: {
+                    limit: currentLimit
+                },
+                callbacks: {
+                    onMixEnd: handleMixEnd
+                }
+            });
+
+            function handleMixEnd(state) {
+                // At the end of each operation, we must check whether the current
+                // matching collection of target elements has additional hidden
+                // elements, and enable or disable the load more button as
+                // appropriate
+
+                if (state.activePagination.limit + incrementAmount >= state.totalMatching) {
+                    // Disable button
+
+                    loadMoreEl.disabled = true;
+                } else if (loadMoreEl.disabled) {
+                    // Enable button
+
+                    loadMoreEl.disabled = false;
+                }
+            }
+
+            function handleLoadMoreClick() {
+                // On each click of the load more button, we increment
+                // the current limit by a defined amount
+
+                currentLimit += incrementAmount;
+
+                mixer.paginate({limit: currentLimit});
+            }
+
+            loadMoreEl.addEventListener('click', handleLoadMoreClick);
+        </script>
+    </body>
+</html>

demos/load-more-button/style.css

@@ -0,0 +1,198 @@
+html,
+body {
+    height: 100%;
+    background: #f2f2f2;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* Controls
+---------------------------------------------------------------------- */
+
+.controls {
+    padding: 1rem;
+    background: #333;
+    font-size: 0.1px;
+}
+
+.control {
+    position: relative;
+    display: inline-block;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #444;
+    cursor: pointer;
+    font-size: 0.1px;
+    color: white;
+    transition: background 150ms;
+}
+
+.control:hover {
+    background: #3f3f3f;
+}
+
+.control[data-filter]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background: currentColor;
+    transition: background-color 150ms, border-color 150ms;
+}
+
+.control[data-sort]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-left: 2px solid;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    transform:  translateY(1px) rotate(45deg);
+}
+
+.control[data-sort*=":desc"]:after {
+    transform:  translateY(-4px) rotate(-135deg);
+}
+
+.mixitup-control-active {
+    background: #393939;
+}
+
+.mixitup-control-active[data-filter]:after {
+    background: transparent;
+}
+
+.control:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.control:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+
+.control[data-filter] + .control[data-sort] {
+    margin-left: .75rem;
+}
+
+.control[data-filter=".green"] {
+    color: #91e6c7;
+}
+
+.control[data-filter=".blue"] {
+    color: #5ecdde;
+}
+
+.control[data-filter=".pink"] {
+    color: #d595aa;
+}
+
+.control[data-filter="none"] {
+    color: #2f2f2f;
+}
+
+/* Load More Button
+---------------------------------------------------------------------- */
+
+.load-more-wrapper {
+    text-align: center;
+    padding: 1rem;
+}
+
+.load-more {
+    display: inline-block;
+    background: white;
+    font-size: 1rem;
+    font-family: 'helvetica', arial, sans-serif;
+    padding: 1rem;
+    min-width: 8rem;
+    cursor: pointer;
+    color: #333;
+    box-shadow: 0 0 8px rgba(0, 0, 0, .05);
+    border-radius: 3px;
+}
+
+.load-more:disabled {
+    opacity: .5;
+    color: #aaa;
+    cursor: default;
+}
+
+/* Container
+---------------------------------------------------------------------- */
+
+.container {
+    padding: 1rem;
+    text-align: justify;
+    font-size: 0.1px;
+}
+
+.container:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+/* Target Elements
+---------------------------------------------------------------------- */
+
+.mix,
+.gap {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.mix {
+    background: #fff;
+    border-top: .5rem solid currentColor;
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.mix:before {
+    content: '';
+    display: inline-block;
+    padding-top: 56.25%;
+}
+
+.mix.green {
+    color: #91e6c7;
+}
+
+.mix.pink {
+    color: #d595aa;
+}
+
+.mix.blue {
+    color: #5ecdde;
+}
+
+/* Grid Breakpoints
+---------------------------------------------------------------------- */
+
+/* 2 Columns */
+
+.mix,
+.gap {
+    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
+}
+
+/* 4 Columns */
+
+@media screen and (min-width: 961px) {
+    .mix,
+    .gap {
+        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
+    }
+}
+

demos/multiple-pagination-ui/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="../reset.css" rel="stylesheet"/>
+        <link href="./style.css" rel="stylesheet"/>
+
+        <title>MixItUp Pagination Demo - Multiple Pagination UI</title>
+    </head>
+    <body>
+        <div class="controls">
+            <button type="button" class="control" data-filter="all">All</button>
+            <button type="button" class="control" data-filter=".green">Green</button>
+            <button type="button" class="control" data-filter=".blue">Blue</button>
+            <button type="button" class="control" data-filter=".pink">Pink</button>
+            <button type="button" class="control" data-filter="none">None</button>
+
+            <button type="button" class="control" data-sort="default:asc">Asc</button>
+            <button type="button" class="control" data-sort="default:desc">Desc</button>
+        </div>
+
+        <div class="controls-pagination">
+            <div class="mixitup-page-list"></div>
+            <div class="mixitup-page-stats"></div>
+        </div>
+
+        <div class="container">
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <div class="controls-pagination">
+            <div class="mixitup-page-list"></div>
+            <div class="mixitup-page-stats"></div>
+        </div>
+
+        <script src="../mixitup.min.js"></script>
+        <script src="../../dist/mixitup-pagination.js"></script>
+
+        <script>
+            var containerEl = document.querySelector('.container');
+
+            var mixer = mixitup(containerEl, {
+                pagination: {
+                    limit: 4
+                }
+            });
+        </script>
+    </body>
+</html>

demos/multiple-pagination-ui/style.css

@@ -0,0 +1,270 @@
+html,
+body {
+    height: 100%;
+    background: #f2f2f2;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* Controls
+---------------------------------------------------------------------- */
+
+.controls {
+    padding: 1rem;
+    background: #333;
+    font-size: 0.1px;
+}
+
+.control {
+    position: relative;
+    display: inline-block;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #444;
+    cursor: pointer;
+    font-size: 0.1px;
+    color: white;
+    transition: background 150ms;
+}
+
+.control:hover {
+    background: #3f3f3f;
+}
+
+.control[data-filter]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background: currentColor;
+    transition: background-color 150ms, border-color 150ms;
+}
+
+.control[data-sort]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-left: 2px solid;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    transform:  translateY(1px) rotate(45deg);
+}
+
+.control[data-sort*=":desc"]:after {
+    transform:  translateY(-4px) rotate(-135deg);
+}
+
+.mixitup-control-active {
+    background: #393939;
+}
+
+.mixitup-control-active[data-filter]:after {
+    background: transparent;
+}
+
+.control:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.control:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+
+.control[data-filter] + .control[data-sort] {
+    margin-left: .75rem;
+}
+
+.control[data-filter=".green"] {
+    color: #91e6c7;
+}
+
+.control[data-filter=".blue"] {
+    color: #5ecdde;
+}
+
+.control[data-filter=".pink"] {
+    color: #d595aa;
+}
+
+.control[data-filter="none"] {
+    color: #2f2f2f;
+}
+
+/* Pagination Controls
+---------------------------------------------------------------------- */
+
+.controls-pagination {
+    padding: 1rem;
+    font-size: 0.1px;
+    text-align: justify;
+}
+
+.controls-pagination:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+.mixitup-page-list,
+.mixitup-page-stats {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.mixitup-page-list {
+    text-align: left;
+}
+
+.mixitup-page-stats {
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+}
+
+.mixitup-control {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #fff;
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    margin-right: 1px;
+    cursor: pointer;
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+    transition: color 150ms, border-color 150ms;
+    vertical-align: middle;
+}
+
+.mixitup-control:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.mixitup-control:last-child {
+    border-radius: 0 3px 3px 0;
+}
+
+.mixitup-control:not(.mixitup-control-active):hover {
+    color: #91e6c7;
+}
+
+.mixitup-control-active {
+    border-bottom-color: #91e6c7;
+    cursor: default;
+}
+
+.mixitup-control:disabled {
+    background: #eaeaea;
+    color: #aaa;
+    cursor: default;
+}
+
+.mixitup-control-truncation-marker {
+    background: transparent;
+    pointer-events: none;
+    line-height: 2.2em;
+}
+
+/* Container
+---------------------------------------------------------------------- */
+
+.container {
+    padding: 1rem;
+    text-align: justify;
+    font-size: 0.1px;
+}
+
+.container:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+/* Target Elements
+---------------------------------------------------------------------- */
+
+.mix,
+.gap {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.mix {
+    background: #fff;
+    border-top: .5rem solid currentColor;
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.mix:before {
+    content: '';
+    display: inline-block;
+    padding-top: 56.25%;
+}
+
+.mix.green {
+    color: #91e6c7;
+}
+
+.mix.pink {
+    color: #d595aa;
+}
+
+.mix.blue {
+    color: #5ecdde;
+}
+
+/* Grid Breakpoints
+---------------------------------------------------------------------- */
+
+/* 2 Columns */
+
+.mix,
+.gap {
+    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
+}
+
+/* 3 Columns */
+
+@media screen and (min-width: 541px) {
+    .mix,
+    .gap {
+        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
+    }
+}
+
+/* 4 Columns */
+
+@media screen and (min-width: 961px) {
+    .mix,
+    .gap {
+        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
+    }
+}
+
+/* 5 Columns */
+
+@media screen and (min-width: 1281px) {
+    .mix,
+    .gap {
+        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
+    }
+}
+
+

demos/reset.css

@@ -0,0 +1,72 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: antialiased;
+}
+
+blockquote, q {
+    quotes: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+
+button {
+    background: transparent;
+    border-radius: 0;
+    border: 0;
+    padding: 0;
+
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+
+    user-select: none;
+}
+
+button:focus {
+    outline: 0 none;
+}
+
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

demos/responsive-pagination/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link href="../reset.css" rel="stylesheet"/>
+        <link href="./style.css" rel="stylesheet"/>
+
+        <title>MixItUp Pagination Demo - Responsive Pagination</title>
+
+        <!--
+        Responsive pagination enables to define the initial pagination limit based on the
+        viewport width and then make real time adjustments in reaction to resize events. This
+        is crucial when we want to maintain a full final row in our grid when our CSS contains a
+        mixer of odd and even column counts at different breakpoints.
+        -->
+    </head>
+    <body>
+        <div class="controls">
+            <button type="button" class="control" data-filter="all">All</button>
+            <button type="button" class="control" data-filter=".green">Green</button>
+            <button type="button" class="control" data-filter=".blue">Blue</button>
+            <button type="button" class="control" data-filter=".pink">Pink</button>
+            <button type="button" class="control" data-filter="none">None</button>
+
+            <button type="button" class="control" data-sort="default:asc">Asc</button>
+            <button type="button" class="control" data-sort="default:desc">Desc</button>
+        </div>
+
+        <div class="container">
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+            <div class="mix green"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix green"></div>
+            <div class="mix blue"></div>
+            <div class="mix pink"></div>
+            <div class="mix blue"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <div class="controls-pagination">
+            <div class="mixitup-page-list"></div>
+            <div class="mixitup-page-stats"></div>
+        </div>
+
+        <input type="hidden" class="column-counter"/>
+
+        <script src="../mixitup.min.js"></script>
+        <script src="../../dist/mixitup-pagination.js"></script>
+
+        <script>
+            var containerEl = document.querySelector('.container');
+            var columnCounter = document.querySelector('.column-counter');
+            var currentLimit = -1;
+
+            // NB: The `columnLimitLookup` object is used as a lookup table for
+            // the pagination limit relative to a particular number of columns.
+            // This could also be expressed a function if, for example, the limit
+            // is always twice the number of columns (e.g. 2 rows), but
+            // this is often not the desired behavior case.
+
+            var columnLimitLookup = {
+                '2': 8,
+                '3': 9,
+                '4': 12,
+                '5': 15
+            };
+
+            /**
+             * Reads the value of the `font-size` CSS property from a hidden
+             * `.column-counter` element in the DOM. This ensures all our responsive
+             * behavior is defined solely in our CSS, without need to track viewport
+             * width or define breakpoints in our JavaScript, which may also be
+             * unreliable as scroll bars are added and removed on certain platforms
+             * (i.e. windows). See style.css to understand how this is defined
+             * at each breakpoint.
+             *
+             * @returns {number}
+             */
+
+            function getColumns() {
+                var styles = window.getComputedStyle(columnCounter);
+
+                return parseInt(styles.fontSize);
+            }
+
+            /**
+             * @return {number}
+             */
+
+            function getPaginationLimit() {
+                var columns = getColumns();
+
+                return columnLimitLookup[columns];
+            }
+
+            /**
+             * Compares the new limit to the current limit, and if has changed,
+             * triggers a .paginate() API call to update the mixer.
+             *
+             * @return {void}
+             */
+
+            function handleResize() {
+                var newLimit = getPaginationLimit();
+
+                // If the limit has not changed since the last resize event, do nothing.
+
+                if (newLimit === currentLimit) return;
+
+                currentLimit = newLimit;
+
+                console.log('Changing to a limit of ' + currentLimit + ' items per page');
+
+                mixer.paginate({
+                    limit: currentLimit
+                }, false);
+
+                // NB: We don't want to animate the limit change and create
+                // unneeded jank on resize, so `false` is passed to ensure the
+                // operation happens syncronously.
+            }
+
+            // Get the initial limit which with to instantiate the mixer.
+
+            currentLimit = getPaginationLimit();
+
+            // Instantiate MixItUp
+
+            var mixer = mixitup(containerEl, {
+                pagination: {
+                    limit: currentLimit
+                },
+                animation: {
+                    nudge: false
+                }
+            });
+
+            console.log('Instantiating with a limit of ' + currentLimit + ' items per page');
+
+            // Add a resize event handler. NB: You may want to throttle this
+            // in production for performance, as the window.getComputedStyles()
+            // call can be expensive.
+
+            window.addEventListener('resize', handleResize);
+        </script>
+    </body>
+</html>

demos/responsive-pagination/style.css

@@ -0,0 +1,295 @@
+html,
+body {
+    height: 100%;
+    background: #f2f2f2;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/* Controls
+---------------------------------------------------------------------- */
+
+.controls {
+    padding: 1rem;
+    background: #333;
+    font-size: 0.1px;
+}
+
+.control {
+    position: relative;
+    display: inline-block;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #444;
+    cursor: pointer;
+    font-size: 0.1px;
+    color: white;
+    transition: background 150ms;
+}
+
+.control:hover {
+    background: #3f3f3f;
+}
+
+.control[data-filter]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background: currentColor;
+    transition: background-color 150ms, border-color 150ms;
+}
+
+.control[data-sort]:after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid;
+    border-left: 2px solid;
+    top: calc(50% - 6px);
+    left: calc(50% - 6px);
+    transform:  translateY(1px) rotate(45deg);
+}
+
+.control[data-sort*=":desc"]:after {
+    transform:  translateY(-4px) rotate(-135deg);
+}
+
+.mixitup-control-active {
+    background: #393939;
+}
+
+.mixitup-control-active[data-filter]:after {
+    background: transparent;
+}
+
+.control:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.control:last-of-type {
+    border-radius: 0 3px 3px 0;
+}
+
+.control[data-filter] + .control[data-sort] {
+    margin-left: .75rem;
+}
+
+.control[data-filter=".green"] {
+    color: #91e6c7;
+}
+
+.control[data-filter=".blue"] {
+    color: #5ecdde;
+}
+
+.control[data-filter=".pink"] {
+    color: #d595aa;
+}
+
+.control[data-filter="none"] {
+    color: #2f2f2f;
+}
+
+/* Pagination Controls
+---------------------------------------------------------------------- */
+
+.controls-pagination {
+    padding: 1rem;
+    font-size: 0.1px;
+    text-align: justify;
+}
+
+.controls-pagination:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+.mixitup-page-list,
+.mixitup-page-stats {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.mixitup-page-list {
+    text-align: left;
+}
+
+.mixitup-page-stats {
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+}
+
+.mixitup-control {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    width: 2.7rem;
+    height: 2.7rem;
+    background: #fff;
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    margin-right: 1px;
+    cursor: pointer;
+    font-size: .9rem;
+    color: #333;
+    font-weight: bold;
+    font-family: 'helvetica', arial, sans-serif;
+    transition: color 150ms, border-color 150ms;
+    vertical-align: middle;
+}
+
+.mixitup-control:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.mixitup-control:last-child {
+    border-radius: 0 3px 3px 0;
+}
+
+.mixitup-control:not(.mixitup-control-active):hover {
+    color: #91e6c7;
+}
+
+.mixitup-control-active {
+    border-bottom-color: #91e6c7;
+    cursor: default;
+}
+
+.mixitup-control:disabled {
+    background: #eaeaea;
+    color: #aaa;
+    cursor: default;
+}
+
+.mixitup-control-truncation-marker {
+    background: transparent;
+    pointer-events: none;
+    line-height: 2.2em;
+}
+
+/* Container
+---------------------------------------------------------------------- */
+
+.container {
+    padding: 1rem;
+    text-align: justify;
+    font-size: 0.1px;
+}
+
+.container:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+/* Target Elements
+---------------------------------------------------------------------- */
+
+.mix,
+.gap {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.mix {
+    background: #fff;
+    border-top: .5rem solid currentColor;
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+.mix:before {
+    content: '';
+    display: inline-block;
+    padding-top: 56.25%;
+}
+
+.mix.green {
+    color: #91e6c7;
+}
+
+.mix.pink {
+    color: #d595aa;
+}
+
+.mix.blue {
+    color: #5ecdde;
+}
+
+/* Grid Breakpoints & Column Counts
+---------------------------------------------------------------------- */
+
+/* 2 Columns */
+
+.mix,
+.gap {
+    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
+}
+
+/**
+ * NB: The `font-size` property on the hidden `.column-counter` element is set to
+ * a value representing the number of columns. We will parse this value on init and
+ * on resize, which avoids the need to track viewport width and define
+ * breakpoints in our JavaScript which can also be unreliable when scrollbars
+ * are added/removed. Any CSS property which supports a numeric value could
+ * be used instead of font-size.
+ */
+
+.column-counter {
+    font-size: 2px;
+}
+
+/* 3 Columns */
+
+@media screen and (min-width: 541px) {
+    .mix,
+    .gap {
+        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
+    }
+
+    .column-counter {
+        font-size: 3px;
+    }
+}
+
+/* 4 Columns */
+
+@media screen and (min-width: 961px) {
+    .mix,
+    .gap {
+        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
+    }
+
+    .column-counter {
+        font-size: 4px;
+    }
+}
+
+/* 5 Columns */
+
+@media screen and (min-width: 1281px) {
+    .mix,
+    .gap {
+        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
+    }
+
+    .column-counter {
+        font-size: 5px;
+    }
+}
+
+

docs/mixitup.Config.md

@@ -0,0 +1,629 @@
+# mixitup.Config
+
+## Overview
+
+The MixItUp configuration object is extended with the following properties
+relating to the Pagination extension.
+
+For the full list of configuration options, please refer to the MixItUp
+core documentation.
+
+### Contents
+
+- [callbacks](#callbacks)
+- [classNames](#classNames)
+- [load](#load)
+- [pagination](#pagination)
+- [render](#render)
+- [selectors](#selectors)
+- [templates](#templates)
+
+
+<h2 id="callbacks">callbacks</h2>
+
+A group of optional callback functions to be invoked at various
+points within the lifecycle of a mixer operation.
+
+### onPaginateStart
+
+
+
+
+A callback function invoked whenever a pagination operation starts.
+
+This function is equivalent to `onMixStart`, and is invoked immediately
+after it with the same arguments. Unlike `onMixStart` however, it will
+not be invoked for filter or sort operations.
+
+
+|Type | Default
+|---  | ---
+|`function`| `null`
+
+### onPaginateStart
+
+
+
+
+A callback function invoked whenever a pagination operation ends.
+
+This function is equivalent to `onMixEnd`, and is invoked immediately
+after it with the same arguments. Unlike `onMixEnd` however, it will
+not be invoked for filter or sort operations.
+
+
+|Type | Default
+|---  | ---
+|`function`| `null`
+
+
+<h2 id="classNames">classNames</h2>
+
+A group of properties defining the output and structure of class names programmatically
+added to controls and containers to reflect the state of the mixer.
+
+### elementPager
+
+
+
+
+The "element" portion of the class name added to pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'control'`
+
+###### Example: changing the `config.classNames.elementPager` value
+
+```js
+
+// Change from the default value of 'control' to 'pager'
+
+var mixer = mixitup(containerEl, {
+    classNames: {
+        elementPager: 'pager'
+    }
+});
+
+// Base pager output: "mixitup-pager"
+```
+### elementPageList
+
+
+
+
+The "element" portion of the class name added to the page list element, when it is
+in its disabled state.
+
+The page list element is the containing element in which pagers are rendered.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'page-list'`
+
+###### Example: changing the `config.classNames.elementPageList` value
+
+```js
+
+// Change from the default value of 'page-list' to 'pagination-links'
+
+var mixer = mixitup(containerEl, {
+    classNames: {
+        elementPageList: 'pagination-links'
+    }
+});
+
+// Disabled page-list output: "mixitup-pagination-links-disabled"
+```
+### elementPageStats
+
+
+
+
+The "element" portion of the class name added to the page stats element, when it is
+in its disabled state.
+
+The page stats element is the containing element in which information about the
+current page and total number of pages is rendered.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'page-stats'`
+
+###### Example: changing the `config.classNames.elementPageStats` value
+
+```js
+
+// Change from the default value of 'page-stats' to 'pagination-info'
+
+var mixer = mixitup(containerEl, {
+    classNames: {
+        elementPageList: 'pagination-info'
+    }
+});
+
+// Disabled page-list output: "mixitup-pagination-info-disabled"
+```
+### modifierFirst
+
+
+
+
+The "modifier" portion of the class name added to the first pager in the list of pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'first'`
+
+### modifierLast
+
+
+
+
+The "modifier" portion of the class name added to the last pager in the list of pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'last'`
+
+### modifierLast
+
+
+
+
+The "modifier" portion of the class name added to the previous pager in the list of pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'prev'`
+
+### modifierNext
+
+
+
+
+The "modifier" portion of the class name added to the next pager in the list of pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'next'`
+
+### modifierTruncationMarker
+
+
+
+
+The "modifier" portion of the class name added to truncation markers in the list of pager controls.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'truncation-marker'`
+
+
+<h2 id="load">load</h2>
+
+A group of properties defining the initial state of the mixer on load (instantiation).
+
+### page
+
+
+
+
+An integer defining the starting page on load, if a page limit is active.
+
+
+|Type | Default
+|---  | ---
+|`number`| `1`
+
+###### Example: Defining a start page other than 1 to be applied on load
+
+```js
+
+// The mixer will show page 3 on load, with 8 items per page.
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8
+    },
+    load: {
+        page: 3
+    }
+});
+```
+
+<h2 id="pagination">pagination</h2>
+
+A group of properties defining the mixer's pagination behavior.
+
+### generatePageList
+
+
+
+
+A boolean dictating whether or not MixItUp should render a list of pager controls.
+
+If you wish to control pagination functionality via the API, or your own UI, this can be set to `false`.
+
+In order for this functionality to work, you must provide MixItUp with a `pageList`
+element matching the selector defined in `selectors.pageList`. Pager controls will be
+rendered inside this element as per the templates defined for the `templates.pager`
+and related configuration options, or if set, a custom render
+function supplied to the `render.pager` configuration option.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `true`
+
+###### Example: Disabling the rendering of the built-in "page list" UI
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        generatePageList: false
+    }
+});
+```
+### generatePageStats
+
+
+
+
+A boolean dictating whether or not MixItUp should render a stats about the
+current page (e.g. "1 to 4 of 16").
+
+In order for this functionality to work, you must provide MixItUp with a `pageStats`
+element matching the selector defined in `selectors.pageStats`. Page stats content will
+be rendered inside this element as per the templates defined for the `templates.pageStats`
+and `templates.pageStatsSingle` configuration options, or if set, a custom render
+function supplied to the `render.pageStats` configuration option.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `true`
+
+###### Example: Disabling the rendering of the built-in "page stats" UI
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        generatePageStats: false
+    }
+});
+```
+### maintainActivePage
+
+
+
+
+A boolean dictating whether or not to maintain the active page when switching
+from filter to filter.
+
+By default, MixItUp will attempt to maintain the active page or its highest
+equivalent in the new collection of matching targets (e.g. page 3 would become
+page 2 if there are not enough targets in the new collection), but by setting
+this option to `false`, changing the active filter will always cause the mixer
+to revert to page one of the new collection.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `true`
+
+###### Example: Ensuring that the mixer reverts to page one when filtered
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        maintainActivePage: false
+    }
+});
+```
+### loop
+
+
+
+
+A boolean dictating whether or not to allow "looping" of the built-in previous
+and next pagination controls.
+
+By default, when on the first page, the "previous" button will be disabled,
+and when on the last page, the "next" button will be disabled. By setting
+this option to `true`, the user may loop from the first to last page and
+vice-versa.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `false`
+
+###### Example: Allowing prev/next controls to "loop" through pages
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        loop: true
+    }
+});
+```
+### hidePageListIfSinglePage
+
+
+
+
+A boolean dictating whether or not to prevent rendering of the built-in
+"page list" UI if the matching collection of targets has only enough content
+for one page.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `false`
+
+###### Example: Hiding the page list UI if only one page
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        hidePageListIfSinglePage: true
+    }
+});
+```
+### hidePageStatsIfSinglePage
+
+
+
+
+A boolean dictating whether or not to prevent rendering of the built-in
+"page stats" UI if the matching collection of targets has only enough content
+for one page.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `false`
+
+###### Example: Hiding the page stats UI if only one page
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8,
+        hidePageStatsIfSinglePage: true
+    }
+});
+```
+### limit
+
+
+
+
+A number defining the maximum number of items per page.
+
+By default, this is set to `-1` and pagination is effectively
+disabled. By setting this to any number greater than 0, pagination
+will be applied to the mixers targets, effectively activating the
+extension.
+
+
+|Type | Default
+|---  | ---
+|`number`| `-1`
+
+###### Example: Activating the pagination extension by defining a valid limit
+
+```js
+
+var mixer = mixitup(containerEl, {
+    pagination: {
+        limit: 8
+    }
+});
+```
+### maxPagers
+
+
+
+
+A number dictating the maximum number of individual pager controls to render before
+truncating the list (e.g. adding an ellipses between non-consecutive pagers).
+
+The minimum value permitted for this option is 5, which ensures
+there will always be at least a first, last, and two padding pagers, in addition
+to the pager representing the currently active page.
+
+
+|Type | Default
+|---  | ---
+|`number`| `5`
+
+
+<h2 id="render">render</h2>
+
+A group of optional render functions for creating and updating elements.
+
+### pager
+
+
+
+
+A function returning an HTML string representing a single pager control element.
+
+By default, MixItUp will render pager controls using its own internal renderer
+and templates (see `templates.pager`), but you may override this functionality by
+providing your own render function here instead. All pager elements must have a
+data-page element indicating the action of the control.
+
+The function receives an object containing all neccessary information
+about the pager as its first parameter.
+
+
+|Type | Default
+|---  | ---
+|`function`| `'null'`
+
+### pageStats
+
+
+
+
+A function returning an HTML string forming the contents of the "page stats" element.
+
+By default, MixItUp will render page stats using its own internal renderer
+and templates (see `templates.pageStats`), but you may override this functionality by
+providing your own render function here instead.
+
+The function receives an object containing all neccessary information
+about the current page and total pages as its first parameter.
+
+
+|Type | Default
+|---  | ---
+|`function`| `'null'`
+
+
+<h2 id="selectors">selectors</h2>
+
+A group of properties defining the selectors used to query elements within a mixitup container.
+
+### pageList
+
+
+
+
+A selector string used to query the page list element.
+
+Depending on the value of `controls.scope`, MixItUp will either query the
+entire document for the page list element, or just the container.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'.mixitup-page-list'`
+
+### pageStats
+
+
+
+
+A selector string used to query the page stats element.
+
+Depending on the value of `controls.scope`, MixItUp will either query the
+entire document for the page stats element, or just the container.
+
+
+|Type | Default
+|---  | ---
+|`string`| `'.mixitup-page-stats'`
+
+
+<h2 id="templates">templates</h2>
+
+A group of template strings used to render pager controls and page stats elements.
+
+### pager
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'<button type="button" class="${classNames}" data-page="${pageNumber}">${pageNumber}</button>'`
+
+### pagerPrev
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'<button type="button" class="${classNames}" data-page="prev">&laquo;</button>'`
+
+### pagerNext
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'<button type="button" class="${classNames}" data-page="next">&raquo;</button>'`
+
+### pagerTruncationMarker
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'<span class="${classNames}">&hellip;</span>'`
+
+### pageStats
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'${startPageAt} to ${endPageAt} of ${totalTargets}'`
+
+### pageStatsSingle
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'${startPageAt} of ${totalTargets}'`
+
+### pageStatsFail
+
+
+
+
+
+
+
+|Type | Default
+|---  | ---
+|`string`| `'None found'`
+
+

docs/mixitup.Mixer.md

@@ -0,0 +1,142 @@
+# mixitup.Mixer
+
+## Overview
+
+The mixitup.Mixer class is extended with the following methods relating to
+the Pagination extension.
+
+For the full list of methods, please refer to the MixItUp core documentation.
+
+### Contents
+
+- [paginate()](#paginate)
+- [nextPage()](#nextPage)
+- [prevPage()](#prevPage)
+
+
+<h3 id="paginate">paginate()</h3>
+
+
+`.paginate(page [, animate] [, callback])`
+
+Changes the current page and/or the current page limit.
+
+|   |Type | Name | Description
+|---|--- | --- | ---
+|Param   |`number, string, object, HTMLElement` | `page` | A page number, string (`'next'`, `'prev'`), HTML element reference, or command object.
+|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 1: Changing the active page
+
+```js
+
+console.log(mixer.getState().activePagination.page); // 1
+
+mixer.paginate(2)
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.page === 2); // true
+    });
+```
+###### Example 2: Progressing to the next page
+
+```js
+
+console.log(mixer.getState().activePagination.page); // 1
+
+mixer.paginate('next')
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.page === 2); // true
+    });
+```
+###### Example 3: Starting a page from an abitrary "anchor" element
+
+```js
+
+var anchorEl = mixer.getState().show[3];
+
+mixer.paginate(anchorEl)
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.anchor === anchorEl); // true
+        console.log(mixer.getState().show[0] === anchorEl); // true
+    });
+```
+###### Example 4: Changing the page limit
+
+```js
+
+var anchorEl = mixer.getState().show[3];
+
+console.log(mixer.getState().activePagination.limit); // 8
+
+mixer.paginate({
+   limit: 4
+})
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.limit === 4); // true
+    });
+```
+###### Example 5: Changing the active page and page limit
+
+```js
+
+mixer.paginate({
+   limit: 4,
+   page: 2
+})
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.page === 2); // true
+        console.log(mixer.getState().activePagination.limit === 4); // true
+    });
+```
+
+<h3 id="nextPage">nextPage()</h3>
+
+
+`.nextPage()`
+
+A shorthand for `.paginate('next')`. Moves to the next page.
+
+|   |Type | Name | Description
+|---|--- | --- | ---
+|Returns |`Promise.<mixitup.State>` | A promise resolving with the current state object.
+
+
+###### Example: Moving to the next page
+
+```js
+
+console.log(mixer.getState().activePagination.page); // 1
+
+mixer.nextPage()
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.page === 2); // true
+    });
+```
+
+<h3 id="prevPage">prevPage()</h3>
+
+
+`.prevPage()`
+
+A shorthand for `.paginate('prev')`. Moves to the previous page.
+
+|   |Type | Name | Description
+|---|--- | --- | ---
+|Returns |`Promise.<mixitup.State>` | A promise resolving with the current state object.
+
+
+###### Example: Moving to the previous page
+
+```js
+
+console.log(mixer.getState().activePagination.page); // 5
+
+mixer.prevPage()
+    .then(function(state) {
+        console.log(mixer.getState().activePagination.page === 4); // true
+    });
+```
+

docs/mixitup.State.md

@@ -0,0 +1,42 @@
+# mixitup.State
+
+## Overview
+
+`mixitup.State` objects expose various pieces of data detailing the state of
+a MixItUp instance. They are provided at the start and end of any operation via
+callbacks and events, with the most recent state stored between operations
+for retrieval at any time via the API.
+
+### Contents
+
+- [activePagination](#activePagination)
+- [totalPages](#totalPages)
+
+
+<h3 id="activePagination">activePagination</h3>
+
+
+
+
+The currently active pagination command as set by a control click or API call.
+
+
+|Type | Default
+|---  | ---
+|`mixitup.CommandPagination`| `null`
+
+
+<h3 id="totalPages">totalPages</h3>
+
+
+
+
+The total number of pages produced as a combination of the current page
+limit and active filter.
+
+
+|Type | Default
+|---  | ---
+|`number`| `-1`
+
+

docs/mixitup.md

@@ -0,0 +1,11 @@
+#()
+
+
+
+
+
+
+|   |Type | Name | Description
+|---|--- | --- | ---
+|Returns |
+

gulpfile.js

@@ -0,0 +1,94 @@
+var gulp            = require('gulp');
+var jshint          = require('gulp-jshint');
+var stylish         = require('jshint-stylish');
+var rename          = require('gulp-rename');
+var jscs            = require('gulp-jscs');
+var uglify          = require('gulp-uglify');
+var livereload      = require('gulp-livereload');
+var sourcemaps      = require('gulp-sourcemaps');
+var exec            = require('child_process').exec;
+
+gulp.task('default', ['watch']);
+
+gulp.task('watch', function() {
+    livereload.listen(35730);
+
+    gulp.watch([
+        './src/*.js',
+        './src/*.hbs'
+    ], ['reload-js'])
+        .on('change', function(e) {
+            console.log(
+                '[gulp-watch] file ' +
+                e.path +
+                ' was ' +
+                e.type +
+                ', building'
+            );
+        });
+});
+
+gulp.task('reload-js', ['build-dist'], function() {
+    return livereload.changed();
+});
+
+gulp.task('prod', ['uglify']);
+
+gulp.task('uglify', ['build'], function() {
+    return gulp.src([
+        './dist/mixitup-pagination.js'
+    ])
+        .pipe(uglify({
+            preserveComments: 'license'
+        }))
+        .pipe(rename('mixitup-pagination.min.js'))
+        .on('error', function(e) {
+            console.error('[uglify] ' + e.message);
+        })
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest('./dist/'));
+});
+
+gulp.task('build', ['build-dist'], function(done) {
+    exec('node node_modules/mixitup-build/docs.js -s mixitup-pagination.js', function(e, out) {
+        if (out) {
+            console.log(out);
+        }
+
+        done(e);
+    });
+});
+
+
+gulp.task('build-dist', ['lint', 'code-style'], function(done) {
+    exec('node node_modules/mixitup-build/dist.js -o mixitup-pagination.js', function(e, out) {
+        if (out) {
+            console.log(out);
+        }
+
+        done(e);
+    });
+});
+
+gulp.task('lint', function() {
+    return gulp.src([
+        './src/*.js'
+    ],
+    {
+        base: '/'
+    })
+        .pipe(jshint('./.jshintrc'))
+        .pipe(jshint.reporter(stylish))
+        .pipe(jshint.reporter('fail'));
+});
+
+gulp.task('code-style', function() {
+    return gulp.src([
+        './src/*.js'
+    ],
+    {
+        base: '/'
+    })
+        .pipe(jscs())
+        .pipe(jscs.reporter());
+});

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "mixitup-pagination",
+  "title": "MixItUp Pagination",
+  "version": "3.3.0",
+  "description": "Client-side pagination for filtered and sorted content",
+  "author": "KunkaLabs Limited",
+  "homepage": "https://www.kunkalabs.com/mixitup-pagination/",
+  "license" : "SEE LICENSE IN license.md",
+  "private": true,
+  "main": "./dist/mixitup-pagination.js",
+  "dependencies": {
+      "mixitup": "^3.1.8"
+  },
+  "devDependencies": {
+    "gulp": "^3.8.8",
+    "gulp-jscs": "^4.0.0",
+    "gulp-jshint": "^1.8.5",
+    "gulp-livereload": "~2.1.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "~1.5.1",
+    "jshint-stylish": "~1.0.0",
+    "merge-stream": "^0.1.7",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "mocha": "^3.0.2",
+    "jsdom-global": "2.0.0",
+    "chai": "^3.5.0",
+    "chai-as-promised": "^5.3.0",
+    "chai-shallow-deep-equal": "^1.4.0",
+    "mixitup-build": "git://github.com/patrickkunka/mixitup-build.git"
+  }
+}

src/banner.js

@@ -0,0 +1,17 @@
+/**!
+ * {{title}} v{{version}}
+ * {{description}}
+ * Build {{buildId}}
+ *
+ * Requires mixitup.js >= v{{coreVersion}}
+ *
+ * @copyright Copyright {{beginCopyrightYear}}-{{currentYear}} {{author}}.
+ * @author    {{author}}.
+ * @link      {{websiteUrl}}
+ *
+ * @license   Commercial use requires a commercial license.
+ *            {{commercialLicenseUrl}}
+ *
+ *            Non-commercial use permitted under same terms as {{nonComercialLicenseTitle}} license.
+ *            {{nonCommercialLicenseUrl}}
+ */

src/command-multimix.js

@@ -0,0 +1,5 @@
+/* globals mixitup */
+
+mixitup.CommandMultimix.registerAction('afterConstruct', 'pagination', function() {
+    this.paginate = null;
+});

src/command-paginate.js

@@ -0,0 +1,17 @@
+/* global mixitup, h */
+
+/**
+ * @constructor
+ * @memberof    mixitup
+ * @private
+ * @since       3.0.0
+ */
+
+mixitup.CommandPaginate = function() {
+    this.page   = -1;
+    this.limit  = -1;
+    this.action = ''; // enum: ['prev', 'next']
+    this.anchor = null;
+
+    h.seal(this);
+};

src/config-callbacks.js

@@ -0,0 +1,48 @@
+/* global mixitup */
+
+/**
+ * A group of optional callback functions to be invoked at various
+ * points within the lifecycle of a mixer operation.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        callbacks
+ * @namespace
+ * @public
+ * @since       2.0.0
+ */
+
+mixitup.ConfigCallbacks.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * A callback function invoked whenever a pagination operation starts.
+     *
+     * This function is equivalent to `onMixStart`, and is invoked immediately
+     * after it with the same arguments. Unlike `onMixStart` however, it will
+     * not be invoked for filter or sort operations.
+     *
+     *
+     * @name        onPaginateStart
+     * @memberof    mixitup.Config.callbacks
+     * @instance
+     * @type        {function}
+     * @default     null
+     */
+
+    this.onPaginateStart = null;
+
+    /**
+     * A callback function invoked whenever a pagination operation ends.
+     *
+     * This function is equivalent to `onMixEnd`, and is invoked immediately
+     * after it with the same arguments. Unlike `onMixEnd` however, it will
+     * not be invoked for filter or sort operations.
+     *
+     * @name        onPaginateStart
+     * @memberof    mixitup.Config.callbacks
+     * @instance
+     * @type        {function}
+     * @default     null
+     */
+
+    this.onPaginateEnd = null;
+});

src/config-class-names.js

@@ -0,0 +1,155 @@
+/* global mixitup */
+
+/**
+ * A group of properties defining the output and structure of class names programmatically
+ * added to controls and containers to reflect the state of the mixer.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        classNames
+ * @namespace
+ * @public
+ * @since       3.0.0
+ */
+
+mixitup.ConfigClassNames.registerAction('afterConstruct', 'pagination', function() {
+
+    /**
+     * The "element" portion of the class name added to pager controls.
+     *
+     * @example <caption>Example: changing the `config.classNames.elementPager` value</caption>
+     *
+     * // Change from the default value of 'control' to 'pager'
+     *
+     * var mixer = mixitup(containerEl, {
+     *     classNames: {
+     *         elementPager: 'pager'
+     *     }
+     * });
+     *
+     * // Base pager output: "mixitup-pager"
+     *
+     * @name        elementPager
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'control'
+     */
+
+    this.elementPager = 'control';
+
+    /**
+     * The "element" portion of the class name added to the page list element, when it is
+     * in its disabled state.
+     *
+     * The page list element is the containing element in which pagers are rendered.
+     *
+     * @example <caption>Example: changing the `config.classNames.elementPageList` value</caption>
+     *
+     * // Change from the default value of 'page-list' to 'pagination-links'
+     *
+     * var mixer = mixitup(containerEl, {
+     *     classNames: {
+     *         elementPageList: 'pagination-links'
+     *     }
+     * });
+     *
+     * // Disabled page-list output: "mixitup-pagination-links-disabled"
+     *
+     * @name        elementPageList
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'page-list'
+     */
+
+    this.elementPageList = 'page-list';
+
+    /**
+     * The "element" portion of the class name added to the page stats element, when it is
+     * in its disabled state.
+     *
+     * The page stats element is the containing element in which information about the
+     * current page and total number of pages is rendered.
+     *
+     * @example <caption>Example: changing the `config.classNames.elementPageStats` value</caption>
+     *
+     * // Change from the default value of 'page-stats' to 'pagination-info'
+     *
+     * var mixer = mixitup(containerEl, {
+     *     classNames: {
+     *         elementPageList: 'pagination-info'
+     *     }
+     * });
+     *
+     * // Disabled page-list output: "mixitup-pagination-info-disabled"
+     *
+     * @name        elementPageStats
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'page-stats'
+     */
+
+    this.elementPageStats = 'page-stats';
+
+    /**
+     * The "modifier" portion of the class name added to the first pager in the list of pager controls.
+     *
+     * @name        modifierFirst
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'first'
+     */
+
+    this.modifierFirst = 'first';
+
+    /**
+     * The "modifier" portion of the class name added to the last pager in the list of pager controls.
+     *
+     * @name        modifierLast
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'last'
+     */
+
+    this.modifierLast = 'last';
+
+    /**
+     * The "modifier" portion of the class name added to the previous pager in the list of pager controls.
+     *
+     * @name        modifierLast
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'prev'
+     */
+
+    this.modifierPrev = 'prev';
+
+    /**
+     * The "modifier" portion of the class name added to the next pager in the list of pager controls.
+     *
+     * @name        modifierNext
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'next'
+     */
+
+    this.modifierNext = 'next';
+
+    /**
+     * The "modifier" portion of the class name added to truncation markers in the list of pager controls.
+     *
+     * @name        modifierTruncationMarker
+     * @memberof    mixitup.Config.classNames
+     * @instance
+     * @type        {string}
+     * @default     'truncation-marker'
+     */
+
+    this.modifierTruncationMarker = 'truncation-marker';
+});

src/config-load.js

@@ -0,0 +1,39 @@
+/* global mixitup */
+
+/**
+ * A group of properties defining the initial state of the mixer on load (instantiation).
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        load
+ * @namespace
+ * @public
+ * @since       2.0.0
+ */
+
+mixitup.ConfigLoad.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * An integer defining the starting page on load, if a page limit is active.
+     *
+     * @example <caption>Example: Defining a start page other than 1 to be applied on load</caption>
+     *
+     * // The mixer will show page 3 on load, with 8 items per page.
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8
+     *     },
+     *     load: {
+     *         page: 3
+     *     }
+     * });
+     *
+     * @name        page
+     * @memberof    mixitup.Config.load
+     * @instance
+     * @type        {number}
+     * @default     1
+     */
+
+    this.page = 1;
+});

src/config-pagination.js

@@ -0,0 +1,217 @@
+/* global mixitup, h */
+
+/**
+ * A group of properties defining the mixer's pagination behavior.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        pagination
+ * @namespace
+ * @public
+ * @since       2.0.0
+ */
+
+mixitup.ConfigPagination = function() {
+
+    /**
+     * A boolean dictating whether or not MixItUp should render a list of pager controls.
+     *
+     * If you wish to control pagination functionality via the API, or your own UI, this can be set to `false`.
+     *
+     * In order for this functionality to work, you must provide MixItUp with a `pageList`
+     * element matching the selector defined in `selectors.pageList`. Pager controls will be
+     * rendered inside this element as per the templates defined for the `templates.pager`
+     * and related configuration options, or if set, a custom render
+     * function supplied to the `render.pager` configuration option.
+     *
+     * @example <caption>Example: Disabling the rendering of the built-in "page list" UI</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         generatePageList: false
+     *     }
+     * });
+     *
+     * @name        generatePageList
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     true
+     */
+
+    this.generatePageList = true;
+
+    /**
+     * A boolean dictating whether or not MixItUp should render a stats about the
+     * current page (e.g. "1 to 4 of 16").
+     *
+     * In order for this functionality to work, you must provide MixItUp with a `pageStats`
+     * element matching the selector defined in `selectors.pageStats`. Page stats content will
+     * be rendered inside this element as per the templates defined for the `templates.pageStats`
+     * and `templates.pageStatsSingle` configuration options, or if set, a custom render
+     * function supplied to the `render.pageStats` configuration option.
+     *
+     * @example <caption>Example: Disabling the rendering of the built-in "page stats" UI</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         generatePageStats: false
+     *     }
+     * });
+     *
+     * @name        generatePageStats
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     true
+     */
+
+    this.generatePageStats = true;
+
+    /**
+     * A boolean dictating whether or not to maintain the active page when switching
+     * from filter to filter.
+     *
+     * By default, MixItUp will attempt to maintain the active page or its highest
+     * equivalent in the new collection of matching targets (e.g. page 3 would become
+     * page 2 if there are not enough targets in the new collection), but by setting
+     * this option to `false`, changing the active filter will always cause the mixer
+     * to revert to page one of the new collection.
+     *
+     * @example <caption>Example: Ensuring that the mixer reverts to page one when filtered</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         maintainActivePage: false
+     *     }
+     * });
+     *
+     * @name        maintainActivePage
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     true
+     */
+
+    this.maintainActivePage = true;
+
+    /**
+     * A boolean dictating whether or not to allow "looping" of the built-in previous
+     * and next pagination controls.
+     *
+     * By default, when on the first page, the "previous" button will be disabled,
+     * and when on the last page, the "next" button will be disabled. By setting
+     * this option to `true`, the user may loop from the first to last page and
+     * vice-versa.
+     *
+     * @example <caption>Example: Allowing prev/next controls to "loop" through pages</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         loop: true
+     *     }
+     * });
+     *
+     * @name        loop
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     false
+     */
+
+    this.loop = false;
+
+    /**
+     * A boolean dictating whether or not to prevent rendering of the built-in
+     * "page list" UI if the matching collection of targets has only enough content
+     * for one page.
+     *
+     * @example <caption>Example: Hiding the page list UI if only one page</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         hidePageListIfSinglePage: true
+     *     }
+     * });
+     *
+     * @name        hidePageListIfSinglePage
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     false
+     */
+
+    this.hidePageListIfSinglePage = false;
+
+    /**
+     * A boolean dictating whether or not to prevent rendering of the built-in
+     * "page stats" UI if the matching collection of targets has only enough content
+     * for one page.
+     *
+     * @example <caption>Example: Hiding the page stats UI if only one page</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8,
+     *         hidePageStatsIfSinglePage: true
+     *     }
+     * });
+     *
+     * @name        hidePageStatsIfSinglePage
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {boolean}
+     * @default     false
+     */
+
+    this.hidePageStatsIfSinglePage = false;
+
+    /**
+     * A number defining the maximum number of items per page.
+     *
+     * By default, this is set to `-1` and pagination is effectively
+     * disabled. By setting this to any number greater than 0, pagination
+     * will be applied to the mixers targets, effectively activating the
+     * extension.
+     *
+     * @example <caption>Example: Activating the pagination extension by defining a valid limit</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     pagination: {
+     *         limit: 8
+     *     }
+     * });
+     *
+     * @name        limit
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {number}
+     * @default     -1
+     */
+
+    this.limit = -1;
+
+    /**
+     * A number dictating the maximum number of individual pager controls to render before
+     * truncating the list (e.g. adding an ellipses between non-consecutive pagers).
+     *
+     * The minimum value permitted for this option is 5, which ensures
+     * there will always be at least a first, last, and two padding pagers, in addition
+     * to the pager representing the currently active page.
+     *
+     * @name        maxPagers
+     * @memberof    mixitup.Config.pagination
+     * @instance
+     * @type        {number}
+     * @default     5
+     */
+
+    this.maxPagers = 5;
+
+    h.seal(this);
+};

src/config-render.js

@@ -0,0 +1,53 @@
+/* global mixitup */
+
+/**
+ * A group of optional render functions for creating and updating elements.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        render
+ * @namespace
+ * @public
+ * @since       3.0.0
+ */
+
+mixitup.ConfigRender.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * A function returning an HTML string representing a single pager control element.
+     *
+     * By default, MixItUp will render pager controls using its own internal renderer
+     * and templates (see `templates.pager`), but you may override this functionality by
+     * providing your own render function here instead. All pager elements must have a
+     * data-page element indicating the action of the control.
+     *
+     * The function receives an object containing all neccessary information
+     * about the pager as its first parameter.
+     *
+     * @name        pager
+     * @memberof    mixitup.Config.render
+     * @instance
+     * @type        {function}
+     * @default     'null'
+     */
+
+    this.pager = null;
+
+    /**
+     * A function returning an HTML string forming the contents of the "page stats" element.
+     *
+     * By default, MixItUp will render page stats using its own internal renderer
+     * and templates (see `templates.pageStats`), but you may override this functionality by
+     * providing your own render function here instead.
+     *
+     * The function receives an object containing all neccessary information
+     * about the current page and total pages as its first parameter.
+     *
+     * @name        pageStats
+     * @memberof    mixitup.Config.render
+     * @instance
+     * @type        {function}
+     * @default     'null'
+     */
+
+    this.pageStats = null;
+});

src/config-selectors.js

@@ -0,0 +1,44 @@
+/* global mixitup */
+
+/**
+ * A group of properties defining the selectors used to query elements within a mixitup container.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        selectors
+ * @namespace
+ * @public
+ * @since       2.0.0
+ */
+
+mixitup.ConfigSelectors.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * A selector string used to query the page list element.
+     *
+     * Depending on the value of `controls.scope`, MixItUp will either query the
+     * entire document for the page list element, or just the container.
+     *
+     * @name        pageList
+     * @memberof    mixitup.Config.selectors
+     * @instance
+     * @type        {string}
+     * @default     '.mixitup-page-list'
+     */
+
+    this.pageList  = '.mixitup-page-list';
+
+    /**
+     * A selector string used to query the page stats element.
+     *
+     * Depending on the value of `controls.scope`, MixItUp will either query the
+     * entire document for the page stats element, or just the container.
+     *
+     * @name        pageStats
+     * @memberof    mixitup.Config.selectors
+     * @instance
+     * @type        {string}
+     * @default     '.mixitup-page-stats'
+     */
+
+    this.pageStats = '.mixitup-page-stats';
+});

src/config-templates.js

@@ -0,0 +1,84 @@
+/* global mixitup */
+
+/**
+ * A group of template strings used to render pager controls and page stats elements.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        templates
+ * @namespace
+ * @public
+ * @since       3.0.0
+ */
+
+mixitup.ConfigTemplates.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * @name        pager
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '<button type="button" class="${classNames}" data-page="${pageNumber}">${pageNumber}</button>'
+     */
+
+    this.pager = '<button type="button" class="${classNames}" data-page="${pageNumber}">${pageNumber}</button>';
+
+    /**
+     * @name        pagerPrev
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '<button type="button" class="${classNames}" data-page="prev">&laquo;</button>'
+     */
+
+    this.pagerPrev = '<button type="button" class="${classNames}" data-page="prev">&laquo;</button>';
+
+    /**
+     * @name        pagerNext
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '<button type="button" class="${classNames}" data-page="next">&raquo;</button>'
+     */
+
+    this.pagerNext = '<button type="button" class="${classNames}" data-page="next">&raquo;</button>';
+
+    /**
+     * @name        pagerTruncationMarker
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '<span class="${classNames}">&hellip;</span>'
+     */
+
+    this.pagerTruncationMarker = '<span class="${classNames}">&hellip;</span>';
+
+    /**
+     * @name        pageStats
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '${startPageAt} to ${endPageAt} of ${totalTargets}'
+     */
+
+    this.pageStats = '${startPageAt} to ${endPageAt} of ${totalTargets}';
+
+    /**
+     * @name        pageStatsSingle
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     '${startPageAt} of ${totalTargets}'
+     */
+
+    this.pageStatsSingle = '${startPageAt} of ${totalTargets}';
+
+    /**
+     * @name        pageStatsFail
+     * @memberof    mixitup.Config.templates
+     * @instance
+     * @type        {string}
+     * @default     'None found'
+     */
+
+    this.pageStatsFail = 'None found';
+});

src/config.js

@@ -0,0 +1,20 @@
+/* global mixitup */
+
+/**
+ * The MixItUp configuration object is extended with the following properties
+ * relating to the Pagination extension.
+ *
+ * For the full list of configuration options, please refer to the MixItUp
+ * core documentation.
+ *
+ * @constructor
+ * @memberof    mixitup
+ * @name        Config
+ * @namespace
+ * @public
+ * @since       2.0.0
+ */
+
+mixitup.Config.registerAction('beforeConstruct', 'pagination', function() {
+    this.pagination = new mixitup.ConfigPagination();
+});

src/control-definition.js

@@ -0,0 +1,3 @@
+/* global mixitup */
+
+mixitup.controlDefinitions.push(new mixitup.ControlDefinition('pager', '[data-page]', true, 'pageListEls'));

src/control.js

@@ -0,0 +1,61 @@
+/* globals mixitup, h */
+
+/**
+ * @param   {mixitup.MultimixCommand[]} commands
+ * @param   {ClickEvent}                e
+ * @return  {object|null}
+ */
+
+mixitup.Control.registerFilter('commandsHandleClick', 'pagination', function(commands, e) {
+    var self            = this,
+        command         = {},
+        page            = '',
+        pageNumber      = -1,
+        mixer           = null,
+        button          = null,
+        i               = -1;
+
+    if (!self.selector || self.selector !== '[data-page]') {
+        // Static control or non-pager live control
+
+        return commands;
+    }
+
+    button = h.closestParent(e.target, self.selector, true, self.bound[0].dom.document);
+
+    for (i = 0; mixer = self.bound[i]; i++) {
+        command = commands[i];
+
+        if (!mixer.config.pagination || mixer.config.pagination.limit < 0 || mixer.config.pagination.limit === Infinity) {
+            // Pagination is disabled for this instance. Do not handle.
+
+            commands[i] = null;
+
+            continue;
+        }
+
+        if (!button || h.hasClass(button, mixer.classNamesPager.active) || h.hasClass(button, mixer.classNamesPager.disabled)) {
+            // No button was clicked or button is already active. Do not handle.
+
+            commands[i] = null;
+
+            continue;
+        }
+
+        page = button.getAttribute('data-page');
+
+        if (page === 'prev') {
+            command.paginate = 'prev';
+        } else if (page === 'next') {
+            command.paginate = 'next';
+        } else if (pageNumber) {
+            command.paginate = parseInt(page);
+        }
+
+        if (mixer.lastClicked) {
+            mixer.lastClicked = button;
+        }
+    }
+
+    return commands;
+});

src/events.js

@@ -0,0 +1,27 @@
+/* globals mixitup */
+
+mixitup.Events.registerAction('afterConstruct', 'pagination', function() {
+    /**
+     * A custom event triggered whenever a pagination operation starts.
+     *
+     * @name        paginateStart
+     * @memberof    mixitup.Events
+     * @static
+     * @type        {CustomEvent}
+     */
+
+    this.paginateStart = null;
+
+    /**
+     * A custom event triggered whenever a pagination operation ends.
+     *
+     * @name        paginateEnd
+     * @memberof    mixitup.Events
+     * @static
+     * @type        {CustomEvent}
+     */
+
+    this.paginateEnd = null;
+});
+
+mixitup.events = new mixitup.Events();

src/facade.js

@@ -0,0 +1,7 @@
+/* global mixitup */
+
+mixitup.Facade.registerAction('afterConstruct', 'pagination', function(mixer) {
+    this.paginate = mixer.paginate.bind(mixer);
+    this.nextPage = mixer.nextPage.bind(mixer);
+    this.prevPage = mixer.prevPage.bind(mixer);
+});

src/messages.js

@@ -0,0 +1,8 @@
+/* globals mixitup */
+
+mixitup.Messages.registerAction('afterConstruct', 'pagination', function() {
+    /* Pagination extension errors
+    ----------------------------------------------------------------------------- */
+
+    this.ERROR_PAGINATE_INDEX_RANGE = '[MixItUp] Page indices must start from 1';
+});

src/mixer-dom.js

@@ -0,0 +1,6 @@
+/* global mixitup */
+
+mixitup.MixerDom.registerAction('afterConstruct', 'pagination', function() {
+    this.pageListEls  = [];
+    this.pageStatsEls = [];
+});

src/model-page-stats.js

@@ -0,0 +1,9 @@
+/* globals mixitup, h */
+
+mixitup.ModelPageStats = function() {
+    this.startPageAt    = -1;
+    this.endPageAt      = -1;
+    this.totalTargets   = -1;
+
+    h.seal(this);
+};

src/model-pager.js

@@ -0,0 +1,14 @@
+/* global mixitup, h */
+
+mixitup.ModelPager = function() {
+    this.pageNumber         = -1;
+    this.classNames         = '';
+    this.classList          = [];
+    this.isDisabled         = false;
+    this.isPrev             = false;
+    this.isNext             = false;
+    this.isPageLink         = false;
+    this.isTruncationMarker = false;
+
+    h.seal(this);
+};

src/module-definitions.js

@@ -0,0 +1,13 @@
+/* global mixitupPagination */
+
+if (typeof exports === 'object' && typeof module === 'object') {
+    module.exports = mixitupPagination;
+} else if (typeof define === 'function' && define.amd) {
+    define(function() {
+        return mixitupPagination;
+    });
+} else if (window.mixitup && typeof window.mixitup === 'function') {
+    mixitupPagination(window.mixitup);
+} else {
+    throw new Error('[MixItUp Pagination] MixItUp core not found');
+}

src/operation.js

@@ -0,0 +1,8 @@
+/* global mixitup */
+
+mixitup.Operation.registerAction('afterConstruct', 'pagination', function() {
+    this.startPagination    = null;
+    this.newPagination      = null;
+    this.startTotalPages    = -1;
+    this.newTotalPages      = -1;
+});

src/state.js

@@ -0,0 +1,43 @@
+/* global mixitup */
+
+/**
+ * `mixitup.State` objects expose various pieces of data detailing the state of
+ * a MixItUp instance. They are provided at the start and end of any operation via
+ * callbacks and events, with the most recent state stored between operations
+ * for retrieval at any time via the API.
+ *
+ * @constructor
+ * @namespace
+ * @name        State
+ * @memberof    mixitup
+ * @public
+ * @since       3.0.0
+ */
+
+mixitup.State.registerAction('afterConstruct', 'pagination', function() {
+
+    /**
+     * The currently active pagination command as set by a control click or API call.
+     *
+     * @name        activePagination
+     * @memberof    mixitup.State
+     * @instance
+     * @type        {mixitup.CommandPagination}
+     * @default     null
+     */
+
+    this.activePagination = null;
+
+    /**
+     * The total number of pages produced as a combination of the current page
+     * limit and active filter.
+     *
+     * @name        totalPages
+     * @memberof    mixitup.State
+     * @instance
+     * @type        {number}
+     * @default     -1
+     */
+
+    this.totalPages = -1;
+});

src/ui-class-names.js

@@ -0,0 +1,12 @@
+/* global mixitup */
+
+mixitup.UiClassNames.registerAction('afterConstruct', 'pagination', function() {
+    this.first              = '';
+    this.last               = '';
+    this.prev               = '';
+    this.next               = '';
+    this.first              = '';
+    this.last               = '';
+    this.truncated          = '';
+    this.truncationMarker   = '';
+});

src/version-check.js

@@ -0,0 +1,12 @@
+/* global mixitupPagination, mixitup, h */
+if (
+    !mixitup.CORE_VERSION ||
+    !h.compareVersions(mixitupPagination.REQUIRE_CORE_VERSION, mixitup.CORE_VERSION)
+) {
+    throw new Error(
+        '[MixItUp Pagination] MixItUp Pagination ' +
+        mixitupPagination.EXTENSION_VERSION +
+        ' requires at least MixItUp ' +
+        mixitupPagination.REQUIRE_CORE_VERSION
+    );
+}

src/wrapper.hbs

@@ -0,0 +1,60 @@
+{{>banner}}
+
+(function(window) {
+    'use strict';
+
+    var mixitupPagination = function(mixitup) {
+        var h = mixitup.h;
+
+        {{>version-check}}
+
+        {{>config-callbacks}}
+
+        {{>config-class-names}}
+
+        {{>config-load}}
+
+        {{>config-pagination}}
+
+        {{>config-render}}
+
+        {{>config-selectors}}
+
+        {{>config-templates}}
+
+        {{>config}}
+
+        {{>model-pager}}
+
+        {{>model-page-stats}}
+
+        {{>ui-class-names}}
+
+        {{>control-definition}}
+
+        {{>control}}
+
+        {{>command-multimix}}
+
+        {{>command-paginate}}
+
+        {{>events}}
+
+        {{>operation}}
+
+        {{>state}}
+
+        {{>mixer-dom}}
+
+        {{>mixer}}
+
+        {{>facade}}
+    };
+
+    mixitupPagination.TYPE                    = 'mixitup-extension';
+    mixitupPagination.NAME                    = '{{name}}';
+    mixitupPagination.EXTENSION_VERSION       = '{{version}}';
+    mixitupPagination.REQUIRE_CORE_VERSION    = '{{coreVersion}}';
+
+    {{>module-definitions}}
+})(window);