forked from FWS/TEMPLATE-Web-site-one-page
154 lines
4.1 KiB
Markdown
154 lines
4.1 KiB
Markdown
# 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 `<head>` 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/<route>/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
|
|
<main data-page-content>
|
|
...
|
|
</main>
|
|
```
|
|
|
|
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
|
|
<head>
|
|
<link rel="stylesheet" href="./page.css" />
|
|
<style>
|
|
.hero {
|
|
background: black;
|
|
}
|
|
</style>
|
|
</head>
|
|
```
|
|
|
|
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
|
|
<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 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é. |