ajout du checkbox_replacer.js

docs/index.md

@@ -22,16 +22,6 @@ configuration file. Start by reading the [introductory tutorial], then check the
 
 ---
 
-~~Strikethrough text~~
-
----
-
-- <input type="checkbox"> Task 1
-- <input type="checkbox"> Task 2
-- <input type="checkbox" checked> Task 3
-
----
-
 1. [Section 1](#section-1)
 2. [Section 2](#section-2)
 

dsfr/base.html

@@ -19,6 +19,7 @@
     <!-- 32×32 -->
     <link rel="manifest" href="{{ 'favicon/manifest.webmanifest'|url }}" crossorigin="use-credentials">
     <script src="{{ 'js/strikethrough_replacer.js'|url }}" defer></script>
+    <script src="{{ 'js/checkbox_replacer.js'|url }}" defer></script>
     <!-- Modifier les chemins relatifs des favicons en fonction de la structure du projet -->
     <!-- Dans le fichier manifest.webmanifest aussi, modifier les chemins vers les images -->
     {# {% for path in config.extra_css %}

dsfr/js/checkbox_replacer.js

+document.addEventListener("DOMContentLoaded", function () {
+    // Sélectionner tous les éléments avec la classe 'markdown-content'
+    const markdownElements = document.querySelectorAll(".markdown-content");
+
+    // Parcourir chaque élément ayant la classe 'markdown-content'
+    markdownElements.forEach((element) => {
+        // Obtenir tous les éléments de liste dans chaque élément 'markdown-content'
+        const listItems = element.querySelectorAll("li");
+
+        // Parcourir chaque élément de la liste
+        listItems.forEach((listItem) => {
+            let innerHTML = listItem.innerHTML;
+
+            // Remplacer [x] par une case à cocher cochée en HTML ou [ ] par une case non cochée
+            if (innerHTML.includes("[x]") || innerHTML.includes("[ ]")) {
+                // Supprimer les balises <p> enveloppantes si elles existent
+                innerHTML = innerHTML.replace(/<p>(.*?)<\/p>/g, "$1").trim();
+
+                // Appliquer des styles en ligne pour supprimer le style de liste
+                listItem.style.listStyleType = "none";
+
+                // Si la tâche est cochée ([x])
+                if (innerHTML.includes("[x]")) {
+                    const taskDescription = innerHTML.replace("[x]", "").trim();
+                    listItem.innerHTML = `
+                    <div class="fr-checkbox-group">
+                        <input  id="checkbox-${taskDescription}" type="checkbox" checked>
+                        <label class="fr-label" for="checkbox-${taskDescription}">
+                            ${taskDescription}
+                        </label>
+                    </div>`;
+                }
+
+                // Si la tâche n'est pas cochée ([ ])
+                else if (innerHTML.includes("[ ]")) {
+                    const taskDescription = innerHTML.replace("[ ]", "").trim();
+                    listItem.innerHTML = `
+                    <div class="fr-checkbox-group">
+                        <input id="checkbox-${taskDescription}" type="checkbox">
+                        <label class="fr-label" for="checkbox-${taskDescription}">
+                            ${taskDescription}
+                        </label>
+                    </div>`;
+                }
+            }
+        });
+    });
+});