vanillafilter

Intro
Usage
Options

Intro

VanillaJS library to bind filtering to any element of your choice. Specify the filter trigger and targets (or use the defaults) and let vanillafilter do its' magic.

🍃 Extremely lightweight

~2kb minified
~750bytes gzipped

🎉 VanillaJS

no jQuery required

⚡️ Lightning fast

Instant filtering

Demo

Clone the project and open up /demo.html to view a live working vanillafilter demo

Usage

1. Install vanillafilter

Adding it to your module

Install the dependency via Yarn to include it in your modules

$ yarn add vanillafilter

Include it in your module:

import 'vanillafilter';

Direct script include

Download and include the ./dist/js/vanillafilter.min.js script directly in your HTML

<script type="text/javascript" src="[scripts-folder]/vanillafilter.min.js"></script>

2. Setup your HTML structure for filtering, for example:

<select data-vanillatrigger>
	<option value="">Select filter</option>
	<option value="even">Even</option>
	<option value="odd">Odd</option>
</select>

<ul>
	<li data-vanillatarget="odd">First.</li>
	<li data-vanillatarget="even">Second.</li>
	<li data-vanillatarget="odd">Third.</li>
	<li data-vanillatarget="even">Fourth.</li>
</ul>

You can use multiple filter values on the data-vanillatarget. Just add the values comma separated in the data-vanillatarget attribute. For example:

<li data-vanillatarget="odd, even">One and two</li>

3. Create a new vanillafilter by using the following script

<script>
	var VanillaFilter = new VanillaFilter();
</script>

Options

vanillafilter comes with a set of options for customization. The options can be set as follows:

	var VanillaFilter = new VanillaFilter({
		debug: false,
		vanillaTrigger: 'triggerDataAttribute',
		vanillaTarget: 'targetsDataAttribute',
		vanillaSingleFilter: false,
		vanillaDisplayType: 'wantedDisplayType',
		vanillaFallbackSelector: 'elementSelector',
		vanillaCallbackFunction: function(elementToShow) {
			// Do something with the element that will be shown
		}
	});

debug

Disable or enable debug logging

default: false
Which disabled debug logging

var VanillaFilter = new VanillaFilter({
	debug: true
});

vanillaTrigger

The data-attribute selector of the element(s) that should trigger the filtering, for example a select dropdown or a div.

default: vanillatrigger
Which selects all [data-vanillatrigger] elements

If you use an input element, such as a <select> or <input type="checkbox">, you should use the value attribute to define the filter value. For example:

<select data-vanillatrigger>
	<option value="">Show all</option>
	<option value="odd">Odd</option>
	<option value="even">Even</option>
</select>

Note that you still have to add the data-vanillatrigger attribute on the input elements.

If you use a div, span or any 'clickable' element as trigger, you should define the trigger value in the data-vanillatrigger attribute. For example:

<span data-vanillatrigger="">Show all</span>
<span data-vanillatrigger="odd">Odd</span>
<span data-vanillatrigger="even">Even</span>

vanillaTarget

The data-attribute selector of the elements that you want to target for filtering, this can be any element.

default: vanillatarget
Which selects all [data-vanillatarget] elements

<ul>
	<li data-vanillatarget="filtervalue"></li>
</ul>

vanillaSingleFilter

Option to force a single active filter. If this is set to true, you'll always filter just one target, instead of adding filters to an array.

default: false

Can be set to true or false.

vanillaDisplayType

The CSS 'display' you wish to give the target elements once they're filtered (and shown).

default: block

display: block;

vanillaFallbackSelector

The selector for the element you wish to show when there are no results for the active filters.

default: .vanilla-no-results
Which selects all elements with class 'vanilla-no-results'

<div class="vanilla-no-results">No results for the current filters.</div>

vanillaCallbackFunction

The callback function for each filtered (shown) element.

default: function() {}

vanillaCallbackFunction: function(elementToShow) {
	return elementToShow.classList.toggle('someAnimationClass');
}