Mes modifications

La première modification majeure apportée est la signature de la fonction principale. Celle-ci ne prend plus qu’un seul paramètre, l’élément du DOM ciblé pour l’arc-en-cielisation.

function colorText(target) { ... }

Le texte utilisé est celui contenu dans l’élément du DOM (récupéré via la propriété innerHTML), et pour les couleurs, celles-ci sont renseignées dans un attribut ‘data-colors’ de la cible, et pour les récupérer, on utilise la méthode getAttribute.

var text = target.innerHTML;
var colors = target.getAttribute('data-colors');

Deuxième changement relativement important, j’ai supprimé le tableau de correspondance décimal/hexadécimal et la double boucle pour le remplir. En effet, pas besoin de construire une table de correspondance, pour convertir un entier décimal en hexadécimal on peut utiliser la méthode toString() des objets de type nombre.

La conversion des codes hexadécimaux en composantes décimale a été rapatriée dans la fonction principale et légèrement modifiée : le premier tableau (celui des codes hexadécimaux) est construit en utilisant la méthode split(), et dans la boucle de conversion, plutôt qu’utiliser une structure if, else if (selon que le code hexadécimal commence ou pas par un #), j’utilise une variable d’offset.

var colorsHex = colors.split(' ');
var colorsRgb = new Array(); 

colorsHex.forEach((c) => {
    let color = new Object();

    let offset = 0;

    if(c.charAt(0) == '#'){
        offset = 1;
    }

    color.r = parseInt(c.substring(0+offset,2+offset), 16);
    color.g = parseInt(c.substring(2+offset,4+offset), 16);
    color.b = parseInt(c.substring(4+offset), 16);   

    colorsRgb.push(color);
});

Dans la boucle principale, les changements sont : trois lignes supplémentaires pour la conversion décimal vers hexadécimal, avec ajout d’un zéro si nombre à un chiffre, et l’utilisation de <span> plutôt que la balise <font>, maintenant dépréciée.

for (i=0; i<numchars; ++i) {
    let lci = lowcolorindex(i, numchars, numcolors);
    let hci = hicolorindex(i, numchars, numcolors, lci);

    let rr = Math.round(interpolate( lci/(numcolors-1), colorsRgb[lci].r, hci/(numcolors-1), colorsRgb[hci].r, i/(numchars-1)));
    let gg = Math.round(interpolate( lci/(numcolors-1), colorsRgb[lci].g, hci/(numcolors-1), colorsRgb[hci].g, i/(numchars-1)));
    let bb = Math.round(interpolate( lci/(numcolors-1), colorsRgb[lci].b, hci/(numcolors-1), colorsRgb[hci].b, i/(numchars-1)));

    let r = (rr.toString(16).length == 1?'0':'')+rr.toString(16);
    let g = (gg.toString(16).length == 1?'0':'')+gg.toString(16);
    let b = (bb.toString(16).length == 1?'0':'')+bb.toString(16);

    coloredText += '<span style="color:#'+r+g+b+';">'+text.charAt(i)+'</span>';
}

Les méthodes interpolate(), hicolorindex() et lowcolorindex() sont quant-à elles gardées en l’état.

Conclusion

Comme d’habitude, le résultat final et le code complet sont visibles dans la section démonstration du site.

Mais je n’en ai pas fini avec les textes multicolores ! En effet, il est maintenant possible avec CSS3 de produire un effet similaire. Restez à l’écoute pour en savoir plus !