v3.1.5

patrickkunka · Jan 7, 2017 · 8e185ac · 8e185ac
1 parent 4dcb1de
commit 8e185ac
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+## 3.1.5
+
+- Fixed several issues relating to the Dataset API and multimix-like operations (i.e. simultaneous insertion/removal/sorting/dirty-checking)
+
 ## 3.1.4
 
 - Added ability to extend static factory methods (such as `mixitup.use`) with hooks.

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.4
+ * MixItUp v3.1.5
  * A high-performance, dependency-free library for animated filtering, sorting and more
- * Build b5e26fad-bf02-4a75-b539-5671d4910799
+ * Build 8e050b2e-5ae0-443c-b990-d2c1d27c2bc1
  *
  * @copyright Copyright 2014-2017 KunkaLabs Limited.
  * @author    KunkaLabs Limited.
@@ -6894,8 +6894,6 @@
 
             if (operation.willSort) {
                 self.printSort(false, operation);
-
-                self.targets = operation.newOrder;
             }
 
             // Remove any styles applied to the parent container
@@ -6921,7 +6919,11 @@
                             h.removeWhitespace(whitespaceBefore);
                         }
 
-                        self.dom.parent.removeChild(target.dom.el);
+                        if (!operation.willSort) {
+                            // NB: Sorting will remove targets as a bi-product of `printSort()`
+
+                            self.dom.parent.removeChild(target.dom.el);
+                        }
 
                         self.targets.splice(i, 1);
 
@@ -6936,6 +6938,10 @@
                 self.origOrder = self.targets;
             }
 
+            if (operation.willSort) {
+                self.targets = operation.newOrder;
+            }
+
             self.state = operation.newState;
             self.lastOperation = operation;
 
@@ -7503,12 +7509,12 @@
 
             operation.id            = h.randomHex();
             operation.startState    = self.state;
-            operation.startOrder    = self.targets;
             operation.startDataset  = startDataset;
             operation.newDataset    = newDataset.slice();
 
             self.diffDatasets(operation);
 
+            operation.startOrder = self.targets;
             operation.newOrder = operation.show;
 
             if (self.config.animation.enable) {
@@ -7554,14 +7560,15 @@
             var self                = this,
                 persistantStartIds  = [],
                 persistantNewIds    = [],
+                insertedTargets     = [],
                 data                = null,
                 target              = null,
                 el                  = null,
                 frag                = null,
                 nextEl              = null,
                 uids                = {},
                 id                  = '',
-                i                   = 0;
+                i                   = -1;
 
             self.callActions('beforeDiffDatasets', arguments);
 
@@ -7591,13 +7598,23 @@
                         target.data = data;
 
                         if (el !== target.dom.el) {
-                            target.unbindEvents();
+                            // Update target element reference
+
+                            if (target.isInDom) {
+                                target.unbindEvents();
+
+                                self.dom.parent.replaceChild(el, target.dom.el);
+                            }
 
-                            self.dom.parent.replaceChild(el, target.dom.el);
+                            if (!target.isShown) {
+                                el.style.display = 'none';
+                            }
 
                             target.dom.el = el;
 
-                            target.bindEvents();
+                            if (target.isInDom) {
+                                target.bindEvents();
+                            }
                         }
                     }
 
@@ -7629,7 +7646,13 @@
 
                     target.isInDom = true;
 
+                    target.unbindEvents();
+                    target.bindEvents();
+                    target.hide();
+
                     operation.toShow.push(target);
+
+                    insertedTargets.push(target);
                 } else {
                     // Already in DOM
 
@@ -7638,13 +7661,13 @@
                     persistantNewIds.push(id);
 
                     if (frag) {
-                        // Close and insert frag
+                        // Close and insert previously opened frag
 
                         if (frag.lastElementChild) {
                             frag.appendChild(self.dom.document.createTextNode(' '));
                         }
 
-                        self.dom.parent.insertBefore(frag, target.dom.el);
+                        self.insertDatasetFrag(frag, target.dom.el, self.targets.indexOf(target), insertedTargets);
 
                         frag = null;
                     }
@@ -7662,7 +7685,7 @@
                     frag.appendChild(self.dom.document.createTextNode(' '));
                 }
 
-                self.dom.parent.insertBefore(frag, nextEl);
+                self.insertDatasetFrag(frag, nextEl, self.dom.targets.length, insertedTargets);
             }
 
             for (i = 0; data = operation.startDataset[i]; i++) {
@@ -7688,6 +7711,29 @@
             self.callActions('afterDiffDatasets', arguments);
         },
 
