// * documentation // ** utilisation /* Ce script modifie le contenu de la page dans lequel il s'exécute pour placer le contenu effectif de cette page dans un gabarit qui ressemble aux pages du site web de la SIF. Pour cela il faut que : 1. le fichier HTML 1. ait son contenu effectif dans un élément HTML dont l'id doit être `sif-content` ; 2. ait dans son contenu effectif un seul titre de niveau `h1` contenant le titre effectif de la page ; 3. ait un lien vers ce script en fin de page (via le code HTML ``) ; 2. le fichier `sif.js` soit appelé en fin de fichier HTML en y intégrant par exemple ``. Dans ce cas le fichier `sif.js` doit être présent dans le même dossier que le fichier HTML utilisé (`index.html`). On peut cependant imaginer y faire référence via un lien ailleurs (localement ou via http) pour pouvoir modifier le gabarit utilisé par toutes les pages en ne modifiant qu'un seul fichier javascript. */ // ** fonctionnement /* Pour fonctionner correctement ce script a besoin que les variables `sifHeadModele` et `sifBodyModele` contiennent le contenu du code HTML du gabarit qui gère la forme de la page (comme les pages du site web de la SIF). Pour faire ça les étapes suivantes ont pour l'instant été suivies : 1. enregistrement d'une page du site sous Firefox avec l'extension [SingleFile](https://addons.mozilla.org/fr/firefox/addon/single-file/) 2. extraction de ce qu'il y a dans l'élément `head` et placement dans la variable `sifHeadModele` 3. extraction de ce qu'il y a dans l'élément `body` puis modification pour 1. identification du titre (élément `h1`) et modification pour y ajouter à l'intérieur une ancre (`a`) qui a comme `id` le nom `sif-titre` ; 2. identification du contenu effectif de la page et remplacement par un simple élement `div` vide qui a comme `id` le nom `sif-contenu` ; 3. placement du résultat dans la variable `sifBodyModele`. */ // * bug /* Le gabarit présent pour l'instant n'est pas opérationnel dans tous les cas. Quand on change la résolution pour tester le rendu sur un téléphone le menu principal reste accessible mais pas comme sur le site web : le menu n'est pas transformé en menu hamburger. C'est juste un problème de copie du gabarit qui doit pouvoir se corriger avec un peu d'attention et donc de temps. */ // * helpers (create) ################################################ function create(htmlStr) { var frag = document.createDocumentFragment(), temp = document.createElement('div'); temp.innerHTML = htmlStr; while (temp.firstChild) { frag.appendChild(temp.firstChild); } return frag; } // * contenu du fichier (sifContenuFichier) ########################## var sifContenuFichier = document.getElementById("sif-content"); // * titre du fichier (sifTitreFichier) ############################## var sifTitreFichier = sifContenuFichier.querySelector("h1"); /* getElementById("sif-title"); */ // * entêtes ajoutées (sifHeadModele) ################################ var sifHeadModele; sifHeadModele = create(` Le bulletin 1024 - Société Informatique de France `); // * contenu du modèle (sifBodyModele) ############################### sifBodyModele = create(`

Le titre

Le contenu est là (SingleFile)

Aliquam erat volutpat.  Nunc eleifend leo vitae magna.  In id erat non orci commodo lobortis.  Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus.  Sed diam.  Praesent fermentum tempor tellus.  Nullam tempus.  Mauris ac felis vel velit tristique imperdiet.  Donec at pede.  Etiam vel neque nec dui dignissim bibendum.  Vivamus id enim.  Phasellus neque orci, porta a, aliquet quis, semper a, massa.  Phasellus purus.  Pellentesque tristique imperdiet tortor.  Nam euismod tellus id erat.

`); // * Modification du document ####################################### // ** modification des entetes (head) document.head.insertBefore(sifHeadModele, null); // ** placement du contenu modèle (body) sifContenuFichier.remove(); document.body.insertBefore(sifBodyModele, null); // ** placement du contenu initial document.getElementById("sif-contenu").innerHTML = ""; document.getElementById("sif-contenu").appendChild(sifContenuFichier); // ** modification du contenu for (e of document.body.querySelectorAll("h2")) { for (c of ["wp-block-heading", "has-xxl-font-size"]) { e.classList.add(c); } } // ** modification du titre document.title = sifTitreFichier.innerText; document.querySelector("#sif-titre").innerHTML = sifTitreFichier.innerHTML; sifTitreFichier.remove(); // * COMMENT Paramètrage emacs // Local Variables: // eval: (outshine-mode) // End: