Voilà, ça fait un moment déjà que je voulais parler un peu de Javascript, alors je vais me servir pour ça d’un projet mort-né, mon site pro…
Mais quel site pro ? Bah justement, j’en ai pas. Mais c’était prévu. Puis finalement non. Donc on va voir quelques bouts de code, comme ça j’aurais un peu l’impression que ces dizaines d’heures de boulot passées dessus auront servi à quelque chose.
DC COMM, comme décédé…
Après avoir fait quelques petits Worpress ça et là en tant qu’auto-entrepreneur, je me suis dit qu’en attendant la fin du confinement et le début de ma formation, j’allais faire comme tout le monde : un site pro.
Bon, finalement je l’ai pas mis en ligne. Il n’aurait pas servi à grand chose étant donné l’arrivée de l’été et ma formation de dev juste après. Je précise qu’il ce serait appelé DC-COMM, ça servira plus loin.
DC, c’est mes initiales. Mauvais présage ? Non. Je suis pas superstitieux, ça porte malheur…
Le site était un WordPress. Le truc, c’est que je voulais faire un quelque chose qui change un peu des standards habituels, sans pour autant utiliser un thème de compèt, un peu trop lourd à mon sens. J’ai donc décidé d’utiliser le thème par défaut, Twenty twenty en 2020. J’ai même gardé l’éditeur Gutenberg pour voir un peu comment ça marchait. C’est tout. Pas de visual machin ou autre plugin du genre. Et donc il fallait pouvoir le personnaliser entièrement en CSS et Javascript (et un peu de Php, aussi).
La stratégie habituelle, donc, sauf que cette fois j’aurais à gérer aussi les animations et autres fonctionnalités cools en JS. Et à part quelques exos d’animations CSS y’a longtemps, ça c’était une première.
Ah, dernière chose aussi, je voulais pas forcément que ça soit trop sérieux. J’ai voulu faire un truc sympa, qui me plaise à moi avant tout. Je courais pas non plus après les clients, donc autant se faire plaisir. Bon après, je suis pas un monstre de graphisme et je voulais me concentrer sur le code, donc je me suis vite retrouvé avec des fonds un peu chelous… Oui oui, j’essaie de me justifier par rapport au visuel un peu cheap que j’ai mis plus bas.
Des fonctions partout
Commençons par un petit truc sympa : le fil d’Ariane.
Je voulais qu’il soit à la verticale, je l’ai donc modifié avec du CSS. Mais du coup, je me suis retrouvé avec des petits problème pour l’ajuster sur le bord de la page, bien aligné avec le header quand on redimensionne la fenêtre. C’est là que j’ai découvert une méthode JS géniale : window.getComputedStyle().
Je crée une fonction margeFilDArianne() (après avoir vérifié que le fil d’Ariane existait, sinon on bosse sur une variable inexistante, et ça fait du pas très joli dans la console du navigateur…) dans laquelle je gère différents paramètres, en fonction de la taille de la fenêtre. Pourquoi ? Parce que je suis un peu maso, et en version mobile je veux que mon fil d’Ariane se barre en haut à droite et plus en bas à gauche. Et dans l’autre sens, tant qu’à faire.
Bon y’a aussi pas mal de CSS, mais je vais pas rentrer dans les détails, c’est pas un tuto.
Ce qu’il faut retenir, c’est que getComputedStyle() récupère des valeurs CSS que l’on peut réutiliser. Comme je veux que ça s’aligne sur le header, je récupère sa margin-left (margin-right pour les mobiles), et je l’applique au fil.
En version mobile, je veux qu’il aille en haut, donc il me faut aussi la hauteur du conteneur du header. Et c’est tout. Ou presque.
Parce qu’elle est bien sympa ma fonction, mais quand est-ce que je l’appelle ?
Bah avec une autre fonction, tiens ! J’ai pas mis un gros h2 pour rien…
Ma petite fonction, habilement nommée fonctionsADeclencher(), n’est là que pour déclencher d’autres fonctions. Elle s’occupe aussi d’un autre cas, le header.
Bref, j’appelle la fonction (qui donc déclenche les autres), ligne 230, pour qu’elle s’exécute une première fois. Ensuite, ligne 231, je la rappelle à chaque changement de taille de la fenêtre, avec window.onresize. Ça permet de réajuster en permanence. J’ai d’ailleurs utilisé un processus similaire pour le h1 et son sous-titre.
Plutôt simple, non ? Par contre, si j’ai bien compris, il vaut mieux utiliser la méthode getComputedStyle() avec parcimonie. Apparemment c’est un peu lourd. Autant se contenter du CSS quand c’est possible. Mais là je voulais m’amuser un peu.
Un titre H3 sans imagination parce qu’on va encore causer fonctions et javascript
J’avais envie de faire un truc un peu cool et pas très recommandé, mais là encore, c’était pour tester. Une transition en mode fondu enchaîné entre chaque page. Un truc vraiment pas ouf pour le référencement, je pense… Comme j’ai pas trouvé comment faire sur le web, j’ai fait ça à ma façon. C’est un peu bourrin, et y’a sûrement d’autres façons de faire, mais bon, le but était de s’amuser.
À noter que les pages du site se chargeaient rapidement, donc ça posait pas vraiment problème. Par contre sur un WordPress avec un gros thème et gavé de plugins, ça aurait été une autre histoire…
Déjà, j’ai une div que j’ai rajouté dans le Php. Elle servira d’overlay. On lui met une id (ici « overlay-floutage ») pour pouvoir gérer son état en CSS. État qui changera en fonction de l’ajout ou non d’une classe, « changement-page » (ligne 182). L’ajout ou le retrait de classes avec JS dans la balise html d’un élément permet de déclencher des animations en CSS (si celles-ci sont gérées dans le style, évidemment. C’est pas magique, non plus).
Donc, pour faire simple, la fonction ci-dessus récupère tous les liens de la page. Ensuite, pour chaque lien, elle récupère la valeur de l’attribut href et vérifie s’il s’agit bien d’un lien vers une autre page du site. Donc les liens vers une ancre de la même page ou vers d’autres sites ne sont pas pris en compte.
Ensuite, pour les liens qui correspondent, elle fait d’abord en sorte que le comportement par défaut au clic (aller vers une autre page) soit enlevé, avec la méthode preventDefault(). Par contre, elle ajoute un event listener, qui se déclenchera au clic. Ça permet tout simplement de personnaliser le comportement d’un élément pour un évènement donné (ici ‘click‘, ligne 181). Ce dernier, lorsqu’il est déclenché, rajoute la classe « changement-page » à l’overlay et lance une fonction setTimeout (qui permet ici de temporiser, en gros). Pour faire simple, c’est cette dernière qui se chargera de renvoyer vers la page demandée en finissant par simuler un clic.
Mouais… Un peu crade, avec le recul. Mais bon, c’était marrant.
À noter que j’ai aussi rajouté un cookie à durée courte, pour que l’overlay n’existe pas la première fois qu’on vient sur le site. Si pas d’overlay, la fonction ne s’exécute pas (ligne 168). Comme ça la première fois on a un chargement nickel.
Concluons
J’ai aussi fait des fonctions plus classiques, pour gérer des animations en CSS dans les pages. Des blocs qui bougent, des fondus, etc… Dans la plupart des cas, ça repose sur des classes CSS ajoutées dans les blocs Gutenberg du WordPress, que l’on modifie parfois en JS en fonction des besoins. J’ai aussi géré la barre nav qui reste en haut de la fenêtre au scroll tout en se réduisant, un peu comme dans Divi.
Mais après je vais pas non plus montrer tout le code, j’en ai marre d’écrire. Pis y’a un aperçu de tout ça dans la vidéo, juste en-dessous.
L’essentiel, au cas où je l’aurais pas assez dit, c’est que je me suis bien amusé !
Voilà. Des bisous, et merci d’avoir lu.