@alpeshabitat/quick-filter

QuickFilter

Micro librairie permettant d'implémenter une recherche javascript facilement.

Utilisation de QuickFilter

⚠️ Attention ⚠️ Cette librairie ne fonctionne qu'avec une seule recherche par page

Installation

L'utilisation de la librairie se veux le plus simple possible. Installez la avec

npm install @alpeshabitat/quick-filter

Utilisation

Importez la librairie dans votre fichier JavaScript

import quickFilter from '@alpeshabitat/quick-filter'

Il faut ensuite l'activer

quickFilter()

On peut également passer un objet de configuration pour modifier certains paramètres si besoin. Voici les valeurs par défaut et leur utilité.

quickFilter({
    containerDisplay: 'block', // QuickFilter passe les éléments en display none pour les masquer. On précise ici la valeur de display à remettre lors du ré-affichage des éléments. Plus d'informations ci-dessous
    searchInput: '#qf-filter-input', // L'input sur lequel on effectue la recherche
    dataAttribute: 'data-qf-filter-value' // l'attribut a placer sur les éléments a filtrer
})

On peut alors l'utiliser en ajoutant tout d'abord l'id qf-filter-input sur l'input de recherche

<input id="qf-filter-input" type="text" placeholder="🔎 Recherche">

Ainsi que l'attribut data-qf-filter-value sur les éléments à trier. Par exemple:

<div class="monContainer" data-qf-filter-value="maValeur">maValeur</div>

<div class="monContainer" data-qf-filter-value="monAutreValeur">monAutreValeur</div>

⚠️ Cas particuliers ⚠️

Il est possible que les espaces ne soient pas conservés dans l'attribut data-qf-filter-value. Pour éviter cela on peut utiliser le filtre url_encode de twig dans le cas d'une utilisation avec Symfony.

<div data-qf-filter-value="{{ maValeur|url_encode }}">{{ maValeur }}</div>

Si besoin particuliers, il est possible de définir la valeur css de display des conteneurs directement sur l'input de recherche avec l'attribut data-qf-display. Si défini, cet attribut prévaudra la valeur passée en paramètre lors de l'appel de la fonction quickFilter().

<div data-qf-display="flex" id="qf-filter-input"></div>

Et c'est tout!

👾 Environnement de développement

🏁 Pré-requis

• NPM/Nodejs

🤝 Contribuer au projet

Faire un

npm install

Il est possible de tester facilement le paquet en l'installant dans un autre projet avec la commande

npm install /chemin/complet/vers/le/dossier/de/quickFilter

Les changements s'appliqueront en temps réel

📃 Règles de codage

• Le projet utilise une configuration prettier disponible dans le fichier prettierrc, il faut donc installer l'extension Prettier sur VsCode
• Indentation = 4 espaces

🔍 Merge Request

Les "Merges Requests" sont les bienvenues.

Pour les changements majeurs, veuillez en discuter avec le reste de l'équipe.

Merci de ne jamais travailler directement dans la branche main.

🏛 Code de Conduite

Dans l'intérêt de favoriser un environnement ouvert et accueillant, nous nous engageons à faire de la participation à ce projet une expérience exempte de harcèlement pour tout le monde, quel que soit le niveau d'expérience, le sexe, l'identité ou l'expression de genre, l'orientation sexuelle, le handicap, l'apparence personnelle, la taille physique, l'origine ethnique, l'âge, la religion ou la nationalité.