1
0
forked from ScoDoc/ScoDoc
ScoDoc/app/static/js/detail_summary_persistence.js

83 lines
2.6 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();
})