Interactions

Ajoutez des comportements interactifs à n'importe quel élément HTML via un simple attribut data-interact, sans écrire une seule ligne de JavaScript.

Vue d'ensemble

Le système d'interactions permet d'ajouter des comportements interactifs à n'importe quel élément HTML via un simple attribut data-interact, sans écrire une seule ligne de JavaScript.

Exemples de ce que vous pouvez faire :

• Afficher/masquer un élément au clic
• Ajouter une classe au survol
• Déclencher une action quand un élément entre dans le viewport
• Stocker une valeur dans le localStorage
• Appeler une fonction JavaScript globale
• Combiner plusieurs interactions sur un même élément

Syntaxe

Format général :

data-interact="trigger | action[:params] | cible [| timing] [| once]"

Les segments sont séparés par | (pipe entouré d'espaces).

Exemple complet :

<button data-interact="click | toggle-class:open | #sidebar">
  Menu
</button>

Déclencheurs

10 déclencheurs disponibles :

Actions

11 actions disponibles :

Cible

Le segment cible détermine sur quel(s) élément(s) l'action s'applique :

• self (par défaut) — l'élément déclencheur lui‑même
• N'importe quel sélecteur CSS — un ou plusieurs autres éléments

<!-- self : l'action s'applique au bouton lui-même -->
<button data-interact="click | toggle-class:active">Toggle</button>

<!-- Sélecteur CSS : l'action s'applique à #panel -->
<button data-interact="click | toggle-class:open | #panel">Ouvrir</button>
<div id="panel">Contenu du panneau</div>

<!-- Sélecteur multiple : tous les .card reçoivent la classe -->
<button data-interact="click | add-class:highlight | .card">Tout surligner</button>

Auto‑reverse (hover / focus)

Les triggers hover et focus inversent automatiquement l'action quand l'événement se termine (mouseleave / blur). Pas besoin d'écrire deux interactions :

<!-- Au survol : ajoute .highlight, au départ : la retire automatiquement -->
<div data-interact="hover | add-class:highlight">Survolez-moi</div>

<!-- Au focus : affiche le tooltip, au blur : le masque automatiquement -->
<input data-interact="focus | show | .tooltip" placeholder="Cliquez ici">
<span class="tooltip" data-interact-hidden>Aide contextuelle</span>

Timing animation

Quand l'élément déclencheur possède une classe d'animation framework (anim-*), vous pouvez contrôler le moment d'exécution de l'interaction par rapport à cette animation :

<!-- L'action s'exécute après la fin de l'animation fade-in -->
<div class="anim-fade-in"
     data-interact="viewport-enter | add-class:loaded | self | after">
  Contenu animé
</div>

<!-- L'action s'exécute avant l'animation -->
<button class="anim-scale-in"
        data-interact="click | toggle-class:active | #panel | before">
  Action
</button>

Si l'élément n'a pas de classe anim-*, le timing est ignoré et l'action s'exécute immédiatement.

Option once

Ajoutez once à la fin pour n'exécuter l'interaction qu'une seule fois :

<!-- Le popup ne s'affiche qu'une seule fois -->
<div data-interact="window-leave | show | .exit-popup | once"></div>

<!-- La classe n'est ajoutée qu'au premier scroll -->
<header data-interact="scroll | add-class:scrolled | self | once"></header>

<!-- Combiné avec timing -->
<div class="anim-fade-in"
     data-interact="viewport-enter | add-class:revealed | self | after | once">
  Contenu
</div>

Interactions multiples

Pour attacher plusieurs interactions à un même élément, utilisez les attributs numérotés data-interact-1, data-interact-2, … jusqu'à data-interact-10 :

<button
  data-interact="click | toggle-class:open | #menu"
  data-interact-1="click | toggle-class:active | self"
  data-interact-2="click | set-attr:aria-expanded:true | self">
  Menu
</button>

L'attribut principal data-interact et les attributs numérotés fonctionnent ensemble. Tous sont exécutés.

Stockage navigateur

Les actions storage-set et storage-remove permettent de lire/écrire dans le stockage du navigateur :

<!-- Stocker un choix dans le localStorage -->
<button data-interact="click | storage-set:local:theme:dark">
  Mode sombre
</button>

<!-- Supprimer la valeur -->
<button data-interact="click | storage-remove:local:theme">
  Réinitialiser
</button>

<!-- Stocker en session uniquement -->
<button data-interact="click | storage-set:session:sidebar:collapsed">
  Fermer la sidebar
</button>

<!-- Stockage window (onglet courant, non persistant) -->
<button data-interact="click | storage-set:window:step:2">
  Étape suivante
</button>

API JavaScript

Utilisez cette fonction après avoir injecté du contenu dynamique (AJAX, innerHTML) :

// Après injection de HTML dynamique
document.getElementById('container').innerHTML = newHTML;
window.initInteractions(document.getElementById('container'));

Exemples complets

Toggle afficher/masquer

<button data-interact="click | toggle-class:open | #panel">Afficher / Masquer</button>
<div id="panel" data-interact-hidden>Contenu du panneau</div>

Classe au survol

<div data-interact="hover | add-class:highlight">
  Survolez-moi
</div>

Stocker une préférence

<button
  data-interact="click | storage-set:session:pref:active"
  data-interact-1="click | add-class:btn--primary | self">
  Activer
</button>

<button
  data-interact="click | storage-remove:session:pref">
  Réinitialiser
</button>

Exit intent popup

<div data-interact="window-leave | show | #exit-popup | once"></div>

<div id="exit-popup" data-interact-hidden>
  <p>Attendez ! Ne partez pas sans découvrir nos offres.</p>
  <button data-interact="click | hide | #exit-popup">Fermer</button>
</div>

Action au scroll (une seule fois)

<div data-interact="scroll | add-class:scrolled | .header | once"></div>

Interactions multiples

<button
  data-interact="click | toggle-class:btn--primary | self"
  data-interact-1="click | toggle-attr:aria-pressed:true | self"
  data-interact-2="click | storage-set:session:state:toggled">
  Multi-actions
</button>

Tabs manuels

<button data-interact="click | add-class:active | self"
        data-interact-1="click | show | #tab-1"
        data-interact-2="click | hide | #tab-2">
  Onglet 1
</button>
<div id="tab-1">Contenu onglet 1</div>
<div id="tab-2" data-interact-hidden>Contenu onglet 2</div>

Compteur de visites (localStorage)

<section data-interact="load | storage-set:local:visited:true">
  <!-- Enregistre la visite au chargement -->
</section>

Animation + interaction séquencée

<div class="anim-fade-in-up"
  data-interact="viewport-enter | add-class:highlight | self | after | once">
  Ce bloc reçoit .highlight APRÈS son animation d'entrée
</div>

Problèmes courants

Référence rapide

Déclencheurs

Actions

Sécurité

Le système d'interactions inclut un modèle de sécurité complet pour prévenir les attaques XSS et les abus, notamment quand les interactions sont utilisées dans du contenu généré par les utilisateurs (wireframes, CMS, templates éditables).

Fonctions bloquées (BLOCKED_FN)

L'action call valide le nom de la fonction contre une liste noire. Les fonctions suivantes sont interdites :

eval, Function, setTimeout, setInterval, requestAnimationFrame,
importScripts, fetch, XMLHttpRequest, WebSocket,
Worker, SharedWorker, ServiceWorker, import, require,
__proto__, constructor, prototype

Toute tentative d'appel à ces fonctions est silencieusement ignorée.

Attributs bloqués (BLOCKED_ATTR_RE)

Les actions set-attr et toggle-attr rejettent certains noms d'attributs dangereux :

• on* — tous les gestionnaires d'événements (onclick, onerror, onload, etc.)
• srcdoc — injection HTML dans les iframes
• formaction — redirection de formulaire
• action — cible de soumission de formulaire
• xlink:href — liens SVG
• data: — protocole data inline
• javascript: — exécution JavaScript inline

Valeurs d'attributs dangereuses (DANGEROUS_ATTR_VALUE_RE)

Même si le nom de l'attribut est autorisé, les valeurs sont également vérifiées. Les valeurs contenant les patterns suivants sont bloquées :

javascript:
data:text/html
data:image/svg
vbscript:

Validations par regex

Chaque type de paramètre est validé par une regex stricte :

Les espaces et caractères spéciaux sont rejetés pour empêcher les injections.

Limites