Vue d'ensemble

L'attribut up-confirm d'Unpoly affiche une boîte de dialogue de confirmation avant d'exécuter des actions comme la soumission de formulaires ou les clics sur des liens.

Utilisation de base

L'attribut up-confirm peut être ajouté à des éléments HTML comme des boutons ou des liens. Au clic, il affiche une dialog de confirmation avec un message spécifié. Si confirmé, l'action s'exécute ; sinon elle est annulée.

<a href="delete-item" up-confirm="Êtes-vous sûr de vouloir supprimer cet élément ?">Supprimer</a>

Implémentation personnalisée

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 :

• href : URL à exécuter après confirmation
• up-confirm : texte du message
• up-layer (optionnel) : ciblage du layer Unpoly
• up-target (optionnel) : ciblage du fragment
• up-method (optionnel) : méthode HTTP
• data-color-button (optionnel) : classe CSS pour le style du bouton

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