Filters / Gridifier.io

Filters Api

What are filters in Gridifier?

Filters are functions, that are used to select items to show from all inserted items. Filter function structure:


var grid = new Gridifier(demoGrid, {
    // Without sort parameter, 'default' filter will be used.
    // (All items will be shown)
    filter: function(item) {
        if(conditions) return true; // Show item
        if(!conditions) return false; // Don't show item
    }
});

Filters demo grid:

Filter by color:

all

light

dark

Than by size:

all

small

big

Controls:

append 10

clear grid

Filters demo grid simplified example

demonstration of filters usage in demo grid


var grid = new Gridifier(demoGrid, {
    sortDispersion: true, // Use all empty space to exclude gaps
    filter: {
        selected: ["allColors", "allSizes"],

        allColors: function(item) { return true; },
        light: function(item) { return (/* is light item? */) ? true : false; },
        dark: function(item) { return (/* is dark item? */) ? true : false; },

        allSizes: function(item) { return true; },
        small: function(item) { return (/* is small item? */) ? true : false; },
        big: function(item) { return (/* is big item? */) ? true : false; }
    }
});

// To change filters use filter function
TouchClickEvent.listen(selectSomeFilterButton, function() {
    // First filter by colors, than filter already filtered items by sizes
    grid.filter([newColorFilter, newSizeFilter]);
});

How to select/pass built-in/custom filter?

filter()

filter = function(newFilter)

select one of registred filter functions, default = "all"(show all items)


var grid = new Gridifier(targetGrid, {/* Pass filters here or build custom version */});
grid.filter('filterName');

// Alternatively, you can select multiple filters.
// In such case every next filter will use previous filter results per items selection.
grid.filter(["firstFilter", "secondFilter"]);

filter setting with function

new Gridifier(grid, {filter: function(item) { ... }})

select passed filter function as initial(registred as 'userfn')


var grid = new Gridifier(targetGrid, {
    // Filter can be passed as single function
    // (Will be enabled by default and available with name "userfn")
    filter: function(item) { /* Return bool */ }
});

grid.filter("all");
grid.filter("userfn"); // You can select it later by "userfn" name

filter setting with multiple functions(object)

new Gridifier(grid, {filter: {selected: "firstFilter", "firstFilter": function(...) { ... }})

pass multiple filter functions and optionally select initial


var grid = new Gridifier(targetGrid, {
    // Filter can be passed as object with function name/function pairs
    filter: {
        // You can set initial used function with 'selected' param
        selected: "firstFilter",  // or selected: ["filter1", "filter2", ...] for multiple

        firstFilter: function(item) { /* Return bool */ },
        secondFilter: function(item) { /* Return bool */ },
        // ... More functions
    }
});

grid.filter(["firstFilter", "secondFilter"]); // You can switch filters later

filter setting from custom version(string)

new Gridifier(grid, {filter: "customFilter"})

select predefined filter function


// Extend src/api/settings.js class and build custom version with Grunt
var Settings = function() {
    this._settings = {
        // ...
        filter: {
            // Define your custom filter fn inside filter object
            customFilter: function(item) {
                // return bool
            }
        },
        // ...
    };
};
var grid = new Gridifier(targetGrid, {filter: "customFilter"});

Togglers notice.
Gridifier will use current selected toggle function per show/hide animations.

Events notice.
If you want delete some grid items from DOM after disconnects and are using filters, don't use onHide event, because it will be triggered by filters. Use onDisconnect event instead. (It makes sense, because if you are running some animation onShow/onHide(for example title slide), it should run both on item inserts/filter changes.)

next: Sort dispersion prev: Sorts