diff --git a/Doc/fonctionnement-onepage.md b/Doc/fonctionnement-onepage.md index 9735330..cd1748e 100644 --- a/Doc/fonctionnement-onepage.md +++ b/Doc/fonctionnement-onepage.md @@ -1,91 +1,57 @@ -# Fonctionnement du one page +# Fonctionnement du JavaScript -Ce projet fonctionne comme un site statique avec un seul point d'entrée HTML. Le JavaScript sert uniquement à lire l'URL, choisir la bonne route, charger le bon fichier HTML dans `p/`, puis injecter son contenu dans la zone centrale de la page. +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. -Le principe général est simple: +## Principe général 1. `index.html` garde le header, le footer et le conteneur principal. -2. Chaque section vit dans un dossier sous `p/`. +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/dl/index.html](../p/dl/index.html) contient le contenu de la page DL. - -## Rôle de `index.html` - -`index.html` ne contient pas le contenu de toutes les pages. Il contient seulement: - -- le header commun, -- la navigation, -- le `main` vide, -- le footer commun, -- l'appel au script JavaScript. - -Exemple de lien de navigation: - -```html -DL -``` - -Ce lien fait deux choses: - -- il indique au navigateur une URL propre, -- il donne au script un identifiant de route via `data-route`. +- [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 -Le script commence par récupérer la route dans l'adresse courante. +La fonction `routeFromLocation()` lit la route courante depuis plusieurs formes possibles d'URL. -Il sait reconnaître plusieurs formes: +Exemples reconnus: +- `/?p/index/` - `/?p/dl/` -- `/?p=dl` -- `/p/dl/` +- `/?p=contact` +- `/p/about/` -La fonction `routeFromLocation()` nettoie ensuite la valeur pour obtenir une route simple comme `home` ou `dl`. - -## Normalisation de route - -La fonction `normalizeRoute(value)` sert à standardiser les valeurs. - -Elle transforme par exemple: - -- `HOME` en `home` -- `accueil` en `home` -- `/dl/` en `dl` - -Cette normalisation évite d'avoir plusieurs variantes pour une même page. +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 vrai travail. +La fonction `loadRoute(route)` fait le chargement réel. -### Cas de l'accueil +### Route principale -Quand la route vaut `home`, le script n'a pas besoin de charger un fichier externe. Il injecte directement le bloc HTML de l'accueil dans le `main`. - -### Cas d'une page sous `p/` - -Quand la route vaut autre chose que `home`, le script construit le chemin du fichier: +Pour la route `index`, le script charge: ```text -p//index.html +p/index/index.html ``` -Exemple: +### Autres routes + +Pour une route comme `dl`, le script charge: ```text p/dl/index.html ``` -Puis il appelle `fetch` pour lire ce fichier. - -Le script ne prend pas tout le HTML de la page externe. Il récupère uniquement l'élément portant `data-page-content`: +Le fichier chargé doit contenir un bloc avec `data-page-content`: ```html
@@ -93,32 +59,44 @@ Le script ne prend pas tout le HTML de la page externe. Il récupère uniquement
``` -Ensuite, il insère seulement son contenu intérieur dans le `main` du site principal. +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 dans le `main` +## Injection des styles du head -L'injection se fait avec: +Le routeur copie maintenant aussi les balises suivantes depuis le `head` de la page chargée: -```javascript -main.innerHTML = injected.innerHTML.trim(); +- `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 + + + + ``` -Donc: - -- le header ne bouge pas, -- le footer ne bouge pas, -- seul le contenu central change. +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. -Exemple: +Exemples: -- `home` devient `/` +- `index` devient `/?p/index/` - `dl` devient `/?p/dl/` -Cela permet de partager une URL propre sans recharger complètement la page. +Le navigateur garde donc une URL partageable, sans recharger complètement la page. ## Navigation au clic @@ -129,27 +107,18 @@ 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`. +4. il charge la page correspondante dans le `main`; +5. il applique aussi ses styles de page. -Exemple: +## Retour arrière du navigateur -```html -DL -``` +Le script écoute l'événement `popstate`. -## Bouton retour du navigateur +Cela permet de revenir en arrière ou d'avancer dans l'historique tout en rechargeant la bonne route et les bons styles. -Le script écoute aussi l'événement `popstate`. +## Ajouter une nouvelle page -Cela veut dire que: - -- si tu fais retour arrière, -- ou avance dans l'historique, -- le site recharge automatiquement la bonne route. - -## Structure attendue pour une nouvelle page - -Pour ajouter une page, il suffit de créer un nouveau dossier sous `p/`. +Pour ajouter une page, crée un nouveau dossier sous `p/`. Exemple pour une page contact: @@ -157,17 +126,9 @@ Exemple pour une page contact: p/contact/index.html ``` -Le fichier doit contenir un bloc avec `data-page-content`: +Puis ajoute éventuellement un fichier CSS dans cette page via son `head`. -```html -
-
-

