From 46b99e0f17f849d5bf6e92972ad184631359cfe7 Mon Sep 17 00:00:00 2001
From: distorsion <distorsion@systemli.org>
Date: Fri, 24 Jan 2025 23:27:17 +0100
Subject: [PATCH] =?UTF-8?q?G=C3=A9n=C3=A8re=20la=20liste=20des=20options?=
 =?UTF-8?q?=20du=20styleswitcher=20dynamiquement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/blog.html                  |  6 +-----
 site/blog/article-template.html |  6 +-----
 site/index.html                 |  6 +-----
 site/js/styleswitcher.js        | 15 +++++++++++++++
 site/presentation.html          |  6 +-----
 5 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/site/blog.html b/site/blog.html
index 726bf83..05f6973 100644
--- a/site/blog.html
+++ b/site/blog.html
@@ -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>
diff --git a/site/blog/article-template.html b/site/blog/article-template.html
index e1d41f6..e72ef9a 100644
--- a/site/blog/article-template.html
+++ b/site/blog/article-template.html
@@ -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>
diff --git a/site/index.html b/site/index.html
index 587303e..cc41fac 100644
--- a/site/index.html
+++ b/site/index.html
@@ -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>
diff --git a/site/js/styleswitcher.js b/site/js/styleswitcher.js
index f7038af..9a219c9 100644
--- a/site/js/styleswitcher.js
+++ b/site/js/styleswitcher.js
@@ -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)});
diff --git a/site/presentation.html b/site/presentation.html
index 9bf6e46..1137b93 100644
--- a/site/presentation.html
+++ b/site/presentation.html
@@ -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>