Réécrire ma fonction textshadow avec une méthode plus conventionnelle

**patricktoulon** · 26/02/2017, 12h32

Bonjour a tous
dans l'optique de faire des fonctions durable avec le moins de bug possible je repasse des fonctions qui fonctionne mais qui sont digne de l'homme de cromanion
pour commencer on va reprendre la fonction shadowcolor qui est sensée mettre une ombre flou au texte sélectionné ou l'enlever
de plus je voudrais bien remplacer les balises font qui n'ont plus d'attributs par leur innerhtml car en tant qu'enfant elle hérite de toute façon du parent donc je ne vois pas l’intérêt de garder un code dur genre "<font>truc</font><font>machin</font>"

de plus je voudrais que si MOD=false ca n’insère pas une balise mais le innerhtml résultant du nettoyage

ps:::: attention les balise peuvent avoir d'autre propriété de style comme color backcolor etc..... et ca on le garde et donc la balise aussi
des idées????

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
  function selectionne_text() {
            return window.getSelection().getRangeAt(0);
        }
 
function shadowcolor(coul, MOD) {     if (selectionne_text()) {
 
 
         var selection = selectionne_text();
         var selectedText = selection.extractContents();
         var balisefont = document.createElement("FONT");
         balisefont.appendChild(selectedText);
         var colhtml = balisefont.getElementsByTagName("FONT");
         if (colhtml.length > 0) {
             for (var i = 0; i < colhtml.length; i++) {
                 if (colhtml[i].className = "shado") {
                     colhtml[i].style.textShadow = "none";
                     colhtml[i].className = "";
                 }
 
 
 
 
             }
         }
         var str = balisefont.innerHTML;
         for (var e = 0; e < 10; e++) {
             str = str.replace(" style=\"text-shadow: none;\"", "");
             str = str.replace("text-shadow: none;", "");
             str = str.replace("style=\"\"", "");
             str = str.replace("</font><font>", "")
         }
         balisefont.innerHTML = str
         if (MOD == true) {
             balisefont.style.textShadow = "0px 0px 10px " + coul;
         }
         selection.insertNode(balisefont);
     } // FIN DE   IF selectionne_text
 } //fin de fonction shado

**Watilin** · 26/02/2017, 14h07

Je viens de faire quelques tests avec IE11, la seule version que j’ai sous la main, et il semble qu’on ait un comportement assez prévisible quand on supprime un style sur un élément. Voici les tests que j’ai faits (dans une page contenant seulement <body></body>) :

Code console :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
b = document.body
// <body></body>
b.style
// [object MSStyleCSSProperties]{accelerator: "false", alignContent: "", alignItems: "", ... }
b.getAttribute('style')
// null
b.style.textShadow = '0 0 red'
// "0 0 red"
b.getAttribute('style')
// "text-shadow: 0px 0px red;"
b.style.textShadow = ''
// ""
b.getAttribute('style')
// null

Ce qui est intéressant ici, c’est que l’attribut calculé style repasse à null quand il n’y a plus de styles sur l’élément. Ça sera utile pour déterminer les éléments à supprimer lors du nettoyage.

Il faudrait que tu vérifies si ça se comporte de la même façon dans ton HTA.

**patricktoulon** · 26/02/2017, 15h21

re
oui watilin je suis dessus depuis tout a l'heure

j'ai bien simplifié mais j'arrive a un moment ou quand je fait un alert sur le innerhtml de la balises créée on se rends compte que tout seul le dom a attribué un color et size a tout les enfants pour le netoyage c'est cotton surtout que dans la collection de subfont il peut y en avoir des differents
c'est ca mon probleme
c'est pour ca que j'avais choisi l'option de travailler en string

au depart j'ai par exemple

Code :

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

<font color=red style="text-shadow:0,0,10px red;> e<font color= blue>xem</font>ple de texte </font>

et donc je sélectionne "exemple de texte"
quand je appendchild la sélection a la nouvelle balise avant de la styler et de l'inserrer
je me retrouve avec chaque lettre de la font blue dans un subsubfont avec attribut size et color
une horreur a nettoyer
pour simplifier j'ai penser a biaiser avec execcomand backcolor avec une couleur que je n'utilise pas la commande fait ses balises tout seul et ensuite prendre la balise qui a ce backcolor et lui attribuer le textshadow et supprimer le backcolor
mais walouh !!! avec execommand il ne nettoie pas le code j'ai vérifié
après visuellement mes trois méthode donne le bon résultat c'est juste une manie de puriste
exemple avec quoi je me retrouve alors qu'au depart j'e n'ai qu'un seul font de different dans le lot
Nom : Capture.JPG
Affichages : 137
Taille : 61,2 Ko

Nom : Capture.JPG
Affichages : 137
Taille : 61,2 Ko

je continue ma recherche de solution propre

**patricktoulon** · 26/02/2017, 16h07

re
ca y est j'ai compris

si je fait
subfont.style.textTshadow="" //donc manipulation en dom
il me petarde de susubsubsub chaque lettre de chaque élément qui aurait un attribut ou style différent

tantdis que si je fait
subfont.style.textShadow="none" // je ne vire pas le style mais je le change et la il me petarde pas de subsubsubfont

