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

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

@ -1,6 +1,6 @@
$newline never
<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>
<form .table-filter-form method=GET action=#{filterAction} enctype=#{filterEnctype}>
^{filterWgdt}