Éléments interactifs

Popup, Tooltip, Accordion, Tabs et Slider. Tous les éléments sont emboîtables (nestable) et initialisés automatiquement au chargement.

Popup / Modal

Système de popup/modal avec overlay, fermeture par clic extérieur, touche Escape et bouton. Les popups sont empilables (nestable).

Structure HTML

<button data-popup-target="demo">Ouvrir le popup</button>

<div class="popup" data-popup="demo">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <h2>Titre du popup</h2>
    <p>Contenu du popup.</p>
  </div>
</div>

Attributs

Fermeture

• Clic sur .popup__overlay
• Clic sur [data-popup-close]
• Touche Escape (ferme le dernier ouvert)

Popups imbriqués

Les popups peuvent être imbriqués. Le z-index est géré automatiquement par CSS (.popup .popup → z-index supérieur). (Le z-index contrôle quel élément s'affiche par-dessus les autres quand ils se superposent. Le framework gère ça automatiquement — vous n'avez pas à vous en soucier.) La touche Escape ferme toujours le dernier popup ouvert.

Variantes de position

Ajoutez data-popup-position sur le .popup pour changer l'animation et la disposition :

Popup centré (défaut)

<button data-popup-target="demo">Ouvrir</button>
<div class="popup" data-popup="demo">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <h2>Titre</h2>
    <p>Contenu du popup.</p>
  </div>
</div>

Panneau droit

<button data-popup-target="menu">Menu</button>
<div class="popup" data-popup="menu" data-popup-position="right">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <h2>Menu</h2>
  </div>
</div>

Panneau gauche

<button data-popup-target="sidebar">Sidebar</button>
<div class="popup" data-popup="sidebar" data-popup-position="left">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <h2>Sidebar</h2>
  </div>
</div>

Bottom sheet

<button data-popup-target="sheet">Bottom sheet</button>
<div class="popup" data-popup="sheet" data-popup-position="bottom">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <p>Contenu en bas.</p>
  </div>
</div>

Panneau haut

<button data-popup-target="top-panel">Panneau haut</button>
<div class="popup" data-popup="top-panel" data-popup-position="top">
  <div class="popup__overlay"></div>
  <div class="popup__content">
    <button class="popup__close" data-popup-close>&times;</button>
    <p>Contenu en haut.</p>
  </div>
</div>

Sur mobile (≤ 767px), les panneaux latéraux passent en pleine largeur automatiquement.

Classes CSS

Attributs récapitulatifs

Tooltip

Bulle d'information au survol ou au focus. Repositionnement automatique si la bulle déborde de la fenêtre.

Utilisation

<button data-tooltip="Texte de la bulle">Survolez-moi</button>

<!-- Avec position -->
<button data-tooltip="Info" data-tooltip-pos="bottom">En bas</button>
<button data-tooltip="Info" data-tooltip-pos="left">À gauche</button>
<button data-tooltip="Info" data-tooltip-pos="right">À droite</button>

Les tooltips fonctionnent sur n'importe quel élément HTML : <span>, <button>, <a>, <div>, etc.

Attributs

Repositionnement automatique

Si la bulle déborde du viewport, elle se repositionne automatiquement (ex. top → bottom si pas de place en haut).

Classes CSS

Accordion

Panneaux dépliables avec animation CSS Grid. Support du mode multiple et de l'imbrication.

Structure HTML

<div class="accordion">
  <div class="accordion__item">
    <button class="accordion__header">Section 1</button>
    <div class="accordion__body">
      <div>Contenu du premier panneau.</div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__header">Section 2</button>
    <div class="accordion__body">
      <div>Contenu du deuxième panneau.</div>
    </div>
  </div>
  <div class="accordion__item">
    <button class="accordion__header">Section 3</button>
    <div class="accordion__body">
      <div>Contenu du troisième panneau.</div>
    </div>
  </div>
</div>

Mode multiple

Par défaut, un seul panneau est ouvert à la fois. Ajoutez data-accordion-multi pour permettre l'ouverture de plusieurs panneaux simultanément :

<div class="accordion" data-accordion-multi>
  ...
</div>

Accordéon imbriqué

Les accordéons peuvent être imbriqués. Chaque niveau gère ses propres items indépendamment :

