v3.1.12

patrickkunka · Jun 6, 2017 · a2fdba2 · a2fdba2
1 parent 4b0bebc
commit a2fdba2
Show file tree

Hide file tree

Showing 15 changed files with 353 additions and 101 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+## 3.1.12
+- Fixes issue where `state.targets` does not reflect the updated sort order after a sort operation.
+- Addition of `behavior.liveSort` configuration option.
+
 ## 3.1.11
 
 - Various geometry improvements related to scroll bar issues on desktop Windows and (non-inertial scroll) desktop Mac systems.

diff --git a/demos/mixitup.min.js b/demos/mixitup.min.js
diff --git a/dist/mixitup.js b/dist/mixitup.js
@@ -1,7 +1,7 @@
 /**!
- * MixItUp v3.1.11
+ * MixItUp v3.1.12
  * A high-performance, dependency-free library for animated filtering, sorting and more
- * Build df0ecdbb-7676-4e95-b437-ba1d1a4bff66
+ * Build 99123294-5817-4da9-b352-e17eb8780170
  *
  * @copyright Copyright 2014-2017 KunkaLabs Limited.
  * @author    KunkaLabs Limited.
@@ -2300,6 +2300,78 @@
 
     mixitup.ConfigAnimation.prototype.constructor = mixitup.ConfigAnimation;
 
+    /**
+     * A group of properties relating to the behavior of the Mixer.
+     *
+     * @constructor
+     * @memberof    mixitup.Config
+     * @name        behavior
+     * @namespace
+     * @public
+     * @since       3.1.12
+     */
+
+    mixitup.ConfigBehavior = function() {
+        mixitup.Base.call(this);
+
+        this.callActions('beforeConstruct');
+
+        /**
+         * A boolean dictating whether to allow "live" sorting of the mixer.
+         *
+         * Because of the expensive nature of sorting, MixItUp makes use of several
+         * internal optimizations to skip redundant sorting operations, such as when
+         * the newly requested sort command is the same as the active one. The caveat
+         * to this optimization is that "live" edits to the value of a target's sorting
+         * attribute will be ignored when requesting a re-sort by the same attribute.
+         *
+         * By setting to `behavior.liveSort` to `true`, the mixer will always re-sort
+         * regardless of whether or not the sorting attribute and order have changed.
+         *
+         * @example <caption>Example: Enabling `liveSort` to allow for re-sorting</caption>
+         *
+         * var mixer = mixitup(containerEl, {
+         *     behavior: {
+         *         liveSort: true
+         *     },
+         *     load: {
+         *         sort: 'edited:desc'
+         *     }
+         * });
+         *
+         * var target = containerEl.children[3];
+         *
+         * console.log(target.getAttribute('data-edited')); // '2015-04-24'
+         *
+         * target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date
+         *
+         * mixer.sort('edited:desc')
+         *     .then(function(state) {
+         *         // The target is now at the top of the list
+         *
+         *         console.log(state.targets[0] === target); // true
+         *     });
+         *
+         * @name        liveSort
+         * @memberof    mixitup.Config.behavior
+         * @instance
+         * @type        {boolean}
+         * @default     false
+         */
+
+        this.liveSort = false;
+
+        this.callActions('afterConstruct');
+
+        h.seal(this);
+    };
+
+    mixitup.BaseStatic.call(mixitup.ConfigBehavior);
+
+    mixitup.ConfigBehavior.prototype = Object.create(mixitup.Base.prototype);
+
+    mixitup.ConfigBehavior.prototype.constructor = mixitup.ConfigBehavior;
+
     /**
      * A group of optional callback functions to be invoked at various
      * points within the lifecycle of a mixer operation.
@@ -3759,6 +3831,7 @@
         this.callActions('beforeConstruct');
 
         this.animation          = new mixitup.ConfigAnimation();
+        this.behavior           = new mixitup.ConfigBehavior();
         this.callbacks          = new mixitup.ConfigCallbacks();
         this.controls           = new mixitup.ConfigControls();
         this.classNames         = new mixitup.ConfigClassNames();
@@ -7826,6 +7899,7 @@
                 result  = false;
 
             if (
+                self.config.behavior.liveSort ||
                 sortCommandA.order       === 'random' ||
                 sortCommandA.attribute   !== sortCommandB.attribute ||
                 sortCommandA.order       !== sortCommandB.order ||
@@ -8524,6 +8598,10 @@
                 self.getTweenData(operation);
             }
 
+            if (operation.willSort) {
+                self.targets = operation.newOrder;
+            }
+
             operation.newState = self.buildState(operation);
 
             return self.callFilters('operationMappedGetOperation', operation, arguments);
@@ -10557,5 +10635,5 @@
     mixitup.BaseStatic.call(mixitup.constructor);
 
     mixitup.NAME = 'mixitup';
-    mixitup.CORE_VERSION = '3.1.11';
+    mixitup.CORE_VERSION = '3.1.12';
 })(window);
diff --git a/dist/mixitup.min.js b/dist/mixitup.min.js
diff --git a/docs/mixitup.Config.md b/docs/mixitup.Config.md
@@ -17,6 +17,7 @@ configuration values detailed below.
 ### Contents
 
 - [animation](#animation)
+- [behavior](#behavior)
 - [callbacks](#callbacks)
 - [controls](#controls)
 - [classNames](#classNames)
@@ -538,6 +539,58 @@ var mixer = mixitup(containerEl, {
 });
 ```
 
+<h2 id="behavior">behavior</h2>
+
+A group of properties relating to the behavior of the Mixer.
+
+### liveSort
+
+
+
+
+A boolean dictating whether to allow "live" sorting of the mixer.
+
+Because of the expensive nature of sorting, MixItUp makes use of several
+internal optimizations to skip redundant sorting operations, such as when
+the newly requested sort command is the same as the active one. The caveat
+to this optimization is that "live" edits to the value of a target's sorting
+attribute will be ignored when requesting a re-sort by the same attribute.
+
+By setting to `behavior.liveSort` to `true`, the mixer will always re-sort
+regardless of whether or not the sorting attribute and order have changed.
+
+
+|Type | Default
+|---  | ---
+|`boolean`| `false`
+
+###### Example: Enabling `liveSort` to allow for re-sorting
+
+```js
+
+var mixer = mixitup(containerEl, {
+    behavior: {
+        liveSort: true
+    },
+    load: {
+        sort: 'edited:desc'
+    }
+});
+
+var target = containerEl.children[3];
+
+console.log(target.getAttribute('data-edited')); // '2015-04-24'
+
+target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date
+
+mixer.sort('edited:desc')
+    .then(function(state) {
+        // The target is now at the top of the list
+
+        console.log(state.targets[0] === target); // true
+    });
+```
+
 <h2 id="callbacks">callbacks</h2>
 
 A group of optional callback functions to be invoked at various

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mixitup",
   "title": "MixItUp",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "A high-performance, dependency-free library for animated filtering, sorting and more",
   "author": "KunkaLabs Limited",
   "homepage": "https://www.kunkalabs.com/mixitup/",

diff --git a/src/config-behavior.js b/src/config-behavior.js
@@ -0,0 +1,73 @@
+/* global mixitup, h */
+
+/**
+ * A group of properties relating to the behavior of the Mixer.
+ *
+ * @constructor
+ * @memberof    mixitup.Config
+ * @name        behavior
+ * @namespace
+ * @public
+ * @since       3.1.12
+ */
+
+mixitup.ConfigBehavior = function() {
+    mixitup.Base.call(this);
+
+    this.callActions('beforeConstruct');
+
+    /**
+     * A boolean dictating whether to allow "live" sorting of the mixer.
+     *
+     * Because of the expensive nature of sorting, MixItUp makes use of several
+     * internal optimizations to skip redundant sorting operations, such as when
+     * the newly requested sort command is the same as the active one. The caveat
+     * to this optimization is that "live" edits to the value of a target's sorting
+     * attribute will be ignored when requesting a re-sort by the same attribute.
+     *
+     * By setting to `behavior.liveSort` to `true`, the mixer will always re-sort
+     * regardless of whether or not the sorting attribute and order have changed.
+     *
+     * @example <caption>Example: Enabling `liveSort` to allow for re-sorting</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     behavior: {
+     *         liveSort: true
+     *     },
+     *     load: {
+     *         sort: 'edited:desc'
+     *     }
+     * });
+     *
+     * var target = containerEl.children[3];
+     *
+     * console.log(target.getAttribute('data-edited')); // '2015-04-24'
+     *
+     * target.setAttribute('data-edited', '2017-08-10'); // Update the target's edited date
+     *
+     * mixer.sort('edited:desc')
+     *     .then(function(state) {
+     *         // The target is now at the top of the list
+     *
+     *         console.log(state.targets[0] === target); // true
+     *     });
+     *
+     * @name        liveSort
+     * @memberof    mixitup.Config.behavior
+     * @instance
+     * @type        {boolean}
+     * @default     false
+     */
+
+    this.liveSort = false;
+
+    this.callActions('afterConstruct');
+
+    h.seal(this);
+};
+
+mixitup.BaseStatic.call(mixitup.ConfigBehavior);
+
+mixitup.ConfigBehavior.prototype = Object.create(mixitup.Base.prototype);
+
+mixitup.ConfigBehavior.prototype.constructor = mixitup.ConfigBehavior;
diff --git a/src/config.js b/src/config.js
@@ -53,6 +53,7 @@ mixitup.Config = function() {
     this.callActions('beforeConstruct');
 
     this.animation          = new mixitup.ConfigAnimation();
+    this.behavior           = new mixitup.ConfigBehavior();
     this.callbacks          = new mixitup.ConfigCallbacks();
     this.controls           = new mixitup.ConfigControls();
     this.classNames         = new mixitup.ConfigClassNames();

diff --git a/src/mixer.js b/src/mixer.js
@@ -2914,6 +2914,7 @@ h.extend(mixitup.Mixer.prototype,
             result  = false;
 
         if (
+            self.config.behavior.liveSort ||
             sortCommandA.order       === 'random' ||
             sortCommandA.attribute   !== sortCommandB.attribute ||
             sortCommandA.order       !== sortCommandB.order ||
@@ -3612,6 +3613,10 @@ h.extend(mixitup.Mixer.prototype,
             self.getTweenData(operation);
         }
 
+        if (operation.willSort) {
+            self.targets = operation.newOrder;
+        }
+
         operation.newState = self.buildState(operation);
 
         return self.callFilters('operationMappedGetOperation', operation, arguments);

diff --git a/src/wrapper.hbs b/src/wrapper.hbs
@@ -21,6 +21,8 @@
 
     {{>config-animation}}
 
+    {{>config-behavior}}
+
     {{>config-callbacks}}
 
     {{>config-controls}}

diff --git a/tests/mock/dataset.json b/tests/mock/dataset.json
@@ -1,36 +1,36 @@
 [
     {
-        "id": 1,
+        "id": "target-1",
         "categories": ["a"],
         "published": "20161102",
         "views": 100
     },
     {
-        "id": 2,
+        "id": "target-2",
         "categories": ["a"],
         "published": "20130501",
         "views": 54
     },
     {
-        "id": 3,
+        "id": "target-3",
         "categories": ["b"],
         "published": "20121231",
         "views": 3
     },
     {
-        "id": 4,
+        "id": "target-4",
         "categories": ["b"],
         "published": "20160407",
         "views": 62
     },
     {
-        "id": 5,
+        "id": "target-5",
         "categories": ["c"],
         "published": "20160820",
         "views": 54
     },
     {
-        "id": 6,
+        "id": "target-6",
         "categories": ["a", "c"],
         "published": "20151020",
         "views": 95

diff --git a/tests/mock/dom.js b/tests/mock/dom.js
@@ -13,12 +13,12 @@ const renderElement = (html) => {
 module.exports = {
     getContainer() {
         return renderElement('<div class="mixitup-container" data-ref="container">' +
-            '<div id="1" class="mix category-a" data-ref="mix" data-category="a" data-published="20161102" data-views="100"></div> ' +
-            '<div id="2" class="mix category-a" data-ref="mix" data-category="a" data-published="20130501" data-views="54"></div> ' +
-            '<div id="3" class="mix category-b" data-ref="mix" data-category="b" data-published="20121231" data-views="3"></div> ' +
-            '<div id="4" class="mix category-b" data-ref="mix" data-category="b" data-published="20160407" data-views="62"></div> ' +
-            '<div id="5" class="mix category-c" data-ref="mix" data-category="c" data-published="20160820" data-views="54"></div> ' +
-            '<div id="6" class="mix category-a category-c" data-ref="mix" data-category="a c" data-published="20151020" data-views="95"></div>' +
+            '<div id="target-1" class="mix category-a" data-ref="mix" data-category="a" data-published="20161102" data-views="100"></div> ' +
+            '<div id="target-2" class="mix category-a" data-ref="mix" data-category="a" data-published="20130501" data-views="54"></div> ' +
+            '<div id="target-3" class="mix category-b" data-ref="mix" data-category="b" data-published="20121231" data-views="3"></div> ' +
+            '<div id="target-4" class="mix category-b" data-ref="mix" data-category="b" data-published="20160407" data-views="62"></div> ' +
+            '<div id="target-5" class="mix category-c" data-ref="mix" data-category="c" data-published="20160820" data-views="54"></div> ' +
+            '<div id="target-6" class="mix category-a category-c" data-ref="mix" data-category="a c" data-published="20151020" data-views="95"></div>' +
             '<span class="mixitup-container-gap></span>' +
         '</div>');
     },