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><a href="/blog.html">blog</a></li>
<li> <li>
<label for="styleswitcher">change de style :</label> <label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher"> <select id="styleswitcher"></select>
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<script>initStyleSelectElement()</script> <script>initStyleSelectElement()</script>
</li> </li>
</ul> </ul>

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

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

6
site/index.html
View file

@ -18,11 +18,7 @@
<li><a href="/blog.html">blog</a></li> <li><a href="/blog.html">blog</a></li>
<li> <li>
<label for="styleswitcher">change de style :</label> <label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher"> <select id="styleswitcher"></select>
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<script>initStyleSelectElement()</script> <script>initStyleSelectElement()</script>
</li> </li>
</ul> </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", const styles = { "Default" : "/css/default.css",
"No-CSS" : "/css/no-css.css", "No-CSS" : "/css/no-css.css",
"Darkmagenta" : "/css/darkmagenta.css", "Darkmagenta" : "/css/darkmagenta.css",
@ -27,6 +31,17 @@ function initStyle () {
function initStyleSelectElement () { function initStyleSelectElement () {
const styleSelectElement = document.getElementById("styleswitcher"); 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.value = sessionStorage.getItem("currentStyle");
styleSelectElement.addEventListener("change", (event) => {setStyle(event.target.value)}); 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><a href="/blog.html">blog</a></li>
<li> <li>
<label for="styleswitcher">change de style :</label> <label for="styleswitcher">change de style :</label>
<select id="styleswitcher" name="styleswitcher"> <select id="styleswitcher"></select>
<option>Default</option>
<option>No-CSS</option>
<option>Darkmagenta</option>
</select>
<script>initStyleSelectElement()</script> <script>initStyleSelectElement()</script>
</li> </li>
</ul> </ul>