100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
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_COLLAPSED_CLASS = 'js-show-hide--collapsed';
|
|
var SHOW_HIDE_TARGET_CLASS = 'js-show-hide__target';
|
|
|
|
/**
|
|
* <div>
|
|
* <div uw-show-hide>
|
|
* [toggle here]
|
|
* <div>
|
|
* [content here]
|
|
*/
|
|
var util = function(element) {
|
|
|
|
function _init() {
|
|
if (!element) {
|
|
throw new Error('ShowHide utility cannot be setup without an element!');
|
|
}
|
|
|
|
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) {
|
|
if (!index) {
|
|
return false;
|
|
}
|
|
var lsData = _getLocalStorageData();
|
|
lsData[index] = state;
|
|
window.localStorage.setItem(LOCAL_STORAGE_SHOW_HIDE, JSON.stringify(lsData));
|
|
}
|
|
|
|
// function _getCollapsedLSState(index) {
|
|
// var lsState = _getLocalStorageData();
|
|
// return lsState[index];
|
|
// }
|
|
|
|
function _getLocalStorageData() {
|
|
return JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_SHOW_HIDE)) || {};
|
|
}
|
|
|
|
// 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 = _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.matches(UTIL_SELECTOR)) {
|
|
// el.classList.add(SHOW_HIDE_TARGET_CLASS);
|
|
// }
|
|
// });
|
|
// el.classList.add(JS_INITIALIZED_CLASS);
|
|
// _addEventHandler(el);
|
|
// });
|
|
|
|
_init();
|
|
|
|
return {
|
|
name: UTIL_NAME,
|
|
element: element,
|
|
destroy: function() {},
|
|
};
|
|
};
|
|
|
|
if (UtilRegistry) {
|
|
UtilRegistry.register({
|
|
name: UTIL_NAME,
|
|
selector: UTIL_SELECTOR,
|
|
setup: util
|
|
});
|
|
}
|
|
|
|
})();
|