et avec ma méthode replace je replace tous les text-shadow:none par rien dans le code

je me souviens pourquoi j'avais choisi cette option plutôt que le dom maintenant

**patricktoulon** · 26/02/2017, 21h24

alors la je n 'y comprends rien

j'ai tout essayer sauf le marteau sur le PC ya pas moyen de faire le replace
j'ai bloquer tout le reste de la fonction pour qu'elle s'arrete au message

dans ce message je devrait avoir les font"shado" remplacer par leur innerhtml dans la variable str ca le fait pas je ne sais pas pour quoi
le code html est celui ci

Code :

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

1
2
3
 <p align="center">
 
        <font size="7"><font  class="shado"style="text-shadow: 0px 0px 10px #ff0000;">EXEMPLE</font> <font  class="shado"style="text-shadow: 0px 0px 10px #00ffff;">DE</font> <font class="shado" style="text-shadow: 0px 0px 10px #00ff00;">TEXTE</font></font> </p><p align="center"><br></p><p align="center"><br></p><p align="center">FYTRTRTRTRTRTRTRTRTRTRTRTRT</p>

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
22
23
24
25
26
27
28
29
 function shadowcolor(coul, MOD) {
            if (selectionne_text()) {
 
 
                var selection = selectionne_text();
                var selectedText = selection.extractContents();
                var balisefont = document.createElement("FONT");balisefont.className="shado";
                balisefont.appendChild(selectedText);
               var str=balisefont.innerHTML;
 var colhtml = balisefont.getElementsByTagName("FONT");
                if (colhtml.length > 0) {
                    for (var i = 0; i < colhtml.length; i++) {
                                if (colhtml[i].className = "shado") {
                                   colhtml[i].style.textShadow = "";
 
                                    if( colhtml[i].getAttribute("style")==""){str=str.replace(colhtml[i].outerHTML,colhtml[i].innerHTML);}
                                }
                     }
                 }
           balisefont.innerHTML=str;
alert ("etape suppression des attribut et style passé :" +balisefont.innerHTML);    
 
 // if (MOD == true) {  balisefont.style.textShadow = "0px 0px 10px " + coul;  }
              //selection.insertNode(balisefont);
// if (balisefont.parentElement.style.textShadow !="undefined" && MOD==false && balisefont.parentElement.tagName!="P"){balisefont.style.textShadow =  "none";}      
 
//alert(balisefont.parentElement.outerHTML);
 } // FIN DE   IF selectionne_text
        } //fin de fonction shado

plus j'essaie de faire bien moins ca marche

**patricktoulon** · 27/02/2017, 01h10

re
bon j'ai reussi a faire mon netoyage mais en innerhtml en dom j'ai un soucis
quand je le fait en dom avec replaceChildn au bout de 2 ou 3 fois que la selection de texte croise 2 couleur ou plus le innerhtml devient le innerText

le resultat est bon quand on bloque les deux ligne 21 et 23 en DOM dans la première boucle et que l'on débloque la ligne 31

voila la fonction

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
  function shadowcolor(coul, MOD) {    if (selectionne_text()) {
 
 
        var selection = selectionne_text();
 
 
        var selectedText = selection.extractContents();
 
 
        var balisefont = document.createElement("FONT");
        balisefont.appendChild(selectedText);
        var str = balisefont.innerHTML;
        var colhtml = balisefont.getElementsByTagName("FONT");
        if (colhtml.length > 0) {
            for (var i = 0; i < colhtml.length; i++) {
                if (colhtml[i].className = "shado") {
                    //colhtml[i].style.textShadow = "";
                    if (colhtml[i].style.backgroundColor == "") {
                        str = str.replace(colhtml[i].outerHTML, colhtml[i].innerHTML);
                       var  textnode=document.createTextNode(colhtml[i].innerHTML);
 
                        colhtml[i].parentElement.replaceChild(textnode, colhtml[i]);
 
 
                     }
                }
            }
        }
alert(balisefont.outerHTML);        
//balisefont.innerHTML = str;
 
 
        if (MOD == true) {
            balisefont.className = "shado";
            balisefont.style.textShadow = "0px 0px 10px " + coul;
        }
        var colhtml = balisefont.getElementsByTagName("FONT");
 
 
        for (var i = 0; i < colhtml.length; i++) {
            if (colhtml[i].innerHTML == "") {
               // balisefont.innerHTML = balisefont.innerHTML.replace(colhtml[i].outerHTML, "");
            balisefont.parentElement.removeChild(colhtml[i]);
 
             }
        }
 
 
 
 
        selection.insertNode(balisefont);
        if (balisefont.parentElement.className=="shado" && MOD == false && balisefont.parentElement.tagName != "P") {
            balisefont.className = "shado";
            balisefont.style.textShadow = "none";
        }
 
 
        //alert(balisefont.outerHTML);
    } // FIN DE   IF selectionne_text
} //fin de fonction shado

apercu du deraillage
Nom : Capture.JPG
Affichages : 130
Taille : 116,3 Ko

Réécrire ma fonction textshadow avec une méthode plus conventionnelle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager