Discussion :

[Doksuri]

Bonjour,

Je vous propose un nouvel élément à utiliser : 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.

Qu'en pensez-vous ?

[VValbator]

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 ?

[Doksuri]

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 - Visualiser dans une fenêtre à part

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

[VValbator]

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 - Visualiser dans une fenêtre à part

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...

[Doksuri]

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

[cyberdede]

Bonjour

Par quoi remplacer le onsubmit avec Capop après ajout script et css Capop?
Actuellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form  method="post"  id="reservation" name="reservation" action="?" onsubmit="return confirm('Voulez-vous valider ?');"

Merci pour votre réponse

[Doksuri]

bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form  method="post"  id="reservation" name="reservation" action="?">...</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[cyberdede]

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ù?

[Doksuri]

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= ...