<div class="accordion">
  <div class="accordion__item">
    <button class="accordion__header">Parent</button>
    <div class="accordion__body">
      <div>
        <div class="accordion">
          <div class="accordion__item">
            <button class="accordion__header">Enfant</button>
            <div class="accordion__body">
              <div>Contenu imbriqué.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Classes CSS

Tabs

Système d'onglets avec navigation et panneaux. Support de l'imbrication.

Scroll automatique

Quand les onglets débordent, la barre de navigation scrolle horizontalement avec des dégradés indicateurs. Le tab actif est automatiquement centré.

Structure HTML

<div class="tabs">
  <div class="tabs__nav">
    <button class="tabs__tab" data-tab="tab1">Onglet 1</button>
    <button class="tabs__tab" data-tab="tab2">Onglet 2</button>
    <button class="tabs__tab" data-tab="tab3">Onglet 3</button>
  </div>
  <div class="tabs__panel" data-tab-panel="tab1">Contenu 1</div>
  <div class="tabs__panel" data-tab-panel="tab2">Contenu 2</div>
  <div class="tabs__panel" data-tab-panel="tab3">Contenu 3</div>
</div>

Onglet actif par défaut

Par défaut, le premier onglet est actif. Ajoutez data-tab-active pour choisir un autre :

<button class="tabs__tab" data-tab="tab2" data-tab-active>Onglet 2</button>

Attributs

Classes CSS

Accessibilité clavier

Les onglets supportent la navigation clavier complète conformément au pattern WAI‑ARIA Tabs :

• Flèche droite : focus et active l'onglet suivant (retour au premier en fin de liste)
• Flèche gauche : focus et active l'onglet précédent (retour au dernier en début de liste)
• Home : focus et active le premier onglet
• End : focus et active le dernier onglet

Le pattern roving tabindex est utilisé : l'onglet actif a tabindex="0", les autres tabindex="-1". Les attributs ARIA (role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls) sont générés automatiquement par le JS.

Slider / Carousel

Carousel avec navigation par boutons, dots, swipe tactile, drag souris, autoplay et boucle. Support multi-slides.

Structure HTML

<!-- Slider basique (1 slide visible) -->
<div class="slider">
  <div class="slider__track">
    <div class="slider__slide">Slide 1</div>
    <div class="slider__slide">Slide 2</div>
    <div class="slider__slide">Slide 3</div>
  </div>
  <button class="slider__prev"></button>
  <button class="slider__next"></button>
  <div class="slider__dots"></div>
</div>

Slider multi-slides

<!-- Slider responsive multi-slides -->
<div class="slider"
     data-slider-per-view="3 2 2 1"
     data-slider-loop="true"
     data-slider-drag="true"
     data-slider-gap="md">
  <div class="slider__track">
    <div class="slider__slide">Slide 1</div>
    <div class="slider__slide">Slide 2</div>
    <div class="slider__slide">Slide 3</div>
    <div class="slider__slide">Slide 4</div>
    <div class="slider__slide">Slide 5</div>
    <div class="slider__slide">Slide 6</div>
  </div>
  <button class="slider__prev"></button>
  <button class="slider__next"></button>
  <div class="slider__dots"></div>
</div>

Le format data-slider-per-view="3 2 2 1" définit le nombre de slides visibles par breakpoint : desktop tablette mobile-paysage mobile. Les valeurs cascadent : "3" = 3 slides sur tous les écrans, "3 2" = 3 desktop + 2 pour le reste.

Attributs

Personnalisation des flèches

Les flèches utilisent par défaut les icônes chevron. Personnalisez-les via ces attributs sur le .slider :

<div class="slider"
     data-slider-arrow-prev="arrow-left"
     data-slider-arrow-next="arrow-right"
     style="--slider-arrow-color: #fff; --slider-arrow-bg: var(--color-primary); --slider-arrow-hover-bg: var(--color-primary-dark);">
  ...
</div>

Les icônes sont chargées depuis le système d'icônes (icons.js). Les styles peuvent aussi être définis via les CSS custom properties --slider-arrow-* directement en CSS.

Position des flèches

Par défaut, les flèches sont superposées aux slides (mode overlay). L'attribut data-slider-arrow-pos permet de les repositionner :

Pour les positions top-* et bottom-*, les flèches sont sur une ligne séparée des dots. Pour les positions left et right, les flèches et les dots partagent la même ligne (avec scroll horizontal si les dots débordent).

