fraport/fradrive-old
fraport/fradrive-old
Archived
3
1
Fork 0
Code Issues 65 Pull Requests 5 Actions Packages Projects Releases 197 Wiki Activity

chore(hide-columns): implemented destroy

Browse Source
This commit is contained in:
Johannes Eder 2021-07-16 14:57:42 +02:00 committed by Sarah Vaupel
parent abe84156d5
commit 9d5b8bc60a
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lib/event-manager/event-manager.js
View File

@ -5,6 +5,7 @@ export const EVENT_TYPE = {
INVALID : 'invalid',
CHANGE : 'change',
MOUSE_OVER : 'mouseover',
MOUSE_OUT : 'mouseout',
SUBMIT : 'submit',
INPUT : 'input',
FOCUS_OUT : 'focusout',

43
frontend/src/utils/hide-columns/hide-columns.js
View File

@ -1,5 +1,7 @@
import { Utility } from '../../core/utility';
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
import './hide-columns.sass';
import { TableIndices } from '../../lib/table/table';
@ -29,6 +31,7 @@ const HIDE_COLUMNS_INITIALIZED = 'uw-hide-columns--initialized';
export class HideColumns {
_storageManager = new StorageManager('HIDE_COLUMNS', '1.1.0', { location: LOCATION.LOCAL });
_eventManager;
_element;
_elementWrapper;
@ -36,8 +39,6 @@ export class HideColumns {
_autoHide;
_mutationObserver;
_tableIndices;
headerToHider = new Map();
@ -62,6 +63,7 @@ export class HideColumns {
return false;
this._element = element;
this._eventManager = new EventManager();
this._tableIndices = new TableIndices(this._element);
@ -82,12 +84,18 @@ export class HideColumns {
[...this._element.querySelectorAll('th')].filter(th => !th.hasAttribute(HIDE_COLUMNS_NO_HIDE)).forEach(th => this.setupHideButton(th));
this._mutationObserver = new MutationObserver(this._tableMutated.bind(this));
this._mutationObserver.observe(this._element, { childList: true, subtree: true });
this._eventManager.registerNewMutationObserver(this._tableMutated.bind(this), this._element, { childList: true, subtree: true });
this._element.classList.add(HIDE_COLUMNS_INITIALIZED);
}
destroy() {
this._eventManager.cleanUp();
this._storageManager.clear();
this._tableUtilContainer.remove();
this._element.classList.remove(HIDE_COLUMNS_INITIALIZED);
}
setupHideButton(th) {
const preHidden = this.isHiddenTH(th);
@ -104,34 +112,41 @@ export class HideColumns {
this.addHeaderHider(th, hider);
th.addEventListener('mouseover', () => {
const mouseOverEvent = new EventWrapper(EVENT_TYPE.MOUSE_OVER, (() => {
hider.classList.add(TABLE_HIDER_VISIBLE_CLASS);
});
th.addEventListener('mouseout', () => {
}).bind(this), th);
this._eventManager.registerNewListener(mouseOverEvent);
const mouseOutEvent = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (() => {
if (hider.classList.contains(TABLE_HIDER_CLASS)) {
hider.classList.remove(TABLE_HIDER_VISIBLE_CLASS);
}
});
}).bind(this), th);
this._eventManager.registerNewListener(mouseOutEvent);
hider.addEventListener('click', (event) => {
const hideClickEvent = new EventWrapper(EVENT_TYPE.CLICK, ((event) => {
event.preventDefault();
event.stopPropagation();
this.switchColumnDisplay(th);
// this._tableHiderContainer.getElementsByClassName(TABLE_HIDER_CLASS).forEach(hider => this.hideHiderBehindHeader(hider));
});
}).bind(this));
this._eventManager.registerNewListener(hideClickEvent);
hider.addEventListener('mouseover', () => {
const mouseOverHider = new EventWrapper(EVENT_TYPE.MOUSE_OVER, (() => {
hider.classList.add(TABLE_HIDER_VISIBLE_CLASS);
const currentlyHidden = this.hiderStatus(th);
this.updateHiderIcon(hider, !currentlyHidden);
});
hider.addEventListener('mouseout', () => {
}).bind(this), hider);
this._eventManager.registerNewListener(mouseOverHider);
const mouseOutHider = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (() => {
if (hider.classList.contains(TABLE_HIDER_CLASS)) {
hider.classList.remove(TABLE_HIDER_VISIBLE_CLASS);
}
const currentlyHidden = this.hiderStatus(th);
this.updateHiderIcon(hider, currentlyHidden);
});
}).bind(this), hider);
this._eventManger.registerNewListener(mouseOutHider);
new ResizeObserver(() => { this.repositionHider(hider); }).observe(th);