# Fonctionnement du JavaScript Ce projet fonctionne comme un site statique avec un seul point d'entrée HTML. Le JavaScript sert à lire l'URL, charger le bon fichier dans `p/`, injecter son contenu dans le `main`, et reprendre aussi les styles définis dans le `` de la page chargée. ## Principe général 1. `index.html` garde le header, le footer et le conteneur principal. 2. Chaque page vit dans un dossier sous `p/`. 3. Le script lit la route demandée dans l'URL. 4. Le script charge `p//index.html` avec `fetch`. 5. Le contenu de la page est injecté dans le `main`. 6. Les styles déclarés dans le `head` de cette page sont copiés dans le `head` du document courant. ## Fichiers impliqués - [index.html](../index.html) contient le chrome global du site. - [p/assets/main-nav/app.js](../p/assets/main-nav/app.js) contient le routeur JavaScript. - [p/index/index.html](../p/index/index.html) contient la page principale. - [p/dl/index.html](../p/dl/index.html) contient la page DL. ## Comment le script lit l'URL La fonction `routeFromLocation()` lit la route courante depuis plusieurs formes possibles d'URL. Exemples reconnus: - `/?p/index/` - `/?p/dl/` - `/?p=contact` - `/p/about/` La fonction `normalizeRoute(value)` nettoie ensuite la valeur pour obtenir une route simple comme `index`, `dl` ou `contact`. ## Chargement du contenu La fonction `loadRoute(route)` fait le chargement réel. ### Route principale Pour la route `index`, le script charge: ```text p/index/index.html ``` ### Autres routes Pour une route comme `dl`, le script charge: ```text p/dl/index.html ``` Le fichier chargé doit contenir un bloc avec `data-page-content`: ```html
...
``` Le script n'injecte pas tout le document dans la page courante. Il prend seulement le contenu à l'intérieur de cet élément. ## Injection des styles du head Le routeur copie maintenant aussi les balises suivantes depuis le `head` de la page chargée: - `link rel="stylesheet"` - `style` Ces balises sont clonées dans le `head` du document principal avec un attribut de suivi `data-page-style`. Avant d'ajouter les nouveaux styles, le script supprime les styles injectés par la route précédente pour éviter les doublons et les conflits. Exemple dans une page custom: ```html ``` Si cette page est chargée, le CSS est repris automatiquement. ## Mise à jour de l'URL Après le chargement, le script met à jour l'URL avec l'API History. Exemples: - `index` devient `/?p/index/` - `dl` devient `/?p/dl/` Le navigateur garde donc une URL partageable, sans recharger complètement la page. ## Navigation au clic Le script écoute les clics sur les liens qui possèdent `data-route`. Quand tu cliques sur un lien: 1. il bloque la navigation normale avec `event.preventDefault()`; 2. il lit `data-route`; 3. il appelle `render(route)`; 4. il charge la page correspondante dans le `main`; 5. il applique aussi ses styles de page. ## Retour arrière du navigateur Le script écoute l'événement `popstate`. Cela permet de revenir en arrière ou d'avancer dans l'historique tout en rechargeant la bonne route et les bons styles. ## Ajouter une nouvelle page Pour ajouter une page, crée un nouveau dossier sous `p/`. Exemple pour une page contact: ```text p/contact/index.html ``` Puis ajoute éventuellement un fichier CSS dans cette page via son `head`. Enfin, ajoute un lien dans `index.html`: ```html Contact ``` Le JavaScript n'a pas besoin d'être modifié tant que la structure reste la même. ## Ce que ce système n'utilise pas Ce projet n'utilise pas: - Node.js, - un bundler, - un framework front, - des fichiers `.html` séparés dans la racine pour chaque page. Tout repose sur un site statique et un routeur JavaScript léger. ## Point important Le chargement via `fetch` fonctionne mieux quand le site est servi par un serveur statique, comme Five Server. Si tu ouvres le fichier en `file://`, le navigateur peut bloquer l'accès aux fichiers internes pour des raisons de sécurité.