v3.3.0

patrickkunka · Feb 12, 2018 · a4c474e · a4c474e
1 parent 43f2668
commit a4c474e
Show file tree

Hide file tree

Showing 9 changed files with 474 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+## 3.3.0
+- Introduces new internal filter hook `testResultEvaluateHideShown` allowing plugins to manipulate the result of every filter test upon a target. Provides an convenient entry point for non-selector based filtering such as range slider inputs.
+- Adds range slider demo.
+
 ## 3.2.2
 - Fixes issue where multiple toggle controls are not automatically activated when a compound selector is specified to `load.filter`.
 - Fixes issue where calling `.toggleOff()` and passing a non-existent selector will deactivate all other active toggles.

diff --git a/demos/filtering-by-range/index.html b/demos/filtering-by-range/index.html
@@ -0,0 +1,156 @@
+<!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 Demo - Filtering by Range</title>
+
+        <!--
+        This demo hooks into MixItUp's plugins API to provide a means of applying
+        additional non-selector-based contraints to our filtering logic, such as a
+        minimum and maximum range.
+
+        Although this demo uses the native <input type="range"> only, you are free to use any
+        specialised range slider UI library instead (e.g. Bootstrap, jQuery UI, etc). Simply
+        update the `getRange()` function to read values in from your plugin's API instead.
+
+        NB: REQUIRES MixItUp v3.3.0 OR LATER!
+        -->
+    </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="size:asc">Asc</button>
+            <button type="button" class="control" data-sort="size:desc">Desc</button>
+
+            <datalist id="sizeLegend">
+                <option value="0">
+                <option value="1">
+                <option value="2">
+                <option value="3">
+                <option value="4">
+                <option value="6">
+                <option value="7">
+                <option value="8">
+                <option value="9">
+                <option value="10">
+            </datalist>
+
+            <div class="range-slider">
+                <label class="range-slider-label">Min</label>
+
+                <input name="minSize" class="range-slider-input" type="range" min="0" max="10" value="0" list="sizeLegend"/>
+            </div>
+
+            <div class="range-slider">
+                <label class="range-slider-label">Max</label>
+
+                <input name="maxSize" class="range-slider-input" type="range" min="0" max="10" value="10" list="sizeLegend"/>
+            </div>
+        </div>
+
+        <div class="container" data-ref="container">
+            <div class="mix green" data-size="1"></div>
+            <div class="mix green" data-size="3"></div>
+            <div class="mix blue" data-size="4"></div>
+            <div class="mix pink" data-size="5"></div>
+            <div class="mix green" data-size="0"></div>
+            <div class="mix green" data-size="3"></div>
+            <div class="mix blue" data-size="8"></div>
+            <div class="mix pink" data-size="2"></div>
+            <div class="mix blue" data-size="10"></div>
+            <div class="mix blue" data-size="7"></div>
+
+            <div class="gap"></div>
+            <div class="gap"></div>
+            <div class="gap"></div>
+        </div>
+
+        <script src="../mixitup.min.js"></script>
+
+        <script>
+            var container = document.querySelector('[data-ref="container"]');
+            var minSizeRangeInput = document.querySelector('[name="minSize"]');
+            var maxSizeRangeInput = document.querySelector('[name="maxSize"]');
+
+            var mixer = mixitup(container, {
+                animation: {
+                    duration: 350
+                }
+            });
+
+            /**
+             * Reads the values from our two native range inputs, returning an object
+             * with `min` and `max` numeric values.
+             *
+             * @return {object}
+             */
+
+            function getRange() {
+                var min = Number(minSizeRangeInput.value);
+                var max = Number(maxSizeRangeInput.value);
+
+                return {
+                    min: min,
+                    max: max
+                };
+            }
+
+            /**
+             * Ensures that the mixer is re-filtered whenever the value of a range
+             * input changes.
+             *
+             * @return {void}
+             */
+
+            function handleRangeInputChange() {
+                mixer.filter(mixer.getState().activeFilter);
+            }
+
+            /**
+             * Allows us to manipulate the test result (`true` or `false`) of a
+             * target against the current filter selector(s) (e.g. `.blue`).
+             *
+             * In this case we want to apply an additional constraint of whether or not the
+             * target is within an arbitrary range, and override the test result to `false`
+             * if not. The function must always return the test result.
+             *
+             * @param {boolean} testResult
+             *     A boolean indicating whether or not the target is passing the current filtering criteria.
+             * @param {mixitup.Target} target
+             *     A reference to the target being tested
+             * @return {boolean}
+             */
+
+            function filterTestResult(testResult, target) {
+                var size = Number(target.dom.el.getAttribute('data-size'));
+                var range = getRange();
+
+                if (size < range.min || size > range.max) {
+                    testResult = false;
+                }
+
+                return testResult;
+            }
+
+            // Using the static method `registerFilter` from the MixItUp plugins API, we can
+            // register the above function as a filter, to manipulate the value returned from the
+            // `testResultEvaluateHideShow` hook.
+
+            mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);
+
+            // Listen for change events from the two range inputs
+
+            minSizeRangeInput.addEventListener('change', handleRangeInputChange);
+            maxSizeRangeInput.addEventListener('change', handleRangeInputChange);
+        </script>
+    </body>
+</html>