203 lines
4.8 KiB
Markdown
203 lines
4.8 KiB
Markdown
# Fonctionnement du one page
|
|
|
|
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.
|
|
|
|
Le principe général est simple:
|
|
|
|
1. `index.html` garde le header, le footer et le conteneur principal.
|
|
2. Chaque section vit dans un dossier sous `p/`.
|
|
3. Le script lit la route demandée dans l'URL.
|
|
4. Le script charge `p/<route>/index.html` avec `fetch`.
|
|
5. Le contenu de la page est injecté dans le `main`.
|
|
|
|
## 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
|
|
<a href="/?p/dl/" data-route="dl">DL</a>
|
|
```
|
|
|
|
Ce lien fait deux choses:
|
|
|
|
- il indique au navigateur une URL propre,
|
|
- il donne au script un identifiant de route via `data-route`.
|
|
|
|
## Comment le script lit l'URL
|
|
|
|
Le script commence par récupérer la route dans l'adresse courante.
|
|
|
|
Il sait reconnaître plusieurs formes:
|
|
|
|
- `/?p/dl/`
|
|
- `/?p=dl`
|
|
- `/p/dl/`
|
|
|
|
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.
|
|
|
|
## Chargement du contenu
|
|
|
|
La fonction `loadRoute(route)` fait le vrai travail.
|
|
|
|
### Cas de l'accueil
|
|
|
|
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:
|
|
|
|
```text
|
|
p/<route>/index.html
|
|
```
|
|
|
|
Exemple:
|
|
|
|
```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`:
|
|
|
|
```html
|
|
<main data-page-content>
|
|
...
|
|
</main>
|
|
```
|
|
|
|
Ensuite, il insère seulement son contenu intérieur dans le `main` du site principal.
|
|
|
|
## Injection dans le `main`
|
|
|
|
L'injection se fait avec:
|
|
|
|
```javascript
|
|
main.innerHTML = injected.innerHTML.trim();
|
|
```
|
|
|
|
Donc:
|
|
|
|
- le header ne bouge pas,
|
|
- le footer ne bouge pas,
|
|
- seul le contenu central change.
|
|
|
|
## Mise à jour de l'URL
|
|
|
|
Après le chargement, le script met à jour l'URL avec l'API History.
|
|
|
|
Exemple:
|
|
|
|
- `home` devient `/`
|
|
- `dl` devient `/?p/dl/`
|
|
|
|
Cela permet de partager une URL propre 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`.
|
|
|
|
Exemple:
|
|
|
|
```html
|
|
<a href="/?p/dl/" data-route="dl">DL</a>
|
|
```
|
|
|
|
## Bouton retour du navigateur
|
|
|
|
Le script écoute aussi l'événement `popstate`.
|
|
|
|
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/`.
|
|
|
|
Exemple pour une page contact:
|
|
|
|
```text
|
|
p/contact/index.html
|
|
```
|
|
|
|
Le fichier doit contenir un bloc avec `data-page-content`:
|
|
|
|
```html
|
|
<main data-page-content>
|
|
<section class="hero">
|
|
<h1>Contact</h1>
|
|
</section>
|
|
</main>
|
|
```
|
|
|
|
Puis tu ajoutes un lien dans `index.html`:
|
|
|
|
```html
|
|
<a href="/?p/contact/" data-route="contact">Contact</a>
|
|
```
|
|
|
|
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 petit routeur en JavaScript.
|
|
|
|
## 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. |