81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
|
|
//
|
|
// Show/hide some sections by clicking on the title.
|
|
//
|
|
// Can be replaced by <details>, <summary> once it is supported by most browsers.
|
|
//
|
|
|
|
function saveStatus(id, shown) {
|
|
if (typeof(Storage) !== "undefined") {
|
|
localStorage.setItem("yfold-shown-" + id, shown) ;
|
|
}
|
|
}
|
|
|
|
// record : (when clicked), record the status in local storage
|
|
function setStatus(id, shown, content, record) {
|
|
|
|
// console.log ("setStatus (" + id + ", " + shown + ")") ;
|
|
|
|
var span = document.getElementById("arrow-" + id) ;
|
|
|
|
if (shown) {
|
|
content.classList.remove("anim-hide") ;
|
|
content.classList.remove("hidden") ;
|
|
span.innerHTML = "▾" ;
|
|
if (record) { content.classList.add("anim-show") ; }
|
|
else { content.classList.add("shown") ; }
|
|
}
|
|
else {
|
|
content.classList.remove("anim-show") ;
|
|
content.classList.remove("shown") ;
|
|
span.innerHTML = "▸" ;
|
|
if (record) { content.classList.add("anim-hide") ; }
|
|
else { content.classList.add("hidden") ; }
|
|
}
|
|
|
|
if (record) { saveStatus(id, shown) ; }
|
|
}
|
|
|
|
// Invoked at load-time once for every yfold section.
|
|
function initYfold(id) {
|
|
|
|
// console.log ("initYfold (" + id + ")") ;
|
|
|
|
// console.log ("unknown " + id)
|
|
var shown = true ;
|
|
var content = document.getElementById("content-" + id) ;
|
|
|
|
// Sets the state according to local storage or default value.
|
|
|
|
if (typeof(Storage) !== "undefined") {
|
|
var local = localStorage.getItem("yfold-shown-" + id) ;
|
|
// console.log ("using storage value = " + local)
|
|
|
|
if (local === 'true') {
|
|
shown = true ;
|
|
}
|
|
else if (local === 'false') {
|
|
shown = false ;
|
|
}
|
|
else {
|
|
// Get default value
|
|
var defv = content.getAttribute("data-yfold-default") ;
|
|
if (defv === 'hide') {
|
|
shown = false ;
|
|
}
|
|
// console.log ("using default value = " + shown)
|
|
}
|
|
}
|
|
|
|
setStatus(id, shown, content, false) ;
|
|
}
|
|
|
|
// Function invoked when the title is clicked.
|
|
function toggleYfold(id) {
|
|
|
|
// console.log ("toggleYfold (" + id + ")") ;
|
|
|
|
var content = document.getElementById("content-" + id) ;
|
|
var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
|
|
setStatus(id, expand, content, true) ;
|
|
}
|