/Personnaliser le composant up-confirm de unpoly
June 13, 2024
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 :
href | url à exécuter après la confirmation |
up-confirm | contient le message à afficher |
up-layer (optionnel) | https://unpoly.com/up.layer |
up-target (optionnel) | https://unpoly.com/targeting-fragments |
up-method (optionnel) | https://unpoly.com/a-up-follow#up-method |
colorButton (optionnel) | class CSS pour la couleur du bouton ok |
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