Skip to content
This repository has been archived by the owner on Oct 30, 2024. It is now read-only.

Commit

Permalink
v3.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickkunka
patrickkunka committed Feb 12, 2018
1 parent 43f2668 commit a4c474e
Show file tree
Hide file tree
Showing 9 changed files with 474 additions and 19 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
156 changes: 156 additions & 0 deletions demos/filtering-by-range/index.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit a4c474e

Please sign in to comment.