show-hide-settings now persistant

This commit is contained in:
Felix Hamann 2018-07-08 18:37:57 +02:00
parent 22fc5f3aaf
commit 442c0a9a00
2 changed files with 34 additions and 18 deletions

View File

@ -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);
}); });
}); });

View File

@ -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}