Télécharger

Téléchargé 8 fois

Vote des utilisateurs

Voir les 8 commentaires

Détails

Tiger Scott

Expert confirmé

4691 points

Voir tous les téléchargements de l'auteur

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

Trucs et astuces

Navigation

Retourner à la liste des ressources Retourner à l'accueil des téléchargements Ajouter un LOGICIELAjouter un FRAMEWORKAjouter un CODE SOURCE

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

Signaler un problème

VValbator

Candidat au Club

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 ?

Doksuri

Expert confirmé

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

VValbator

Candidat au Club

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

Doksuri

Expert confirmé

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

cyberdede

Futur Membre du Club

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

Doksuri

Expert confirmé

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 ?

cyberdede

Futur Membre du Club

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

Doksuri

Expert confirmé

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

Poster un commentaire

Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.