IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Téléchargé 13 fois
Vote des utilisateurs
1 
0 
Détails
Licence : Libre
Mise en ligne le 22 septembre 2020
Plate-formes : Android, iOS, Linux, Mac, Windows, Windows Phone
Langue : Français
Référencé dans
Navigation

CAPop : Remplacement des alert(), confirm() et prompt()

Pour remplacer les functions alert(), confirm() et prompt() qui vont disparaître (avec chrome du moins),
je me suis fais une function CAPop() qui me permet de regrouper ces 3 functions en 1 avec quelques personnalisations possible

Cette function retourne une promesse.

Bien que la popup soit paramétrable, j'ai voulu garder le code concis, et donc, je n'ai pas fait beaucoup de paramétrages possible
=> j'ai voulu garder le fonctionnement basique des anciennes functions : ce n'est pas une popup pleinement paramétrable comme on l'entend.

J'ai mis quelques exemples dans le fichier de démo pour illustrer chaque paramétrage possible.
Nos ressources disponibles
Pour remplacer alert(), un simple message suffit :
CAPop({alert:'Mon message ici'});

Je détecte si l'utilisateur clique sur un bouton, ou s'il annule la popup (avec la touche échap par exemple) si jamais on veut faire des traitements spécifiques
Code : Sélectionner tout
1
2
3
4
5
6
7
CAPop({
        alert:'juste un message (le bouton est ajoute automatiquement, touche echap possible)'
    }).then(data => {
        console.log('bouton clicked', data);
    }).catch(msg => {
        console.log('CAPop has been canceled :', msg);
    });

Pour remplacer un confirm(), un message de confirmation suffit :
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
CAPop({
        confirm:'confirmez... ou pas',
    }).then(data => {
        if(data) {
            console.log('vous valide');
        } else {
            console.log('vous annule');
        }
    });

Pour remplacer un prompt(), un message de prompt suffit :
Code : Sélectionner tout
1
2
3
4
5
6
7
CAPop({
        prompt:'tapez quelque chose...'
    }).then(data => {
        console.log('vous avez tape :', data);
    }).catch(msg => {
        console.log('vous avez annule la saisie...', msg);
    });

CAPop peut être paramétré :
on peut ajouter un croix de fermeture, ajouter un titre, définir un statut de popup (info,warn,error,success), ajouter des boutons/changer les labels, ajouter des actions spécifiques sur les boutons, et enfin ajouter une option pour attendre la fin de l'action du bouton pour résoudre la promesse de la CAPop

Dans le fichier de démo, a la fin, je fais un traitement long au clique du bouton : bien que la popup se ferme tout de suite, la promesse n'est resolue qu'a la fin de l'ajax.

Quand aucun bouton n'est défini, un bouton "ok" est automatiquement ajouté pour être sur que l'utilisateur puisse fermer la popup
Avatar de VValbator
Candidat au Club https://www.developpez.com
Le 20/09/2020 à 18:58
Un grand merci à toi Doksuri

Une fonction qui remplit parfaitement sa mission.
Le code est simple et facile à modifier selon nos besoins.

Je m'en sert actuellement sur le site que je suis entrain de construire pour mon boulot, et le rendu est vraiment génial.
Quelques modif sur la feuille de style du coup j'ai pu utilisé les couleurs officielles de ma boite.

C'est vraiment un super boulot, et ça rend bien mieux que les fades boites de dialogues par défaut proposées par les navigateurs.

En bref, bravo, félicitations et merci pour ton partage

Cela dit, serait-ce possible d'ajouter la touche Entrer pour confirmer un choix, et Echap pour annuler quand on utilise l'option CONFIRM ?
Si oui, pourrais-tu m'indiquer comment ?
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 21/09/2020 à 9:15
content que ca te plaise et surtout, que ca te soit utile !

