showHides now with pathname in localstorage

closes #29
This commit is contained in:
Felix Hamann 2018-03-12 14:08:23 +01:00
parent 475411bb4a
commit 73500274ec
2 changed files with 18 additions and 11 deletions

View File

@ -9,7 +9,7 @@
<p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
<hr> <hr>
<div .js-show-hide> <div>
<h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
<ul> <ul>
@ -27,8 +27,8 @@
<a href=@{SubmissionListR}>Dateien hochladen und abrufen <a href=@{SubmissionListR}>Dateien hochladen und abrufen
<hr> <hr>
<div .js-show-hide data-collapsed=true> <div>
<h2 .js-show-hide__toggle>Tabellen <h2 .js-show-hide__toggle data-collapsed=true>Tabellen
<table .js-sortable> <table .js-sortable>
<thead> <thead>
<tr> <tr>

View File

@ -9,7 +9,9 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')), var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
toggles = []; toggles = [],
path = new URL(window.location.href).pathname;
function addEventHandler(el) { function addEventHandler(el) {
el.addEventListener('click', function elClickListener() { el.addEventListener('click', function elClickListener() {
@ -21,23 +23,28 @@ document.addEventListener('DOMContentLoaded', function() {
} }
function updateLocalStorage(id) { function updateLocalStorage(id) {
let jsonToggles = JSON.stringify(toggles.map(t => { var lsData = getStateFromLocalStorage();
lsData[path] = toggles.map(t => {
return {id: t.index, collapsed: t.collapsed}; return {id: t.index, collapsed: t.collapsed};
})); });
window.localStorage.setItem('showHidesToggles', jsonToggles); window.localStorage.setItem('showHidesToggles', JSON.stringify(lsData));
} }
function collapsedStateInLocalStorage(id, fallBack) { function collapsedStateInLocalStorage(id, fallBack) {
let lsData = JSON.parse(window.localStorage.getItem('showHidesToggles')); var lsData = getStateFromLocalStorage();
if (lsData[id]) { if (lsData[path] && lsData[path][id] && lsData[path][id].id === id) {
return lsData[id].collapsed; return lsData[path][id].collapsed;
} }
return fallBack; return fallBack;
} }
function getStateFromLocalStorage() {
return JSON.parse(window.localStorage.getItem('showHidesToggles')) || {};
}
elements.forEach(function(el, i) { elements.forEach(function(el, i) {
el.dataset.index = i; el.dataset.index = i;
var coll = collapsedStateInLocalStorage(i, el.parentElement.dataset.collapsed === 'true'); var coll = collapsedStateInLocalStorage(i, el.dataset.collapsed === 'true');
if (coll) { if (coll) {
el.parentElement.classList.add('js-show-hide--collapsed') el.parentElement.classList.add('js-show-hide--collapsed')
} }