60 lines
1.8 KiB
Plaintext
60 lines
1.8 KiB
Plaintext
/**
|
|
* div.js-show-hide
|
|
* div.js-show-hide-toggle
|
|
* toggle here
|
|
* div
|
|
* content here
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
|
|
toggles = [],
|
|
path = new URL(window.location.href).pathname;
|
|
|
|
|
|
function addEventHandler(el) {
|
|
el.addEventListener('click', function elClickListener() {
|
|
var toggle = toggles[el.dataset.index];
|
|
toggle.collapsed = !toggle.collapsed;
|
|
toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
|
|
updateLocalStorage();
|
|
});
|
|
}
|
|
|
|
function updateLocalStorage(id) {
|
|
var lsData = getStateFromLocalStorage();
|
|
lsData[path] = toggles.map(t => {
|
|
return {id: t.index, collapsed: t.collapsed};
|
|
});
|
|
window.localStorage.setItem('showHidesToggles', JSON.stringify(lsData));
|
|
}
|
|
|
|
function collapsedStateInLocalStorage(id, fallBack) {
|
|
var lsData = getStateFromLocalStorage();
|
|
if (lsData[path] && lsData[path][id] && lsData[path][id].id === id) {
|
|
return lsData[path][id].collapsed;
|
|
}
|
|
return fallBack;
|
|
}
|
|
|
|
function getStateFromLocalStorage() {
|
|
return JSON.parse(window.localStorage.getItem('showHidesToggles')) || {};
|
|
}
|
|
|
|
elements.forEach(function(el, i) {
|
|
el.dataset.index = i;
|
|
var coll = collapsedStateInLocalStorage(i, el.dataset.collapsed === 'true');
|
|
if (coll) {
|
|
el.parentElement.classList.add('js-show-hide--collapsed')
|
|
}
|
|
Array.from(el.parentElement.children).forEach(function(el) {
|
|
if (!el.classList.contains('js-show-hide__toggle')) {
|
|
el.classList.add('js-show-hide__target');
|
|
}
|
|
});
|
|
toggles.push({index: i, collapsed: coll, parent: el.parentElement});
|
|
addEventHandler(el);
|
|
});
|
|
});
|