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

WIP: refactor show hide JS utility to work with new registry

Browse Source
This commit is contained in:
Felix Hamann 2019-04-03 23:23:53 +02:00
parent af6a21438e
commit 6d824d3392
2 changed files with 65 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Foundation.hs
View File

@ -1077,7 +1077,7 @@ siteLayout' headingOverride widget = do
-- addScript $ StaticR js_utils_modal_js
addScript $ StaticR js_utils_registry_js
addScript $ StaticR js_utils_poc_js
-- addScript $ StaticR js_utils_showHide_js
addScript $ StaticR js_utils_showHide_js
-- addScript $ StaticR js_utils_tabber_js
addStylesheet $ StaticR css_utils_alerts_scss
addStylesheet $ StaticR css_utils_asidenav_scss

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

@ -1,77 +1,99 @@
(function() {
'use strict';
window.utils = window.utils || {};
var UTIL_NAME = 'showHide';
var UTIL_SELECTOR = '[uw-show-hide]';
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';
var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
/**
* div
* div.js-show-hide__toggle
* toggle here
* div
* content here
* <div>
* <div uw-show-hide>
* [toggle here]
* <div>
* [content here]
*/
window.utils.showHide = function(wrapper, options) {
var util = function(element) {
options = options || {};
function _init() {
if (!element) {
throw new Error('ShowHide utility cannot be setup without an element!');
}
function addEventHandler(el) {
el.addEventListener('click', function elClickListener() {
var newState = el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
updateLSState(el.dataset.shIndex || null, newState);
if (element.classList.contains(JS_INITIALIZED_CLASS)) {
return false;
}
_addEventHandler();
}
function _addEventHandler() {
element.addEventListener('click', function clickListener() {
console.log('showhide clicked');
var newState = element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
_updateLSState(element.dataset.shIndex || null, newState);
});
}
function updateLSState(index, state) {
function _updateLSState(index, state) {
if (!index) {
return false;
}
var lsData = getLocalStorageData();
var lsData = _getLocalStorageData();
lsData[index] = state;
window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
}
function collapsedStateInLocalStorage(index) {
var lsState = getLocalStorageData();
return lsState[index];
}
// function _getCollapsedLSState(index) {
// var lsState = _getLocalStorageData();
// return lsState[index];
// }
function getLocalStorageData() {
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 showHides = Array.from(scope.querySelectorAll(UTIL_SELECTOR));
// showHides.forEach(function(el) {
// if (el.classList.contains(JS_INITIALIZED_CLASS)) {
// return false;
// }
var index = el.dataset.shIndex || null;
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);
// var index = el.dataset.shIndex || null;
// var isCollapsed = el.dataset.collapsed === 'true';
// var lsCollapsedState = _getCollapsedLSState(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);
});
// Array.from(el.parentElement.children).forEach(function(el) {
// if (!el.matches(UTIL_SELECTOR)) {
// el.classList.add(SHOW_HIDE_TARGET_CLASS);
// }
// });
// el.classList.add(JS_INITIALIZED_CLASS);
// _addEventHandler(el);
// });
_init();
return {
scope: wrapper,
name: UTIL_NAME,
element: element,
destroy: function() {},
};
};
if (UtilRegistry) {
UtilRegistry.register({
name: UTIL_NAME,
selector: UTIL_SELECTOR,
setup: util
});
}
})();