88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import { Utility } from '../../core/utility';
|
|
import './show-hide.scss';
|
|
|
|
const SHOW_HIDE_LOCAL_STORAGE_KEY = 'SHOW_HIDE';
|
|
const SHOW_HIDE_INITIALIZED_CLASS = 'show-hide--initialized';
|
|
const SHOW_HIDE_COLLAPSED_CLASS = 'show-hide--collapsed';
|
|
const SHOW_HIDE_TOGGLE_CLASS = 'show-hide__toggle';
|
|
const SHOW_HIDE_TOGGLE_RIGHT_CLASS = 'show-hide__toggle--right';
|
|
|
|
@Utility({
|
|
selector: '[uw-show-hide]',
|
|
})
|
|
export class ShowHide {
|
|
|
|
_showHideId;
|
|
_element;
|
|
|
|
constructor(element) {
|
|
if (!element) {
|
|
throw new Error('ShowHide utility cannot be setup without an element!');
|
|
}
|
|
|
|
this._element = element;
|
|
|
|
if (this._element.classList.contains(SHOW_HIDE_INITIALIZED_CLASS)) {
|
|
return false;
|
|
}
|
|
|
|
// register click listener
|
|
this._addClickListener();
|
|
|
|
// param showHideId
|
|
if (this._element.dataset.showHideId) {
|
|
this._showHideId = this._element.dataset.showHideId;
|
|
}
|
|
|
|
// param showHideCollapsed
|
|
let collapsed = false;
|
|
if (this._element.dataset.showHideCollapsed !== undefined) {
|
|
collapsed = true;
|
|
}
|
|
|
|
if (this._showHideId) {
|
|
let localStorageCollapsed = this._getLocalStorage()[this._showHideId];
|
|
if (typeof localStorageCollapsed !== 'undefined') {
|
|
collapsed = localStorageCollapsed;
|
|
}
|
|
}
|
|
this._element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS, collapsed);
|
|
|
|
// param showHideAlign
|
|
const alignment = this._element.dataset.showHideAlign;
|
|
if (alignment === 'right') {
|
|
this._element.classList.add(SHOW_HIDE_TOGGLE_RIGHT_CLASS);
|
|
}
|
|
|
|
// mark as initialized
|
|
this._element.classList.add(SHOW_HIDE_INITIALIZED_CLASS, SHOW_HIDE_TOGGLE_CLASS);
|
|
}
|
|
|
|
destroy() {
|
|
this._element.removeEventListener('click', this._clickHandler);
|
|
}
|
|
|
|
_addClickListener() {
|
|
this._element.addEventListener('click', this._clickHandler);
|
|
}
|
|
|
|
_clickHandler = () => {
|
|
const newState = this._element.parentElement.classList.toggle(SHOW_HIDE_COLLAPSED_CLASS);
|
|
|
|
if (this._showHideId) {
|
|
this._setLocalStorage(this._showHideId, newState);
|
|
}
|
|
}
|
|
|
|
// maybe move these to a LocalStorageHelper?
|
|
_setLocalStorage(id, state) {
|
|
const lsData = this._getLocalStorage();
|
|
lsData[id] = state;
|
|
window.localStorage.setItem(SHOW_HIDE_LOCAL_STORAGE_KEY, JSON.stringify(lsData));
|
|
}
|
|
|
|
_getLocalStorage() {
|
|
return JSON.parse(window.localStorage.getItem(SHOW_HIDE_LOCAL_STORAGE_KEY)) || {};
|
|
}
|
|
}
|