Guida Isotope Filtering
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-14 20:44:24

## Introduzione
Isotope è una libreria javascript che permette di filtrare e ordinare vari elementi. In questa guida vedremo come filtrarli.

## Risorse
Prima di tutto importiamo nel nostro file `.html` il cdn:

```html
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- o la versione Minified -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
```
Oppure lo script della libreria che potrete trovare qui: [Isotope Metafizzy](https://isotope.metafizzy.co/). Inoltre potete inizializzare Isotope con [jquery](https://jquery.com/download/). 

> Se userete jquery importatelo prima dello script di isotope

## Struttura HTML
In questo esempio vedremo come filtrare vari box in base al colore.

### Filtri
Definiamo ogni filtro come un `<button>` e ad ognuno aggiungiamo l'attributo `data-filter=""`. In `data-filter` inseriremo il nome della classe degli item che verranno filtrati alla pressione del medesimo bottone.

> Importante sottolineare che il nome della classe in `data-filter` è preceduto da un punto.

Per visualizzare tutti gli elementi senza filtri aggiungiamo un bottone con `data-filter="*"`.

```html
<div class="filter-button-group">
  <button data-filter="*">Show All</button>
  <button data-filter=".red">Red</button>
  <button data-filter=".blue">Blue</button>
  <button data-filter=".yellow">Yellow</button>
</div>
```

### Griglia elementi
Inseriamo in un container con una classe specifica i vari item che filtreremo. Per ogni item inseriamo una classe che lo identificherà come un elemento da filtrare (in questo caso `box`). Inoltre aggiungiamo una classe che determinerà la categoria dell'elemento (`red`, `yellow`, `blue`):


```html
<div class="griglia">
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>
```

## Inizializzazione
Inizializziamo il nostro Isotope in Javascript.

con Vanilla Javascript:
```javascript
var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
  // options
});
```

con Jquery (consigliato):
```javascript
var $isotope = $('.griglia').isotope({
  // options
});
```

Dove ci sono i commenti `//options` potrete inserire varie opzioni e il layout per la griglia. Potete trovare tutte le informazioni su [Isotope Metafizzy](https://isotope.metafizzy.co/filtering.html).
Tutte le opzioni sono facoltative ma è consigliato usare sempre `itemSelector` che non fa altro che specificare quali saranno gli elementi del layout. 

Quindi per questo esempio: 
```javascript
var $isotope = $('.griglia').isotope({
    itemSelector: '.box',
});
```

## Filtraggio
Aggiungiamo un evento ai bottoni che abbiamo settato in precedenza:

```javascript
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({ filter: filterValue });
});
```

Ogni volta che un `<button>` verrà clickato la variabile `filterValue` sarà impostata con la classe contenuta in `data-filter` del bottone e poi isotope filtrerà gli elementi per noi.

Un esempio pratico:
{% codepen https://codepen.io/g-pagliara/pen/bGMGGjO %}

## (Bonus) Griglia responsive e centrata
Vi capiterà di voler centrare la griglia degli elementi, per farlo il modo più semplice e efficace è inserire nelle opzioni del layout (di default) `masonry` l'opzione `isFitWidth: true` e impostare i margini della griglia su `auto`. Riprendiamo l'esempio precedente:

```javascript
var $isotope = $('.griglia').isotope({
  masonry: {
    isFitWidth: true
  }
});
```

```css
.griglia{
  margin: 0 auto;
```

---

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

[Linkedin](https://www.linkedin.com/in/giandomenico-pagliara-699108179/)
[GitHub](https://github.com/PagliaraG)