Demo

Demopage

Usage

Include using Browserify or another CommonJS-style module system:

var monoFilter = require('mono-filter');

Call the monofilter with an object defining the filter settings:

monoFilter(options);

Options

• filters: selector wrapping each filter group, default is '.filter'
• triggerSelector: selector for each trigger button inside filter groups, default is '.my-trigger'
• triggerAllSelector: selector for each trigger all button inside filter groups, default is '.all-btn'
• listElementSelector: selector for each list element, default is '.filterobj'
• animation: animates when filtering if true, default is true
• animationSettings:

 show: {
    duration: 700, // Default 800
    easing: [ 0.71, 0.01, 0.34, 1], // Default linear
    delay: 140 //Maximum delay, randomized between 0 and this number. Default 140
},
hide: {
    duration: 700, // Default 800
    easing: [ 0.71, 0.01, 0.34, 1], // Default linear
    delay: 140 //Maximum delay, randomized between 0 and this number. Default 140
}

Markup

Each filter group has a filtertype value set and each child a filtervalue

<div class="filter" data-filtertype="genre">
    <h4>Genre</h4>
    <button class="my-trigger all-btn active">ALL</button>
    <button class="my-trigger" data-filtervalue="action">Action</button>
</div>
<div class="filter" data-filtertype="director">
    <h4>Directed By</h4>
    <button class="my-trigger all-btn active">ALL</button>
    <button class="my-trigger" data-filtervalue="Richard Linklater">Richard Linklater</button>
    <button class="my-trigger" data-filtervalue="Martin Scorsese">Martin Scorsese</button>
    .....

Each list item has a data attribute which corresponds to the filter type we want it to be filtered on. To use multiple values for same item, use a comma followed by a blankspace:

<li class="filterobj" data-director="Richard Linklater" data-genre="drama, romantic">
    <div>
        <div class="inner-info">
            Boyhood
        </div>
    </div>
</li>
<li class="filterobj" data-director="David O. Russell" data-genre="drama, comedy, romantic">
    <div>
        <div>
            Silver Linings Playbook
        </div>
    </div>
</li>
.....