show-hide-settings now persistant
This commit is contained in:
parent
22fc5f3aaf
commit
442c0a9a00
@ -8,29 +8,45 @@
|
|||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
|
var LSNAME = 'SHOW_HIDE';
|
||||||
toggles = [];
|
|
||||||
|
|
||||||
function addEventHandler(el) {
|
function addEventHandler(el) {
|
||||||
el.addEventListener('click', function elClickListener() {
|
el.addEventListener('click', function elClickListener() {
|
||||||
var toggle = toggles[el.dataset.index];
|
var newState = el.parentElement.classList.toggle('js-show-hide--collapsed');
|
||||||
toggle.collapsed = !toggle.collapsed;
|
updateLSState(el.dataset.shIndex || null, newState);
|
||||||
toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
elements.forEach(function(el, i) {
|
function updateLSState(index, state) {
|
||||||
el.dataset.index = i;
|
if (!index) {
|
||||||
var coll = el.dataset.collapsed === 'true';
|
return false;
|
||||||
if (coll) {
|
|
||||||
el.parentElement.classList.add('js-show-hide--collapsed')
|
|
||||||
}
|
}
|
||||||
Array.from(el.parentElement.children).forEach(function(el) {
|
var lsData = fromLocalStorage();
|
||||||
if (!el.classList.contains('js-show-hide__toggle')) {
|
lsData[index] = state;
|
||||||
el.classList.add('js-show-hide__target');
|
window.localStorage.setItem(LSNAME, JSON.stringify(lsData));
|
||||||
}
|
}
|
||||||
});
|
|
||||||
toggles.push({index: i, collapsed: coll, parent: el.parentElement});
|
function collapsedStateInLocalStorage(index) {
|
||||||
addEventHandler(el);
|
return fromLocalStorage()[index] || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fromLocalStorage() {
|
||||||
|
return JSON.parse(window.localStorage.getItem(LSNAME)) || {};
|
||||||
|
}
|
||||||
|
|
||||||
|
Array
|
||||||
|
.from(document.querySelectorAll('.js-show-hide__toggle'))
|
||||||
|
.forEach(function(el) {
|
||||||
|
var index = el.dataset.shIndex || null;
|
||||||
|
el.parentElement.classList.toggle(
|
||||||
|
'js-show-hide--collapsed',
|
||||||
|
collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true'
|
||||||
|
);
|
||||||
|
Array.from(el.parentElement.children).forEach(function(el) {
|
||||||
|
if (!el.classList.contains('js-show-hide__toggle')) {
|
||||||
|
el.classList.add('js-show-hide__target');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
addEventHandler(el);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -3,7 +3,7 @@ $newline never
|
|||||||
<div .asidenav>
|
<div .asidenav>
|
||||||
$forall tid@TermIdentifier{..} <- favouriteTerms
|
$forall tid@TermIdentifier{..} <- favouriteTerms
|
||||||
<div .asidenav__box>
|
<div .asidenav__box>
|
||||||
<h3 .asidenav__box-title.js-show-hide__toggle>
|
<h3 .asidenav__box-title.js-show-hide__toggle data-sh-index="#{display season}-#{year}">
|
||||||
$case season
|
$case season
|
||||||
$of Winter
|
$of Winter
|
||||||
_{MsgWinterTermShort year}
|
_{MsgWinterTermShort year}
|
||||||
|
|||||||
Reference in New Issue
Block a user