forked from ScoDoc/ScoDoc
83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
/*
|
|
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();
|
|
});
|