In questi giorni ho lavorato su un progetto dove era necessario filtrare elementi di un elenco. E’ stata fatta la scelta di disporre gli elementi in una griglia di tipo Masonry (quella di Pinterest, per capirci) ed è stato scelto di usare il bel plugin di DeSandro, Masonry.
Il filtraggio degli elementi è rimasto però un punto insoluto, per cui mi sono creato una mia personale estensione al plugin per ottenere quanto voluto.
L’estensione al plugin, Multiple Filter Masonry, è ora disponibile a tutti e lo potete scaricare da github.
Funzionamento
L’estensione aggiunge a tutti i metodi e le proprietà del plugin originale Masonry, una proprietà filtersGroupSelector che individua il contenitore dei campi checkbox che definiscono i filtri di ricerca.
Il valore dei checkbox andrà a filtrare gli elementi della lista sulla base della loro classe css. Esempio: se il checkbox ha valore “Matematica” e viene selezionato, verranno selezionati gli elementi masonry che hanno classe “Matematica”. Si possono selezionare più checkbox contemporaneamente, in modo da aggregare più filtri di ricerca.
Per una demo potete guardare la pagina ufficiale del progetto su GitHub.