Contact

-
-
-``` - -Puis tu ajoutes un lien dans `index.html`: +Enfin, ajoute un lien dans `index.html`: ```html Contact @@ -184,20 +145,10 @@ Ce projet n'utilise pas: - un framework front, - des fichiers `.html` séparés dans la racine pour chaque page. -Tout repose sur un site statique et un petit routeur en JavaScript. +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é. - -## Résumé rapide - -Le script fait trois choses: - -- il lit la route dans l'URL, -- il charge le bon fichier dans `p/`, -- il injecte le contenu dans le `main`. - -Le reste du site est fixe et partagé par toutes les pages. \ No newline at end of file +Si tu ouvres le fichier en `file://`, le navigateur peut bloquer l'accès aux fichiers internes pour des raisons de sécurité. \ No newline at end of file diff --git a/README.md b/README.md index f44f616..523a52b 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,5 @@ Navigation: - `/?p/index/` charge `p/index/index.html` dans le `main` - `/?p/dl/` charge `p/dl/index.html` dans le `main` - Chaque sous-dossier de `p/` peut devenir une route, par exemple `p/contact/index.html` pour `/?p/contact/` +- Les balises `link rel="stylesheet"` et `style` placées dans le `head` d'une page sont injectées automatiquement - Le header et le footer restent communs à toutes les vues diff --git a/p/assets/main-nav/app.js b/p/assets/main-nav/app.js index fa91129..4ed7a06 100644 --- a/p/assets/main-nav/app.js +++ b/p/assets/main-nav/app.js @@ -1,8 +1,38 @@ (() => { const main = document.getElementById("app-main"); + const pageStyleSelectors = "[data-page-style='true']"; const links = Array.from(document.querySelectorAll("[data-route]")); + function clearInjectedPageStyles() { + document.querySelectorAll(pageStyleSelectors).forEach((node) => node.remove()); + } + + function injectPageStyles(parsedDocument, sourceUrl) { + clearInjectedPageStyles(); + + const head = parsedDocument.head; + if (!head) { + return; + } + + const styleNodes = Array.from(head.querySelectorAll("link[rel='stylesheet'], style")); + + styleNodes.forEach((node) => { + const clonedNode = node.cloneNode(true); + clonedNode.setAttribute("data-page-style", "true"); + + if (clonedNode.tagName === "LINK") { + const href = clonedNode.getAttribute("href"); + if (href) { + clonedNode.href = new URL(href, sourceUrl).toString(); + } + } + + document.head.appendChild(clonedNode); + }); + } + function normalizeRoute(value) { const raw = (value ?? "").toString().trim().toLowerCase(); if (!raw || raw === "/" || raw === "home" || raw === "index" || raw === "accueil") { @@ -86,6 +116,7 @@ const html = await response.text(); const parsed = new DOMParser().parseFromString(html, "text/html"); + injectPageStyles(parsed, response.url); const injected = parsed.querySelector("[data-page-content]") ?? parsed.body; main.innerHTML = injected.innerHTML.trim(); }