IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Téléchargez Discussion :

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


Sujet :

Téléchargez

  1. #1
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 147
    Points : 3 845
    Points
    3 845
    Par défaut CAPop : Remplacement des alert(), confirm() et prompt()
    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 ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  2. #2
    Candidat au Club Avatar de VValbator
    Homme Profil pro
    Coordinateur Technique
    Inscrit en
    septembre 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Coordinateur Technique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : septembre 2020
    Messages : 2
    Points : 2
    Points
    2
    Par défaut La solution presque parfaite :)
    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 ?

  3. #3
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 147
    Points : 3 845
    Points
    3 845
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Candidat au Club Avatar de VValbator
    Homme Profil pro
    Coordinateur Technique
    Inscrit en
    septembre 2020
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Coordinateur Technique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : septembre 2020
    Messages : 2
    Points : 2
    Points
    2
    Par défaut
    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...

  5. #5
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 147
    Points : 3 845
    Points
    3 845
    Par défaut
    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
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

Discussions similaires

  1. Focus par défaut des alert() , confirm() et prompt()
    Par NoT dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 20/03/2006, 12h30
  2. Réponses: 17
    Dernier message: 12/04/2005, 16h28
  3. [MASM] Définir "ordre de remplacement" des macros
    Par Crisanar dans le forum x86 32-bits / 64-bits
    Réponses: 2
    Dernier message: 24/11/2004, 17h35
  4. remplacer des espaces dans un champ par des zero
    Par yeep dans le forum Access
    Réponses: 4
    Dernier message: 08/10/2004, 10h41
  5. Fonction permettant de remplacer des caractères
    Par PrinceMaster77 dans le forum ASP
    Réponses: 3
    Dernier message: 06/09/2004, 16h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo