Réservations de sorties en pirogue (Alpine.js)

js/extensions.js · 3.1 Ko

/* ==========================================================================
   js/extensions.js — On ÉTEND Alpine avec une directive et des magics perso
   --------------------------------------------------------------------------
   Alpine permet d'inventer ses propres :
     - MAGICS     (« $quelqueChose »)   -> Alpine.magic()
     - DIRECTIVES (« x-quelque-chose ») -> Alpine.directive()

   Ici :
     $ariary(nombre)   magic  : formate un montant        -> "45 000 Ar"
     $dateFr(iso)      magic  : date lisible en français   -> "jeu. 5 mars 2026"
     x-avatar="nom"    directive : écrit les initiales du nom dans l'élément
                                   et lui donne une couleur propre à ce nom.

   Comme store.js, ce fichier s'enregistre dans « alpine:init » : il doit donc
   être chargé AVANT alpine.min.js (voir index.html).
   ========================================================================== */

document.addEventListener('alpine:init', () => {

  /* ------------------------------------------------------------------
     MAGIC $ariary
     Alpine.magic(nom, (el, { Alpine }) => valeur)
     La fonction que l'on passe est appelée à chaque utilisation du magic ;
     elle doit RETOURNER ce que l'on obtient en écrivant $ariary.
     Ici, on retourne une fonction : on écrit donc  $ariary(45000).
     ------------------------------------------------------------------ */
  Alpine.magic('ariary', () => (montant) => Outils.formatAriary(montant));

  /* MAGIC $dateFr : même principe pour les dates. */
  Alpine.magic('dateFr', () => (iso) => Outils.dateLisible(iso));

  /* ------------------------------------------------------------------
     DIRECTIVE x-avatar
     Utilisation :  <span x-avatar="reservation.client"></span>

     Alpine.directive(nom, (el, infos, utilitaires) => { ... })
       - el            : l'élément HTML qui porte la directive ;
       - infos         : { expression, value, modifiers… } ;
       - utilitaires   : { evaluate, evaluateLater, effect, cleanup… }.

     « evaluateLater(expression) » prépare l'expression (ici : "reservation.client")
     pour l'évaluer plus tard, avec les données du composant.
     « effect(fonction) » exécute la fonction et la relance quand une donnée
     lue dedans change : si le nom du client est modifié, l'avatar suit.
     ------------------------------------------------------------------ */
  Alpine.directive('avatar', (el, { expression }, { evaluateLater, effect }) => {
    const lireNom = evaluateLater(expression);

    effect(() => {
      lireNom((nom) => {
        el.textContent = Outils.initiales(nom);
        // Teinte (0-359) calculée à partir des lettres du nom : toujours la même pour un nom donné.
        let teinte = 0;
        for (const lettre of String(nom || '')) teinte = (teinte * 31 + lettre.charCodeAt(0)) % 360;
        // Fond assez sombre pour que le texte blanc reste lisible.
        el.style.background = 'hsl(' + teinte + ', 45%, 32%)';
        el.style.color = '#fff';
        // Les initiales sont décoratives : le nom complet est écrit à côté.
        el.setAttribute('aria-hidden', 'true');
      });
    });
  });
});