v3.1.0

patrickkunka · Dec 16, 2016 · f6810b2 · f6810b2
1 parent 02dd3f4
commit f6810b2
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,8 +3,14 @@ Change Log
 
 ## 3.0.0
 
-Release
+- Release
 
 ## 3.0.1
 
-Fixed issue where `layout.containerClassName` is not reflected in state object after instantiation.
+- Fixed issue where `layout.containerClassName` is not reflected in state object after instantiation.
+
+## 3.1.0
+
+- Added `selectors.controls` configuration option to allow for further specificity of control querying
+in addition to the mandatory data attirbutes.
+- Fixed package.json issues
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.0.1
+ * MixItUp v3.1.0
  * A high-performance, dependency-free library for animated filtering, sorting and more
- * Build 5e143f29-5caa-4949-8a63-877d229a1338
+ * Build d6e794dc-5811-4a4e-a2d9-fd3e620c147d
  *
  * @copyright Copyright 2014-2016 KunkaLabs Limited.
  * @author    KunkaLabs Limited.
@@ -3508,6 +3508,38 @@
 
         this.target = '.mix';
 
+        /**
+         * A optional selector string used to add further specificity to the querying of control elements,
+         * in addition to their mandatory data attribute (e.g. `data-filter`, `data-toggle`, `data-sort`).
+         *
+         * This can be used if other elements in your document must contain the above attributes
+         * (e.g. for use in third-party scripts), and would otherwise interfere with MixItUp. Adding
+         * an additional `control` selector of your choice allows MixItUp to restrict event handling
+         * to only those elements matching the defined selector.
+         *
+         * @name        control
+         * @memberof    mixitup.Config.selectors
+         * @instance
+         * @type        {string}
+         * @default     ''
+         *
+         * @example <caption>Example 1: Adding a `selectors.control` selector</caption>
+         *
+         * var mixer = mixitup(containerEl, {
+         *     selectors: {
+         *         control: '.mixitup-control'
+         *     }
+         * });
+         *
+         * // Will not be handled:
+         * // <button data-filter=".category-a"></button>
+         *
+         * // Will be handled:
+         * // <button class="mixitup-control" data-filter=".category-a"></button>
+         */
+
+        this.control = '';
+
         this.callActions('afterConstruct');
 
         h.seal(this);
@@ -4211,10 +4243,12 @@
 
             this.pending = 0;
 
