fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make table filter show hide collapsed state persistent

Browse Source
This commit is contained in:
Felix Hamann 2019-03-03 20:44:47 +01:00
parent aaf14087b6
commit f7efd0433c
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
static/js/utils/showHide.js
View File

@ -3,6 +3,7 @@
window.utils = window.utils || {}; window.utils = window.utils || {};
var JS_INITIALIZED_CLASS = 'js-show-hide-initialized';
var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE'; var LOCAL_STORAGE_SHOW_HIDE = 'SHOW_HIDE';
var SHOW_HIDE_TOGGLE_CLASS = 'js-show-hide__toggle'; var SHOW_HIDE_TOGGLE_CLASS = 'js-show-hide__toggle';
var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed'; var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
@ -18,7 +19,6 @@
window.utils.showHide = function(wrapper, options) { window.utils.showHide = function(wrapper, options) {
options = options || {}; options = options || {};
// make
function addEventHandler(el) { function addEventHandler(el) {
el.addEventListener('click', function elClickListener() { el.addEventListener('click', function elClickListener() {
@ -31,32 +31,41 @@
if (!index) { if (!index) {
return false; return false;
} }
var lsData = fromLocalStorage(); var lsData = getLocalStorageData();
lsData[index] = state; lsData[index] = state;
window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData)); window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
} }
function collapsedStateInLocalStorage(index) { function collapsedStateInLocalStorage(index) {
return fromLocalStorage()[index] || null; var lsState = getLocalStorageData();
return lsState[index];
} }
function fromLocalStorage() { function getLocalStorageData() {
return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {}; return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
} }
Array Array
.from(wrapper.querySelectorAll('.' + SHOW_HIDE_TOGGLE_CLASS)) .from(wrapper.querySelectorAll('.' + SHOW_HIDE_TOGGLE_CLASS))
.forEach(function(el) { .forEach(function(el) {
if (el.classList.contains(JS_INITIALIZED_CLASS)) {
return false;
}
var index = el.dataset.shIndex || null; var index = el.dataset.shIndex || null;
el.parentElement.classList.toggle( var isCollapsed = el.dataset.collapsed === 'true';
SHOW_HIDE_COLLAPSED_CLASS, var lsCollapsedState = collapsedStateInLocalStorage(index);
collapsedStateInLocalStorage(index) || el.dataset.collapsed === 'true' if (typeof lsCollapsedState !== 'undefined') {
); isCollapsed = lsCollapsedState;
}
el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed);
Array.from(el.parentElement.children).forEach(function(el) { Array.from(el.parentElement.children).forEach(function(el) {
if (!el.classList.contains('' + SHOW_HIDE_TOGGLE_CLASS)) { if (!el.classList.contains('' + SHOW_HIDE_TOGGLE_CLASS)) {
el.classList.add(SHOW_HIDE_TARGET_CLASS); el.classList.add(SHOW_HIDE_TARGET_CLASS);
} }
}); });
el.classList.add(JS_INITIALIZED_CLASS);
addEventHandler(el); addEventHandler(el);
}); });

2
templates/table/layout-filter-default.hamlet
View File

@ -1,6 +1,6 @@
$newline never $newline never
<div .table-filter> <div .table-filter>
<h3 .js-show-hide__toggle data-sh-index='table-filter'>Filter <h3 .js-show-hide__toggle data-sh-index=table-filter data-collapsed=true>Filter
<div> <div>
<form .table-filter-form method=GET action=#{filterAction} enctype=#{filterEnctype}> <form .table-filter-form method=GET action=#{filterAction} enctype=#{filterEnctype}>
^{filterWgdt} ^{filterWgdt}