v3.2.1

patrickkunka · Jun 27, 2017 · b20f02f · b20f02f
1 parent f76dcc6
commit b20f02f
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 Change Log
 ==========
 
+## 3.2.1
+- Additional edge-case work relating to Dataset API fix in v3.2.0.
+- Addition of `.forceRender()` mixer API method.
+- Removes `.multiMix()` legacy API alias method.
+
 ## 3.2.0
 - Removes support for legacy `$().mixItUp()` jQuery API
 - Fixes issue with Dataset API causing DOM exception when dealing with certain combinations of simultaneous insertion and sorting.

diff --git a/demos/dataset-pre-rendered-targets/index.html b/demos/dataset-pre-rendered-targets/index.html
@@ -34,23 +34,23 @@
             </div>
 
             <div class="item pink" data-ref="item">
-                <time class="published-date">2016-02-15</time>
+                <time class="published-date">2016-04-25</time>
             </div>
 
             <div class="item green" data-ref="item">
-                <time class="published-date">2016-04-25</time>
+                <time class="published-date">2016-05-02</time>
             </div>
 
             <div class="item blue" data-ref="item">
-                <time class="published-date">2016-05-02</time>
+                <time class="published-date">2016-10-07</time>
             </div>
 
             <div class="item pink" data-ref="item">
-                <time class="published-date">2016-10-07</time>
+                <time class="published-date">2016-11-13</time>
             </div>
 
             <div class="item blue" data-ref="item">
-                <time class="published-date">2016-11-13</time>
+                <time class="published-date">2016-12-01</time>
             </div>
 
             <div class="gap" data-ref="first-gap"></div>

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.2.0
+ * MixItUp v3.2.1
  * A high-performance, dependency-free library for animated filtering, sorting and more
- * Build e8e67fcb-2ded-4918-8ade-151850d2c36e
+ * Build 8064d103-d8f0-4f54-86d4-40e57700c549
  *
  * @copyright Copyright 2014-2017 KunkaLabs Limited.
  * @author    KunkaLabs Limited.
@@ -7761,7 +7761,7 @@
                             frag.appendChild(self.dom.document.createTextNode(' '));
                         }
 
-                        self.insertDatasetFrag(frag, target.dom.el, self.targets.indexOf(target), insertedTargets);
+                        self.insertDatasetFrag(frag, target.dom.el, insertedTargets);
 
                         frag = null;
                     }
@@ -7779,7 +7779,7 @@
                     frag.appendChild(self.dom.document.createTextNode(' '));
                 }
 
-                self.insertDatasetFrag(frag, nextEl, self.targets.length, insertedTargets);
+                self.insertDatasetFrag(frag, nextEl, insertedTargets);
             }
 
             for (i = 0; data = operation.startDataset[i]; i++) {
@@ -7811,20 +7811,20 @@
          * @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) {
+        insertDatasetFrag: function(frag, nextEl, targets) {
             var self = this;
+            var insertAt = nextEl ? Array.from(self.dom.parent.children).indexOf(nextEl) : self.targets.length;
 
             self.dom.parent.insertBefore(frag, nextEl);
 
             while (targets.length) {
-                self.targets.splice(insertionIndex, 0, targets.shift());
+                self.targets.splice(insertAt, 0, targets.shift());
 
-                insertionIndex++;
+                insertAt++;
             }
         },
 
@@ -9132,6 +9132,87 @@
             self.indexTargets();
         },
 
