SortJs

Description

SortJs est une mini librairie vous permettant de faire un trie basique en manipulant le DOM et en exploitant la puissance du data-* attribute.

L'idée de l'écrire m'est venu lorsque j'étais confronté à faire un trie lors de l'intégration d'une maquette statique en bootcamp et qu'il fallait importer un plugin qui étant "lourd" ne nous étais pas bénéfique en matière de perfomance, j'espère qu'il sera utile et qu'il se paufinera au fil du temps :)

Comment utiliser?

1. Copier le cdn ou le code

export function sort(t,l){t.forEach(t=>{t.onclick=()=>{let a=t.dataset.role;setTimeout(()=>{for(let t of l){t.style.display="initial";t.dataset.list.match(a)||(t.style.display="none")}},500)}})}

2. Ajoutez-le à votre site web

selon la méthode choisie, vous pouvez l'ajouter de plusieurs façon:

3. Appliquez-le à votre code

  1. Ajoutez un attribut data-role à votre bouton de trie et donnez lui une valeur;
  2. Ajoutez un attribut data-list et comme valeur la valeur du data-role définis à tout les éléments qui seront révélé au clic sur le bouton trie;

Demo

Résultat

vegan
fish
meat
fish
vegan
meat
vegan
fish
vegan