MonScoDocEssai/app/static/js/detail_summary_persistence.js

/*
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();
});