Avant de supprimer un enregistrement de la base de données à partir d'une interface Web, il est d'usage de demander une confirmation à l'usager.
On utilisera pour cela une boîte de confirmation JavaScript. Cette boîte apparaît généralement par-dessus la page sous forme de popup.
Je vous présente ici une technique pour effectuer la confirmation en JavaScript pur sans aucune bibliothèque externe. En fait, vous créerez votre propre bibliothèque.
Pour faire apparaître la boîte de confirmation, vous aurez besoin de ces fichiers :
Sous WordPress, le chargement de tous ces fichiers prendra cette forme. Dans d'autres langages de programmation, il suffira d'ajouter les balises HTML requises.
/**
* Charge des scripts et des feuilles de style dans toutes les pages du tableau de bord.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action('admin_enqueue_scripts', 'monprefixe_charger_css_js_admin');
*/
function monprefixe_charger_css_js_admin( $hook ) {
global $monprefixe_hook_gestion; // variable initialisée lors de l'ajout de l'option de menu
// fichiers à charger seulement pour la page de gestion de mon thème
if ( $hook == $monprefixe_hook_gestion ) {
wp_enqueue_style( 'ma-bibliotheque-popup', get_stylesheet_directory_uri() . '/ma-bibliotheque-popup/style.css' );
wp_enqueue_script( 'ma-bibliotheque-popup', get_stylesheet_directory_uri() . '/ma-bibliotheque-popup/script.js', null, null, true );
wp_enqueue_script( 'confirmation-suppression', get_stylesheet_directory_uri() . '/js/confirmation-suppression.js', array( 'ma-bibliotheque-popup' ), null, true );
}
}
add_action('admin_enqueue_scripts', 'monprefixe_charger_css_js_admin');
La bibliothèque se chargera de générer le code HTML de la boîte de confirmation.
De plus, elle utilisera une astuce intéressante qui consiste à récupérer l'URL dans l'attribut href du lien de suppression, ce lien qui a lancé l'affichage de la boîte de confirmation.
Lorsque l'usager cliquera sur le bouton Oui, le contrôle sera redirigé vers cet URL.
/**
* Affiche la boîte de confirmation.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {String} question.
* @param {String} href URL de la page vers laquelle le traitement sera transféré si on clique sur Oui.
*/
function afficherPopup(question, href) {
// au cas où une boîte aurait déjà été générée
effacerBoite();
const divOverlay = document.createElement("div");
divOverlay.onclick = effacerSiClickEnDehors;
divOverlay.classList.add("mon-popup-confirmation-overlay");
const divBoite = document.createElement("div");
divBoite.classList.add("mon-popup-confirmation");
divOverlay.appendChild(divBoite);
const divQuestion = document.createElement("div");
divQuestion.innerHTML = question;
divQuestion.classList.add("question");
divBoite.appendChild(divQuestion);
const boutonOui = document.createElement("button");
boutonOui.innerHTML = "Oui";
boutonOui.dataset.href = href;
boutonOui.classList.add("button");
boutonOui.classList.add("gauche");
boutonOui.onclick = redirigerVersHref;
divBoite.appendChild(boutonOui);
const boutonNon = document.createElement("button");
boutonNon.innerHTML = "Non";
boutonNon.classList.add("button");
boutonNon.classList.add("droite");
boutonNon.onclick = effacerBoite;
divBoite.appendChild(boutonNon);
document.body.appendChild(divOverlay);
}
/**
* Retrouve l'attribut href du lien qui a mené à l'affichage de la boîte de confirmation.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {Event} event.
*
* @return {string} Valeur de l'attribut href ou "" s'il n'y en avait pas.
*/
function retrouverHrefLien(event) {
let href = "";
const lien = event.target;
if (lien != null) {
href = lien.getAttribute("href") || "";
}
return href;
}
/**
* Redirige vers la page qui correspond à l'attribut href ou recharge la page actuelle si href est à blanc.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {Event} event.
*/
function redirigerVersHref(event) {
const bouton = event.target;
let href = "";
if (bouton != null) {
// retrouve l'attribut data-href du bouton
href = bouton.dataset.href || "";
}
if (href != "") {
// affiche la page de l'attribut href
window.location.href = href;
}
else {
// réaffiche la page actuelle
window.location.reload();
}
}
/**
* Efface la boîte de confirmation
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*/
function effacerBoite() {
document.querySelectorAll('div.mon-popup-confirmation-overlay').forEach(e => e.remove());
}
/**
* Efface la boîte de confirmation si l'usager clique sur le overlay en dehors de la division interne.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {Event} event.
*/
function effacerSiClickEnDehors(event) {
const overlay = document.getElementsByClassName('mon-popup-confirmation-overlay');
const popup = document.getElementsByClassName('mon-popup-confirmation');
if (overlay.length > 0 && popup.length > 0) {
// il ne peut jamais y avoir plus d'une boîte de confirmation puiqu'on détruit les existantes avant d'en créer une nouvelle
if (event.target != popup[0]) {
effacerBoite();
}
}
}
Je vous propose une feuille de style minimaliste pour la boîte de confirmation. À vous d'ajouter les styles pour l'obtention d'une boîte qui répond à vos besoins.
Les boutons utilisent la classe button définie dans le tableau de bord WordPress. Si vous utilisez la bibliothèque dans un autre contexte, vous pourrez définir leur apparence en ajoutant les règles CSS désirées.
Par défaut, voici l'apparence de la boîte de confirmation dans le tableau de bord WordPress :
Et dans un autre site Web :
.mon-popup-confirmation-overlay {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.mon-popup-confirmation {
position: absolute;
background-color: white;
color: #3c3c3c;
border: #c3c3c3 solid 1px;
border-radius: 8px;
padding: 10px 20px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
}
.mon-popup-confirmation .question {
font-size: 1.1em;
}
.mon-popup-confirmation button.gauche {
margin: 10px 5px 10px 0;
}
.mon-popup-confirmation button.droite {
margin: 10px 0 10px 5px;
}
Le fichier propre à votre projet contiendra du code semblable à celui-ci.
// associe la fonction confirmerSuppression() au clic sur un lien
document.addEventListener("DOMContentLoaded", function(event) {
// l'événement doit provenir de la balise <a> qui contient l'attribut href
// ajuster le sélecteur selon votre projet
let liensSuppression = document.querySelectorAll(".trash a");
for (let lienSuppression of liensSuppression) {
lienSuppression.onclick = confirmerSuppression;
}
});
/**
* Fait apparaître une boîte de confirmation.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {Event} event.
*/
function confirmerSuppression(event) {
// Aucune soumission tant que l'usager n'a pas confirmé.
event.preventDefault();
const href = retrouverHrefLien(event);
afficherPopup("Désirez-vous vraiment supprimer cet item?", href);
}
▼Publicité
