Une même palette couleur pour plusieurs actions différentes

Version imprimable

1 pièce(s) jointe(s)

bonjour a tous

j'avance dans la construction dynamique de mon wysiwyg
je rencontre un soucis sans doute mineur

je n'avais au depart que les option fontcolor ou font.backcolor par execcommand
mais maintenant j'ai

5 boutons qui ouvre la palette

forecolor
backcolor
backcolordiv
bordercolordiv
bordercolorimage

ces 5 boutons change la valeur d'une variable globale "modepal"et leur donne la valeur de leur nom
et appelle la fonction d'affichage de la palette

dans cette fonction en bouclant sur tout les boutons couleur de la palette je voudrais leur attribuer une fonction en fonction de modepal

1° si c'est "foreColor" ou "backColor" alors la fonction sera :
execCom(modepal, "false", "#" + this.id.substring(4));

2° si c'est "backcolordiv" ce sera
function(){actifelem.style.backcolor="#" + this.id.substring(4);}

3° si c'est "bordercolordiv"alors ce sera :
function(){actifelem.style.border="1px solid " +this.id.substring(4);}

4° si c'est "bordercolorimage" ce sera :
function(){activeimage.style.border="1px solid " +this.id.substring(4);}

j'avoue n'avoir aucune idée du comment faire un multi if/else en JS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function evenementpalette(mode) { var btcs = palet.getElementByTagName("BUTTON"); for (vari = 0; i < btcs.length; i++) { if (modepal === "foreColor" || modepal === "backColor") { btcs[i].addEventListener("click", function() { execCom(modepal, "false", "#" + this.id.substring(4)); }); } else { if (modepal === "backdivcolor") { btcs[i].addEventListener("click", function() { actifelem.style.backgroundColor = "#" + this.id.substring(4); }); } } }
actifelem et active image étant des variables globales représentant un div ou une image

d'autre part quand je me sert de JSHint.com pour vérifier les erreurs
il me dit de ne pas faire de fonction dans une boucle dans les commentaire de droite sur la capture ci dessous

Pièce jointe 354217
des idées?

24/02/2018, 12h33
psychadelic

JSHint reste sommaire, et tes erreurs sont en warning.

pour lui addEventListener est une fonction "à action différée" comme une autre et c'est pour cette raison qu'il ne l'aime pas.
C'est son boulot de relever tout ce qui peut éventuellement clocher dans le code, mais après c'est à toi de vérifier complètement.

Sortir du code avec zéro warning n'est pas le but de cet outil.

bon je me suis rabattu sur un evenement globale de la palette (1 seul evenement)

et j'utilise event target pour le bouton et modepal pour le choix
voila comment je créé la palette a l'ouverture du fichier et lui attribut directement le click

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createpalette() {
    var pal = document.createElement("DIV");
    pal.id = "palette";
    pal.style.visibility = "hidden";
    document.body.appendChild(pal);
    palet = pal;
    for (var c = 0; c < coul.length; c++) {
        var btc = document.createElement("BUTTON");
        btc.className = "Bcolor";
        btc.style.backgroundColor = "#" + coul[c];
        btc.id = "btc_" + coul[c];
        palet.appendChild(btc);
        palet.addEventListener("click", evenementpal, false);
    }
}

et l'evenement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function evenementpal(event) {
    //alert(event.target.outerHTML);
    if (modepal === "foreColor") {
        execCom('foreColor', false, event.target.style.backgroundColor);
    }
    if (modepal === "backColor") {
        execCom('backColor', false, event.target.style.backgroundColor);
    }
    if (modepal === "backdivcolor") {
        actifelem.style.backgroundColor = event.target.style.backgroundColor;
    }
    if (modepal === "bordurediv") {
        actifelem.style.border.Color = event.target.style.backgroundColor;
    }
}

c'est plus simple en effet :oops::pastaper:

24/02/2018, 12h39
psychadelic

Citation:

Envoyé par patricktoulon

bon je me suis rabattu sur un evenement globale de la palette (1 seul événement);

Ca c'est mieux codé, ;)
24/02/2018, 12h41
patricktoulon

re

Bonjour psychadelic
oui
j'avais plus moins compris ca en constatant que meme les noms de fonction etait pour lui des variables indefinie :mouarf:

il y a un autre outils pour verifier et eventuellement corriger les erreurs par ce que c'est vraiment pratique ce truc
entre ca et JSbeautifier mes scripts sont propres et plus clair avec l'indentation pour moi qui me plante toujour a oublier un"{/}/(/)" c'est top !!