distorsion/distorsion.interhacker.space
9
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Génère la liste des options du styleswitcher dynamiquement

Browse source
This commit is contained in:
distorsion 2025-01-24 23:27:17 +01:00
parent eb449ccdbb
commit 46b99e0f17
5 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
site/blog.html
View file

@ -18,11 +18,7 @@
<li><a href="/blog.html">blog</a></li>
<li>
<label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher">
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<select id="styleswitcher"></select>
<script>initStyleSelectElement()</script>
</li>
</ul>

6
site/blog/article-template.html
View file

@ -18,11 +18,7 @@
<li><a href="/blog.html">blog</a></li>
<li>
<label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher">
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<select id="styleswitcher"></select>
<script>initStyleSelectElement()</script>
</li>
</ul>

6
site/index.html
View file

@ -18,11 +18,7 @@
<li><a href="/blog.html">blog</a></li>
<li>
<label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher">
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<select id="styleswitcher"></select>
<script>initStyleSelectElement()</script>
</li>
</ul>

15
site/js/styleswitcher.js
View file

@ -1,3 +1,7 @@
/*
* On enregistre ici la liste des feuilles de style disponibles.
* Il doit toujours y avoir une feuille "Default".
*/
const styles = { "Default" : "/css/default.css",
"No-CSS" : "/css/no-css.css",
"Darkmagenta" : "/css/darkmagenta.css",
@ -27,6 +31,17 @@ function initStyle () {
function initStyleSelectElement () {
const styleSelectElement = document.getElementById("styleswitcher");
/* On génère ici la liste des options du <select> dynamiquement. Ca permet
* de n'avoir à éditer que le script JavaScript pour ajouter de nouveaux
* style, plutôt que toutes les pages HTML. */
for (const styleName in styles) {
styleOption = document.createElement("option");
styleOption.value = styleName;
styleOption.textContent = styleName;
styleSelectElement.add(styleOption);
}
styleSelectElement.value = sessionStorage.getItem("currentStyle");
styleSelectElement.addEventListener("change", (event) => {setStyle(event.target.value)});

6
site/presentation.html
View file

@ -18,11 +18,7 @@
<li><a href="/blog.html">blog</a></li>
<li>
<label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher">
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<select id="styleswitcher"></select>
<script>initStyleSelectElement()</script>
</li>
</ul>