+            mixer = self.bound[0];
+
             if (!self.selector) {
                 button = self.el;
             } else {
-                button = h.closestParent(e.target, self.selector, true, self.bound[0].dom.document);
+                button = h.closestParent(e.target, mixer.config.selectors.control + self.selector, true, mixer.dom.document);
             }
 
             if (!button) {
@@ -5174,7 +5208,7 @@
 
                     self.controls.push(control);
                 } else {
-                    controlElements = parent.querySelectorAll(definition.selector);
+                    controlElements = parent.querySelectorAll(self.config.selectors.control + definition.selector);
 
                     for (j = 0; el = controlElements[j]; j++) {
                         control = self.getControl(el, definition.type, '');
@@ -10336,5 +10370,5 @@
         mixitup.registerJqPlugin(jq);
     }
     mixitup.NAME = 'mixitup';
-    mixitup.CORE_VERSION = '3.0.1';
+    mixitup.CORE_VERSION = '3.1.0';
 })(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
@@ -1655,6 +1655,40 @@ var mixer = mixitup(containerEl, {
     }
 });
 ```
+### control
+
+
+
+
+A optional selector string used to add further specificity to the querying of control elements,
+in addition to their mandatory data attribute (e.g. `data-filter`, `data-toggle`, `data-sort`).
+
+This can be used if other elements in your document must contain the above attributes
+(e.g. for use in third-party scripts), and would otherwise interfere with MixItUp. Adding
+an additional `control` selector of your choice allows MixItUp to restrict event handling
+to only those elements matching the defined selector.
+
+
+|Type | Default
+|---  | ---
+|`string`| `''`
+
+###### Example 1: Adding a `selectors.control` selector
+
+```js
+
+var mixer = mixitup(containerEl, {
+    selectors: {
+        control: '.mixitup-control'
+    }
+});
+
+// Will not be handled:
+// <button data-filter=".category-a"></button>
+
+// Will be handled:
+// <button class="mixitup-control" data-filter=".category-a"></button>
+```
 
 <h2 id="render">render</h2>
 

diff --git a/package.json b/package.json
@@ -1,12 +1,16 @@
 {
   "name": "mixitup",
   "title": "MixItUp",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A high-performance, dependency-free library for animated filtering, sorting and more",
   "author": "KunkaLabs Limited",
   "homepage": "https://www.kunkalabs.com/mixitup/",
-  "license": "SEE README.md",
+  "license": "SEE LICENSE IN README.md",
   "main": "./dist/mixitup.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patrickkunka/mixitup/"
+  },
   "scripts": {
     "test": "mocha ./tests/unit/main.js",
     "cover": "istanbul cover _mocha ./tests/unit/main.js",

diff --git a/src/config-selectors.js b/src/config-selectors.js
@@ -49,6 +49,38 @@ mixitup.ConfigSelectors = function() {
 
     this.target = '.mix';
 
+    /**
+     * A optional selector string used to add further specificity to the querying of control elements,
+     * in addition to their mandatory data attribute (e.g. `data-filter`, `data-toggle`, `data-sort`).
+     *
+     * This can be used if other elements in your document must contain the above attributes
+     * (e.g. for use in third-party scripts), and would otherwise interfere with MixItUp. Adding
+     * an additional `control` selector of your choice allows MixItUp to restrict event handling
+     * to only those elements matching the defined selector.
+     *
+     * @name        control
+     * @memberof    mixitup.Config.selectors
+     * @instance
+     * @type        {string}
+     * @default     ''
+     *
+     * @example <caption>Example 1: Adding a `selectors.control` selector</caption>
+     *
+     * var mixer = mixitup(containerEl, {
+     *     selectors: {
+     *         control: '.mixitup-control'
+     *     }
+     * });
+     *
+     * // Will not be handled:
+     * // <button data-filter=".category-a"></button>
+     *
+     * // Will be handled:
+     * // <button class="mixitup-control" data-filter=".category-a"></button>
+     */
+
+    this.control = '';
+
     this.callActions('afterConstruct');
 
     h.seal(this);

diff --git a/src/control.js b/src/control.js
@@ -214,10 +214,12 @@ h.extend(mixitup.Control.prototype,
 
         this.pending = 0;
 
+        mixer = self.bound[0];
+
         if (!self.selector) {
             button = self.el;
         } else {
-            button = h.closestParent(e.target, self.selector, true, self.bound[0].dom.document);
+            button = h.closestParent(e.target, mixer.config.selectors.control + self.selector, true, mixer.dom.document);
         }
 
         if (!button) {

diff --git a/src/mixer.js b/src/mixer.js
@@ -348,7 +348,7 @@ h.extend(mixitup.Mixer.prototype,
 
                 self.controls.push(control);
             } else {
-                controlElements = parent.querySelectorAll(definition.selector);
+                controlElements = parent.querySelectorAll(self.config.selectors.control + definition.selector);
 
                 for (j = 0; el = controlElements[j]; j++) {
                     control = self.getControl(el, definition.type, '');

diff --git a/tests/unit/controls-live.js b/tests/unit/controls-live.js
@@ -113,5 +113,44 @@ describe('Controls', () => {
             chai.assert.equal(mixer2.getState().activeFilter.selector, '.category-a');
             chai.assert.isOk(filter.matches('.mixitup-control-active'));
         });
+
+        it ('should restrict control clicks to only those matching is a control selector is defined', () => {
+            let frag = document.createDocumentFragment();
+
+            let container = dom.getContainer();
+            let controls = dom.getFilterControls();
+
+            let config = {
+                controls: {
+                    live: true
+                },
+                selectors: {
+                    control: '.mixitup-control-restrict'
+                }
+            };
+
+            frag.appendChild(controls);
+            frag.appendChild(container);
+
+            let mixer = mixitup(container, config, frag);
+
+            after(() => {
+                mixer.destroy();
+            });
+
+            let filter1 = controls.querySelector('[data-filter=".category-a"]');
+
+            filter1.classList.add('mixitup-control-restrict');
+
+            filter1.click();
+
+            let filter2 = controls.querySelector('[data-filter=".category-b"]');
+
+            filter2.click();
+
+            chai.assert.equal(mixer.getState().activeFilter.selector, '.category-a');
+            chai.assert.isOk(filter1.matches('.mixitup-control-active'));
+            chai.assert.isNotOk(filter2.matches('.mixitup-control-active'));
+        });
     });
 });