<!-- Flèches en haut à droite -->
<div class="slider" data-slider-arrow-pos="top-right">
  ...
</div>

<!-- Flèches en bas (sous les dots) -->
<div class="slider" data-slider-arrow-pos="bottom-right">
  ...
</div>

<!-- Flèches à gauche, dots à droite (même ligne) -->
<div class="slider" data-slider-arrow-pos="left">
  ...
</div>

<!-- Dots à gauche, flèches à droite (même ligne) -->
<div class="slider" data-slider-arrow-pos="right">
  ...
</div>

<!-- Flèches à l'extérieur -->
<div class="slider" data-slider-arrow-pos="outside">
  ...
</div>

CSS custom properties

Navigation

• Boutons : .slider__prev et .slider__next (optionnels)
• Dots : .slider__dots (générés automatiquement par JS, optionnel)
• Swipe : tactile natif (seuil 50px)
• Drag souris : activé via data-slider-drag="true"

Exemple complet

<div class="slider"
     data-slider-per-view="2"
     data-slider-loop="true"
     data-slider-auto="4000"
     data-slider-drag="true"
     data-slider-gap="md"
     data-slider-arrow-prev="arrow-left"
     data-slider-arrow-next="arrow-right"
     style="--slider-arrow-color: #fff; --slider-arrow-bg: var(--color-primary); --slider-arrow-hover-bg: var(--color-primary-dark);">
  <div class="slider__track">
    <div class="slider__slide"><img src="img/1.jpg" alt=""></div>
    <div class="slider__slide"><img src="img/2.jpg" alt=""></div>
    <div class="slider__slide"><img src="img/3.jpg" alt=""></div>
    <div class="slider__slide"><img src="img/4.jpg" alt=""></div>
  </div>
  <button class="slider__prev"></button>
  <button class="slider__next"></button>
  <div class="slider__dots"></div>
</div>

Classes CSS

API JavaScript

Toutes ces fonctions sont appelées automatiquement au DOMContentLoaded. Appelez‑les manuellement après avoir injecté du HTML dynamique :

// Après injection de HTML dynamique
initElements(monConteneur);
initAnimations(monConteneur);
initIcons(monConteneur);
initInteractions(monConteneur);

Inclure dans une page

<link rel="stylesheet" href="core/css/elements.css">
<script src="core/js/elements.js" defer></script>

Accessibilité

• Les popups se ferment avec la touche Escape.
• Les accordions s'ouvrent/ferment au clic.
• Les tooltips apparaissent au focus clavier en plus du hover.
• Les tabs supportent la navigation clavier complète (flèches, Home, End) avec roving tabindex et attributs WAI‑ARIA.
• Les sliders se contrôlent via les boutons, le drag tactile et l'autoplay.
• Le header mobile met à jour aria-expanded et aria-label sur le burger, se ferme via Escape avec retour du focus.
• Toutes les animations respectent prefers-reduced-motion.

Header mobile

Le module Header Mobile gère l'ouverture et la fermeture du menu de navigation sur mobile (burger menu). Il est initialisé automatiquement si un élément .header contenant un bouton [data-header-toggle] est présent dans la page.

Attributs

Comportement

• Clic sur le burger : ajoute la classe .header--open sur le .header, verrouille le scroll de la page
• Clic sur l'overlay : ferme le menu et déverrouille le scroll
• Touche Escape : ferme le menu et remet le focus sur le burger
• Redimensionnement au-dessus du breakpoint tablette : ferme automatiquement le menu
• Clic sur un lien de navigation : ferme automatiquement le menu

Accessibilité

Le burger met à jour aria-expanded (true/false) et aria-label (« Ouvrir le menu » / « Fermer le menu ») à chaque changement d'état.

Markup

Le composant Header (components/header.js) inclut déjà le markup correct avec data-header-toggle et data-header-overlay. Aucune configuration supplémentaire n'est nécessaire si vous utilisez le composant standard.

<header class="header">
  <button data-header-toggle aria-expanded="false" aria-label="Ouvrir le menu">
    <!-- Icône burger -->
  </button>
  <nav class="header__nav">
    <!-- Liens de navigation -->
  </nav>
  <div data-header-overlay></div>
</header>

Classes CSS