Empty states in Isotope
The main recipe viewer runs on Isotope, using its helpful filter property to provide instant animated search:
container.isotope({
filter: function() {
// return boolean here
}
});
With filterable lists, though, its helpful to provide some sort of ‘empty state’ indication, to let users know that what they’re looking at is supposed to be empty, and not merely a victim of a bad network call or internal error.
(There’s actually an entire blog devoted to exploring empty states, which is definitely worth a perusal.)
Anyway, I wanted to get some sort of similar functionality going for the main recipe browser, so looked into elegant ways to handle it within Isotope.
Turns out this is fairly simple to do, thanks to Isotope exposing a filteredItems property which is a selector on all visible elements:
// Returns list of filtered, visible items
container.data('isotope').filteredItems.length
You can easily play with this to make a check whether or not any items are visible:
if ( !container.data('isotope').filteredItems.length ) {
// Empty state
} else {
// Non-empty state
}
At that point, all you have to do is create an empty state div, hide it by default, then show/hide it depending on the above clause:
if ( !container.data('isotope').filteredItems.length ) {
$('.container-empty-state').show();
} else {
$('.container-empty-state').hide();
}