pour ce qui est de la touche echap, c'est deja en place :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
var closeCAPopEscape = (e) => { 
                if(e.keyCode === 27) { 
                    closeCAPop(); 
                    reject('escaped'); 
                } 
            }; 
            if(!options.buttons || (options.buttons && options.buttons.length <= 1)) { 
                document.addEventListener('keyup', closeCAPopEscape); 
            }
cependant, j'en bride l'usage uniquement quand il n'y a pas de bouton, ou qu'il n'y en a qu'un seul

pour ce qui est de la touche, entree, je ne l'ai pas fais, mais ca peut etre une bonne idee en effet
Avatar de VValbator
Candidat au Club https://www.developpez.com
Le 21/09/2020 à 18:17
Ok, donc je m'en suis sorti pour closeCAPopEscape, il suffit de retirer la condition de bridage.

J'ai commencé un peu le truc :

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var closeCAPopEscape = (e) => 
{
	if( e.keyCode === 27 )
	{
		closeCAPop();
		reject( 'escaped' );
	}
};

var validateCAPopEnter = (e) => 
{
	if( e.keyCode === 13 )
	{
		closeCAPop();
		
		// Suite du script...
	}
};
	
document.addEventListener( 'keyup', closeCAPopEscape );
document.addEventListener( 'keyup', validateCAPopEnter );
Le mieux serait d'ajouter une condition qui précise que ça fonctionne seulement s'il s'agit d'un CONFIRM...

Tu aurai une idée pour la Suite du script ?
Je vois pas trop comment expliquer au navigateur qu'il doit réagir avec ENTREE comme si j'avais cliqué sur OK...
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 22/09/2020 à 8:47
j'ai mis a jour le code
=> tu as la version 1.1

Le mieux serait d'ajouter une condition qui précise que ça fonctionne seulement s'il s'agit d'un CONFIRM...
pour des questions d'accessibilite, ce n'est pas une bonne idee

du coup, dans la version 1.1, la touche echap est autorisee quand il y a la croix de fermeture
la touche entree est autorisee quand il n'y a qu'un seul bouton de propose

j'en ai profite pour deplacer l'affichage du "X" pour fermer, dans le css plutot que le JS

et j'ai aussi utilise de vrai button (et non pas des input type=button) ... je ne sais pas a quoi je pensais quand j'ai fais ca

merci pour tes retours & tes idees
Avatar de cyberdede
Futur Membre du Club https://www.developpez.com
Le 30/08/2022 à 12:28
Bonjour

Par quoi remplacer le onsubmit avec Capop après ajout script et css Capop?
Actuellement
Code : Sélectionner tout
<form  method="post"  id="reservation" name="reservation" action="?" onsubmit="return confirm('Voulez-vous valider ?');"
Merci pour votre réponse
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 30/08/2022 à 13:34
bonjour,

Code html : Sélectionner tout
<form  method="post"  id="reservation" name="reservation" action="?">...</form>
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const form = document.getElementById('reservation'); 
form.addEventListener('submit', e => { e.preventDefault(); e.stopPropagation(); validForm(); }); 
  
function validForm() { 
    CAPop({ 
        confirm:'confirmez...', 
        buttons:[ 
            {label:'oui'}, 
            {label:'non'} 
        ] 
    }).then(data => { 
        if(data) { 
            console.log('vous avez clique oui'); 
            form.submit(); 
        } else { 
            console.log('vous avez clique non'); 
        } 
    }); 
}
quelque chose comme ca ?
Avatar de cyberdede
Futur Membre du Club https://www.developpez.com
Le 30/08/2022 à 17:22
Merci Doksuri grâce à toi ca fonctionne

j'aimerai mettre des retours à la ligne dans le texte du confirm
le \n et <br> ne fonctionnent pas

Peut être un document.write() quelque part mais où?
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 30/08/2022 à 17:30
je ne suis pas fan du innerHTML et je n'ai jamais utilise document.write. je prefere faire des textContent & dedier des functions pour garde la main sur ce qui se passe

si tu veux, tu peux modifier les lignes _text.textContent = ... par _text.innerHTML= ...
Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.