+        /**
+         * Forces the re-rendering of all targets when using the Dataset API.
+         *
+         * By default, targets are only re-rendered when `data.dirtyCheck` is
+         * enabled, and an item's data has changed when `dataset()` is called.
+         *
+         * The `forceRender()` method allows for the re-rendering of all targets
+         * in response to some arbitrary event, such as the changing of the target
+         * render function.
+         *
+         * Targets are rendered against their existing data.
+         *
+         * @example
+         *
+         * .forceRender()
+         *
+         * @example <caption>Example: Force render targets after changing the target render function</caption>
+         *
+         * console.log(container.innerHTML);
+         *
+         * // <div class="container">
+         * //     <div class="mix">Foo</div>
+         * //     <div class="mix">Bar</div>
+         * // </div>
+         *
+         * mixer.configure({
+         *     render: {
+         *         target: (item) => `<a href="/${item.slug}/" class="mix">${item.title}</div>`
+         *     }
+         * });
+         *
+         * mixer.forceRender();
+         *
+         * console.log(container.innerHTML);
+         *
+         * // <div class="container">
+         * //     <a href="/foo/" class="mix">Foo</div>
+         * //     <a href="/bar/" class="mix">Bar</div>
+         * // </div>
+         *
+         * @public
+         * @instance
+         * @since 3.2.1
+         * @return {void}
+         */
+
+        forceRender: function() {
+            var self    = this,
+                target  = null,
+                el      = null,
+                id      = '';
+
+            for (id in self.cache) {
+                target = self.cache[id];
+
+                el = target.render(target.data);
+
+                if (el !== target.dom.el) {
+                    // Update target element reference
+
+                    if (target.isInDom) {
+                        target.unbindEvents();
+
+                        self.dom.parent.replaceChild(el, target.dom.el);
+                    }
+
+                    if (!target.isShown) {
+                        el.style.display = 'none';
+                    }
+
+                    target.dom.el = el;
+
+                    if (target.isInDom) {
+                        target.bindEvents();
+                    }
+                }
+            }
+
+            self.state = self.buildState(self.lastOperation);
+        },
+
         /**
          * Removes mixitup functionality from the container, unbinds all control
          * event handlers, and deletes the mixer instance from MixItUp's internal
@@ -10534,7 +10615,6 @@
         this.sort               = mixer.sort.bind(mixer);
         this.changeLayout       = mixer.changeLayout.bind(mixer);
         this.multimix           = mixer.multimix.bind(mixer);
-        this.multiMix           = mixer.multimix.bind(mixer);
         this.dataset            = mixer.dataset.bind(mixer);
         this.tween              = mixer.tween.bind(mixer);
         this.insert             = mixer.insert.bind(mixer);
@@ -10545,6 +10625,7 @@
         this.remove             = mixer.remove.bind(mixer);
         this.destroy            = mixer.destroy.bind(mixer);
         this.forceRefresh       = mixer.forceRefresh.bind(mixer);
+        this.forceRender        = mixer.forceRender.bind(mixer);
         this.isMixing           = mixer.isMixing.bind(mixer);
         this.getOperation       = mixer.getOperation.bind(mixer);
         this.getConfig          = mixer.getConfig.bind(mixer);
@@ -10574,5 +10655,5 @@
     mixitup.BaseStatic.call(mixitup.constructor);
 
     mixitup.NAME = 'mixitup';
-    mixitup.CORE_VERSION = '3.2.0';
+    mixitup.CORE_VERSION = '3.2.1';
 })(window);
diff --git a/dist/mixitup.min.js b/dist/mixitup.min.js
diff --git a/docs/mixitup.Mixer.md b/docs/mixitup.Mixer.md
@@ -31,6 +31,7 @@ insertion, removal and more.
 - [configure()](#configure)
 - [getState()](#getState)
 - [forceRefresh()](#forceRefresh)
+- [forceRender()](#forceRender)
 - [destroy()](#destroy)
 
 
@@ -940,6 +941,55 @@ mixer.forceRefresh();
 console.log(mixer.getState().totalShow); // 2
 ```
 
+<h3 id="forceRender">forceRender()</h3>
+
+*Version added: 3.2.1*
+
+`.forceRender()`
+
+Forces the re-rendering of all targets when using the Dataset API.
+
+By default, targets are only re-rendered when `data.dirtyCheck` is
+enabled, and an item's data has changed when `dataset()` is called.
+
+The `forceRender()` method allows for the re-rendering of all targets
+in response to some arbitrary event, such as the changing of the target
+render function.
+
+Targets are rendered against their existing data.
+
+|   |Type | Name | Description
+|---|--- | --- | ---
+|Returns |`void` | 
+
+
+###### Example: Force render targets after changing the target render function
+
+```js
+
+console.log(container.innerHTML);
+
+// <div class="container">
+//     <div class="mix">Foo</div>
+//     <div class="mix">Bar</div>
+// </div>
+
+mixer.configure({
+    render: {
+        target: (item) => `<a href="/${item.slug}/" class="mix">${item.title}</div>`
+    }
+});
+
+mixer.forceRender();
+
+console.log(container.innerHTML);
+
+// <div class="container">
+//     <a href="/foo/" class="mix">Foo</div>
+//     <a href="/bar/" class="mix">Bar</div>
+// </div>
+```
+
 <h3 id="destroy">destroy()</h3>
 
 *Version added: 2.0.0*

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mixitup",
   "title": "MixItUp",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "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/facade.js b/src/facade.js
@@ -22,7 +22,6 @@ mixitup.Facade = function Mixer(mixer) {
     this.sort               = mixer.sort.bind(mixer);
     this.changeLayout       = mixer.changeLayout.bind(mixer);
     this.multimix           = mixer.multimix.bind(mixer);
-    this.multiMix           = mixer.multimix.bind(mixer);
     this.dataset            = mixer.dataset.bind(mixer);
     this.tween              = mixer.tween.bind(mixer);
     this.insert             = mixer.insert.bind(mixer);
@@ -33,6 +32,7 @@ mixitup.Facade = function Mixer(mixer) {
     this.remove             = mixer.remove.bind(mixer);
     this.destroy            = mixer.destroy.bind(mixer);
     this.forceRefresh       = mixer.forceRefresh.bind(mixer);
+    this.forceRender        = mixer.forceRender.bind(mixer);
     this.isMixing           = mixer.isMixing.bind(mixer);
     this.getOperation       = mixer.getOperation.bind(mixer);
     this.getConfig          = mixer.getConfig.bind(mixer);