+        /**
+         * @private
+         * @instance
+         * @since   3.1.5
+         * @param   {DocumentFragment}          frag
+         * @param   {(HTMLElement|null)}        nextEl
+         * @param   {number}                    insertionIndex
+         * @param   {Array.<mixitup.Target>}    targets
+         * @return  {void}
+         */
+
+        insertDatasetFrag: function(frag, nextEl, insertionIndex, targets) {
+            var self = this;
+
+            self.dom.parent.insertBefore(frag, nextEl);
+
+            while (targets.length) {
+                self.targets.splice(insertionIndex, 0, targets.shift());
+
+                insertionIndex++;
+            }
+        },
+
         /**
          * @private
          * @instance
@@ -10429,5 +10475,5 @@
     mixitup.BaseStatic.call(mixitup.constructor);
 
     mixitup.NAME = 'mixitup';
-    mixitup.CORE_VERSION = '3.1.4';
+    mixitup.CORE_VERSION = '3.1.5';
 })(window);
diff --git a/dist/mixitup.min.js b/dist/mixitup.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mixitup",
   "title": "MixItUp",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "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/mixer.js b/src/mixer.js
@@ -2011,8 +2011,6 @@ h.extend(mixitup.Mixer.prototype,
 
         if (operation.willSort) {
             self.printSort(false, operation);
-
-            self.targets = operation.newOrder;
         }
 
         // Remove any styles applied to the parent container
@@ -2038,7 +2036,11 @@ h.extend(mixitup.Mixer.prototype,
                         h.removeWhitespace(whitespaceBefore);
                     }
 
-                    self.dom.parent.removeChild(target.dom.el);
+                    if (!operation.willSort) {
+                        // NB: Sorting will remove targets as a bi-product of `printSort()`
+
+                        self.dom.parent.removeChild(target.dom.el);
+                    }
 
                     self.targets.splice(i, 1);
 
@@ -2053,6 +2055,10 @@ h.extend(mixitup.Mixer.prototype,
             self.origOrder = self.targets;
         }
 
+        if (operation.willSort) {
+            self.targets = operation.newOrder;
+        }
+
         self.state = operation.newState;
         self.lastOperation = operation;
 
@@ -2620,12 +2626,12 @@ h.extend(mixitup.Mixer.prototype,
 
         operation.id            = h.randomHex();
         operation.startState    = self.state;
-        operation.startOrder    = self.targets;
         operation.startDataset  = startDataset;
         operation.newDataset    = newDataset.slice();
 
         self.diffDatasets(operation);
 
+        operation.startOrder = self.targets;
         operation.newOrder = operation.show;
 
         if (self.config.animation.enable) {
@@ -2671,14 +2677,15 @@ h.extend(mixitup.Mixer.prototype,
         var self                = this,
             persistantStartIds  = [],
             persistantNewIds    = [],
+            insertedTargets     = [],
             data                = null,
             target              = null,
             el                  = null,
             frag                = null,
             nextEl              = null,
             uids                = {},
             id                  = '',
-            i                   = 0;
+            i                   = -1;
 
         self.callActions('beforeDiffDatasets', arguments);
 
@@ -2708,13 +2715,23 @@ h.extend(mixitup.Mixer.prototype,
                     target.data = data;
 
                     if (el !== target.dom.el) {
-                        target.unbindEvents();
+                        // Update target element reference
+
+                        if (target.isInDom) {
+                            target.unbindEvents();
+
+                            self.dom.parent.replaceChild(el, target.dom.el);
+                        }
 
-                        self.dom.parent.replaceChild(el, target.dom.el);
+                        if (!target.isShown) {
+                            el.style.display = 'none';
+                        }
 
                         target.dom.el = el;
 
-                        target.bindEvents();
+                        if (target.isInDom) {
+                            target.bindEvents();
+                        }
                     }
                 }
 
@@ -2746,7 +2763,13 @@ h.extend(mixitup.Mixer.prototype,
 
                 target.isInDom = true;
 
+                target.unbindEvents();
+                target.bindEvents();
+                target.hide();
+
                 operation.toShow.push(target);
+
+                insertedTargets.push(target);
             } else {
                 // Already in DOM
 
@@ -2755,13 +2778,13 @@ h.extend(mixitup.Mixer.prototype,
                 persistantNewIds.push(id);
 
                 if (frag) {
-                    // Close and insert frag
+                    // Close and insert previously opened frag
 
                     if (frag.lastElementChild) {
                         frag.appendChild(self.dom.document.createTextNode(' '));
                     }
 
-                    self.dom.parent.insertBefore(frag, target.dom.el);
+                    self.insertDatasetFrag(frag, target.dom.el, self.targets.indexOf(target), insertedTargets);
 
                     frag = null;
                 }
@@ -2779,7 +2802,7 @@ h.extend(mixitup.Mixer.prototype,
                 frag.appendChild(self.dom.document.createTextNode(' '));
             }
 
-            self.dom.parent.insertBefore(frag, nextEl);
+            self.insertDatasetFrag(frag, nextEl, self.dom.targets.length, insertedTargets);
         }
 
         for (i = 0; data = operation.startDataset[i]; i++) {
@@ -2805,6 +2828,29 @@ h.extend(mixitup.Mixer.prototype,
         self.callActions('afterDiffDatasets', arguments);
     },
 
+    /**
+     * @private
+     * @instance
+     * @since   3.1.5
+     * @param   {DocumentFragment}          frag
+     * @param   {(HTMLElement|null)}        nextEl
+     * @param   {number}                    insertionIndex
+     * @param   {Array.<mixitup.Target>}    targets
+     * @return  {void}
+     */
+
+    insertDatasetFrag: function(frag, nextEl, insertionIndex, targets) {
+        var self = this;
+
+        self.dom.parent.insertBefore(frag, nextEl);
+
+        while (targets.length) {
+            self.targets.splice(insertionIndex, 0, targets.shift());
+
+            insertionIndex++;
+        }
+    },
+
     /**
      * @private
      * @instance