fraport/fradrive-old
Archived
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_modal_js
addScript $ StaticR js_utils_registry_js addScript $ StaticR js_utils_registry_js
addScript $ StaticR js_utils_poc_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 -- addScript $ StaticR js_utils_tabber_js
addStylesheet $ StaticR css_utils_alerts_scss addStylesheet $ StaticR css_utils_alerts_scss
addStylesheet $ StaticR css_utils_asidenav_scss addStylesheet $ StaticR css_utils_asidenav_scss

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

@ -1,77 +1,99 @@
(function() { (function() {
'use strict'; '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 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_COLLAPSED_CLASS = 'js-show-hide--collapsed'; var SHOW_HIDE_COLLAPSED_CLASS = 'js-show-hide--collapsed';
var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target'; var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
/** /**
* div * <div>
* div.js-show-hide__toggle * <div uw-show-hide>
* toggle here * [toggle here]
* div * <div>
* content here * [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) { if (element.classList.contains(JS_INITIALIZED_CLASS)) {
el.addEventListener('click', function elClickListener() { return false;
var newState = el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS); }
updateLSState(el.dataset.shIndex || null, newState);
_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) { if (!index) {
return false; return false;
} }
var lsData = getLocalStorageData(); 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 _getCollapsedLSState(index) {
var lsState = getLocalStorageData(); // var lsState = _getLocalStorageData();
return lsState[index]; // return lsState[index];
} // }
function getLocalStorageData() { function _getLocalStorageData() {
return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {}; return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
} }
Array // var showHides = Array.from(scope.querySelectorAll(UTIL_SELECTOR));
.from(wrapper.querySelectorAll('.' + SHOW_HIDE_TOGGLE_CLASS)) // showHides.forEach(function(el) {
.forEach(function(el) { // if (el.classList.contains(JS_INITIALIZED_CLASS)) {
if (el.classList.contains(JS_INITIALIZED_CLASS)) { // return false;
return false; // }
}
var index = el.dataset.shIndex || null; // var index = el.dataset.shIndex || null;
var isCollapsed = el.dataset.collapsed === 'true'; // var isCollapsed = el.dataset.collapsed === 'true';
var lsCollapsedState = collapsedStateInLocalStorage(index); // var lsCollapsedState = _getCollapsedLSState(index);
if (typeof lsCollapsedState !== 'undefined') { // if (typeof lsCollapsedState !== 'undefined') {
isCollapsed = lsCollapsedState; // isCollapsed = lsCollapsedState;
} // }
el.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, isCollapsed); // 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.matches(UTIL_SELECTOR)) {
el.classList.add(SHOW_HIDE_TARGET_CLASS); // el.classList.add(SHOW_HIDE_TARGET_CLASS);
} // }
}); // });
el.classList.add(JS_INITIALIZED_CLASS); // el.classList.add(JS_INITIALIZED_CLASS);
addEventHandler(el); // _addEventHandler(el);
}); // });
_init();
return { return {
scope: wrapper, name: UTIL_NAME,
element: element,
destroy: function() {}, destroy: function() {},
}; };
}; };
if (UtilRegistry) {
UtilRegistry.register({
name: UTIL_NAME,
selector: UTIL_SELECTOR,
setup: util
});
}
})(); })();