PR #603 reprise: état du formulaire preferences.

app/forms/main/config_logos.py

@@ -148,6 +148,9 @@ class AddLogoForm(FlaskForm):
         kwargs["meta"] = {"csrf": False}
         super().__init__(*args, **kwargs)
 
+    def id(self):
+        return f"id=add_{self.dept_key.data}"
+
     def validate_name(self, name):
         dept_id = dept_key_to_id(self.dept_key.data)
         if dept_id == GLOBAL:
@@ -227,6 +230,10 @@ class LogoForm(FlaskForm):
                 self.description = "Se substitue au footer défini au niveau global"
                 self.titre = "Logo pied de page"
 
+    def id(self):
+        idstring = f"{self.dept_key.data}_{self.logo_id.data}"
+        return f"id={idstring}"
+
     def select_action(self):
         from app.scodoc.sco_config_actions import LogoRename
         from app.scodoc.sco_config_actions import LogoUpdate
@@ -258,6 +265,9 @@ class DeptForm(FlaskForm):
         kwargs["meta"] = {"csrf": False}
         super().__init__(*args, **kwargs)
 
+    def id(self):
+        return f"id=DEPT_{self.dept_key.data}"
+
     def is_local(self):
         if self.dept_key.data == GLOBAL:
             return None

app/scodoc/sco_preferences.py

@@ -2069,7 +2069,10 @@ class BasePreferences(object):
 
         self.load()
         H = [
-            html_sco_header.sco_header(page_title="Préférences"),
+            html_sco_header.sco_header(
+                page_title="Préférences",
+                javascripts=["js/detail_summary_persistence.js"],
+            ),
             f"<h2>Préférences globales pour {scu.ScoURL()}</h2>",
             # f"""<p><a href="{url_for("scodoc.configure_logos", scodoc_dept=g.scodoc_dept)
             # }">modification des logos du département (pour documents pdf)</a></p>"""
@@ -2210,10 +2213,14 @@ class SemPreferences:
             )  # a bug !
         sem = sco_formsemestre.get_formsemestre(self.formsemestre_id)
         H = [
-            html_sco_header.html_sem_header("Préférences du semestre"),
+            html_sco_header.html_sem_header(
+                "Préférences du semestre",
+                javascripts=["js/detail_summary_persistence.js"],
+            ),
             """
 <p class="help">Les paramètres définis ici ne s'appliqueront qu'à ce semestre.</p>
 <p class="msg">Attention: cliquez sur "Enregistrer les modifications" en bas de page pour appliquer vos changements !</p>
+
 <script type="text/javascript">
 function sel_global(el, pref_name) {
      var tf = document.getElementById("tf");

app/static/js/detail_summary_persistence.js

@@ -0,0 +1,82 @@
+/*
+Ce module a pour objet de conserver la configuration (état ouvert/fermé) des balises details/summary
+d'un page donnée.
+On stocke l'état de chaque balise dans le localstorage javascript (associé à la page)
+pour cela il est nécessaire d'identifier chaque balise. Ceci se fait:
+* soit au moyen de l'id si un id est déclaré pour la balise ('#' + id)
+* soit en numérotant les balises dans l'ordre de parcours de la page. ('ds_' + numéro)
+l'identifiant généré est stocké comme attribut ds_id de la balise.
+
+la variable keepDetails peut être mise à false (par inclusion du code
+<script type="text/javascript>keepDetails = false;</script> pour reinitialisés l'état de toutes
+les balises (fermées par défaut sauf si attribut open déjà activé dans le code source de la page)
+
+*/
+
+const ID_ATTRIBUTE = "ds_id"
+
+function genere_id(detail, idnum) {
+    let id = "ds_" + idnum;
+    if (detail.getAttribute("id")) {
+        id = "#" + detail.getAttribute("id");
+    }
+    detail.setAttribute(ID_ATTRIBUTE, id);
+    return id;
+}
+
+// remise à l'état initial. doit être exécuté dès le chargement de la page pour que l'état 'open'
+// des balises soit celui indiqué par le serveur (et donc indépendant du localstorage)
+function reset_detail(detail, id) {
+    let opened = detail.getAttribute("open");
+    if (opened) {
+        detail.setAttribute("open", true);
+        localStorage.setItem(id, true);
+    } else {
+        detail.removeAttribute("open");
+        localStorage.setItem(id, false);
+    }
+}
+
+function restore_detail(detail, id) {
+    let status = localStorage.getItem(id);
+    if (status == "true") {
+        detail.setAttribute("open", true);
+    } else {
+        detail.removeAttribute("open");
+    }
+}
+
+function add_listener(detail) {
+    detail.addEventListener('toggle', (e) => {
+        let id = e.target.getAttribute(ID_ATTRIBUTE);
+        let ante = e.target.getAttribute("open");
+        if (ante == null) {
+            localStorage.setItem(id, false);
+        } else {
+            localStorage.setItem(id, true);
+        }
+        e.stopPropagation();
+    })
+}
+
+function reset_ds() {
+    let idnum = 0;
+    keepDetails = true;
+    details = document.querySelectorAll("details")
+    details.forEach(function (detail) {
+        let id = genere_id(detail, idnum);
+        console.log("Processing " + id)
+        if (keepDetails) {
+            restore_detail(detail, id);
+        } else {
+            reset_detail(detail, id);
+        }
+        add_listener(detail);
+        idnum++;
+    });
+}
+
+window.addEventListener('load', function() {
+    console.log("details/summary persistence ON");
+    reset_ds();
+})

app/templates/config_logos.j2

@@ -20,7 +20,7 @@
 {% endmacro %}
 
 {% macro render_add_logo(add_logo_form) %}
-<details {{ add_logo_form.opened() }}>
+<details {{ add_logo_form.id() }} {{ add_logo_form.opened() }}>
     <summary>
         <h3>Ajouter un logo</h3>
     </summary>
@@ -33,7 +33,7 @@
 {% endmacro %}
 
 {% macro render_logo(dept_form, logo_form) %}
-<details {{ logo_form.opened() }}>
+<details {{ logo_form.id() }} {{ logo_form.opened() }}>
     {{ logo_form.hidden_tag() }}
     <summary>
         {% if logo_form.titre %}
@@ -95,6 +95,7 @@
 
 <script src="/ScoDoc/static/jQuery/jquery.js"></script>
 <script src="/ScoDoc/static/js/config_logos.js"></script>
+<script src="/ScoDoc/static/js/detail_summary_persistence.js"></script>
 
 <form id="config_logos_form" class="sco-form" action="" method="post" enctype="multipart/form-data" novalidate>
     {{ form.hidden_tag() }}
@@ -104,7 +105,7 @@
         {% for dept_entry in form.depts.entries %}
         {% set dept_form = dept_entry.form %}
         {{ dept_entry.form.hidden_tag() }}
-        <details {{ dept_form.opened() }}>
+        <details {{ dept_form.id() }} {{ dept_form.opened() }}>
             <summary>
                 <span class="entete_dept">
                     {% if dept_entry.form.is_local() %}