/Personnaliser le composant up-confirm de unpoly

L'attribut up-confirm est utilisé pour afficher une boîte de dialogue de confirmation avant d'exécuter une action spécifique, telle qu'une soumission de formulaire ou un lien.

Utilisation de up-confirm

L'attribut up-confirm peut être ajouté à n'importe quel élément HTML, tel qu'un bouton ou un lien. Lorsque cet élément est cliqué, une boîte de dialogue de confirmation s'affiche avec le message spécifié dans l'attribut. Si l'utilisateur confirme l'action, celle-ci est exécutée ; sinon, l'action est annulée.

<a href="/delete-item" up-confirm="Are you sure you want to delete this item?">Delete</a>

Custom up-confirm

Cette fonctionnalité utilise le prompt natif du navigateur. Pour le personnaliser, il est nécessaire d'intercepter cet appel et de recréer son composant. Dans notre exemple, nous utilisons DaisyUI et Alpine.js, vous pouvez tout à fait adapter le code pour vous en passer.

Nous allons utiliser la fonction up.compiler d'Unpoly, qui permet de compiler ou de préparer les éléments correspondant à un sélecteur CSS lorsqu'ils sont ajoutés au DOM.

up.compiler('[up-confirm]', function (el) {
    up.on(el, 'click', (event, element) => {
      event.preventDefault()
      up.confirm(element)
    })
  })

Nous ajoutons un événement click sur tous les éléments contenant notre attribut up-confirm

Il nous reste maintenant à réaliser notre propre modal de confirmation en surchargeant up.confirm

up.confirm = function (element) {
  const href = element.getAttribute('href')
  const message = element.getAttribute('up-confirm')
  const layer = element.getAttribute('up-layer') ?? 'current'
  const target = element.getAttribute('up-target') ?? 'main'
  const method = element.getAttribute('up-method') ?? 'GET'
  const colorButton = element.dataset.colorButton ?? 'btn-primary'

  const dialog = up.element.createFromHTML(`
    <div class="modal modal-open z-[2000]" x-data="{}" @keyup.escape.window="$el.remove()">
      <div class="modal-box">
          <h3 class="font-bold text-lg">${message}</h3>

          <div class="modal-action">
              <button @click="$root.remove()" class="btn btn-ghost">
                  cancel
              </button>

              <button class="btn ${colorButton}" @click="up.navigate({ layer: '${layer}', target: '${target}', url: '${href}', method: '${method}' }); $root.remove()">
                  ok
              </button>
          </div>
      </div>
    </div>`)

  document.querySelector('body').append(dialog)
}

Ici, nous commençons par récupérer :

La méthode up.element.createFromHTML nous permet de transformer notre chaîne de caractères en élément du DOM.

Alpine.js est utilisé pour faciliter la gestion de fermeture avec @keyup@click ainsi que les variables $root et $el pour supprimer notre HTML avec le bouton "cancel" ou un clic en dehors de notre modal , si vous n'utilisez pas Alpine sur votre projet, il est préférable de le remplacer par du simple code javascript.

Le bouton "ok" va utiliser la méthode up.navigate pour lancer l'action souhaitée.

Exemple : https://github.com/batosai/adonis-starter-kit/blob/main/src/core/resources/js/app.js