search

mativs / fisotope

Facet search for metafizzy's Isotope
25 stars 4 forks source link

readme

FIsotope Build Status

A wrapper to the exquisite jQuery plugin for magical layouts Isotope. Make it easy to filter, sort, and query words by using html attributes and classes.

This package has all the documentation and demos to get you started.

Licensing

Obviously respect Isotope and BBQ licensing and on the FIsotope hand, do as you please.

Viewing this project locally

Git clone and load index.html on your favorite browser.

Getting Started

Load libraries

<script type="text/javascript" src="https://github.com/mativs/fisotope/raw/master/jquery.js"></script>
<script type="text/javascript" src="https://github.com/mativs/fisotope/raw/master/jquery.isotope.min.js"></script>
<script type="text/javascript" src="https://github.com/mativs/fisotope/raw/master/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="https://github.com/mativs/fisotope/raw/master/fisotope.js"></script>

Initialize Isotope

You need to initialize fisotope, with the same parameters as Isotope.

$('.elementos').fisotope({
    itemSelector : '.item',
    layoutMode : 'fitRows',
    masonry: {columnWidth: 267 },
    getSortData : {
        title : function ( $elem ) {
          return $elem.find('h1').text();
        }
    }
    },
    function ( $items ) {
        $.scrollTo($('#nav'));
    }
);

Configuration exception

The filter configuration doesn't work because it's overriden by fisotope.

Extra Configurations

$('.elementos').fisotope({
  default_facet_operator: {
    tags:'or',
    res_format:'and'
  },
  empty_selection_behaviour: "hide"
});

default_fact_operator

This configuration lets you change your default operator for your specific facets. If nothing is set the default operator will be the and operator

empty_selection_behaviour

Two posible values, hide or show. Defines the default operation when nothing is filtered.

operators_pool

Pool with the different operators to cycle in the toggle operator link. Default value is equal to `['and', 'or', 'unique']

Filters

Yo can filter your cards by any number of facets. For each facet, you need to add an attribute with the name 'fiso-facetname' to the item with the values precede, separted and ended with a dot. Look at the following example where two facets are defined with different categories.

<li class="item" 
    fiso-tags=".parties.events.sports."
    fiso-formats=".csv.xls.doc."
    >
      <h3>Lorem Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>

By only setting this values you can now filter your cards by using, for example the following url that filter by the tag 'sports'

#tags_cats=.sports.

Or for example two facet

#tags_cats=.sports.&formats_cats='.csv.'

Helpers

This is a list of featured classes that changes links and other objects in order to make filtering sorting and queryin an easier task.

Toggle Filter Links (fiso-toggle-category)

A link that lets you toggle between adding or removing a category from a facet filter.

<a href="#" class="fiso-toggle-category" fiso-facet="tags" fiso-category="sports">Sports</a>

Needed Attributes

Populated Classes

Toggle Filter Operator Links (fiso-toggle-facet)

While filtering a list by setting many categories from an specific facet you could be searching for the intersection of all categories (and) or for the union of all categories (or) or for having always only one category filtering by that facet (unique). This link lets you toggle between the differente facet operators. You can use the the operators_pool config option to set the pool where the operators will be cycling. 

<a href="#" class="fiso-toggle-facet" fiso-facet="tags">Cambiar Operación</a>

Needed Attributes

Populated Classes

Clear Filter Links (fiso-clear-facet)

A link that lets you clear all the selected categories for an specific facet or some generic options.

<a href="#" class="fiso-clear-facet" fiso-facet="tags">Clear</a>

Needed Attributes

Text Information Classes

Yo can set any of the following classes to an html element and the text for that element will be updated with the correct numeric information.

Facet Classes

This classes need to have the attribute fiso-facet setted with the corresponding facet name.

<span class="fiso-counter-selected" fiso-facet="tags"></span>
<span class="fiso-counter-available" fiso-facet="tags"></span>
<span class="fiso-counter-all" fiso-facet="tags"></span>

Global Classes

<span class="fiso-total-counter"></span>
<span class="fiso-total-hidden"></span>
<span class="fiso-total-visible"></span>

Fisotope Selector (fiso-selector/fiso-example/)

You can generate a list of toggle filter links categories for an specific facet based on all the isotope items. This code on startup

<div class="fiso-selector" fiso-facet="tags" >
  <ul>
        <li class="fiso-example"><a href="#"></a></li>
  </ul>
</div>

will change to this one

<div class="fiso-selector and fiso-no-selected fiso-all-6 fiso-selected-0 fiso-available-6" fiso-facet="tags">
  <ul>
      <li class="">
        <a href="#" class="fiso-toggle-category and available" fiso-facet="tags" fiso-category="sports">sports</a>
      </li>
      <li class="">
        <a href="#" class="fiso-toggle-category and available" fiso-facet="tags" fiso-category="events">events</a>
      </li>
      <li class="">
        <a href="#" class="fiso-toggle-category and available" fiso-facet="tags" fiso-category="parties">parties</a>
      </li>
  </ul>
</div>

Fisotope will look for all html elemets with the class fiso-selector. Inside each one will look for an html element with the class fiso-example and will clone it as many times as categories can found for that facet in all items. In each one will search for a link element and transform it into a toggle filter link.

Needed Attributes

Populated Classes

Sort Links (fiso-sort-facet)

A link that lets you sort your items. You have to previously configure it on your isotope setup.

<a href="#" class="fiso-sort-facet" fiso-sort="tags_count" fiso-sort-order="desc">By count</a>

Needed Attributes

Query Input (fiso-search)

An html input where you can search for any text element inside any of your items.

<input type="text" class="fiso-search" name="query" placeholder="Search" />