From 9d5b8bc60ad6c692ccf68282f8add9640021cde4 Mon Sep 17 00:00:00 2001
From: Johannes Eder <ederj@cip.ifi.lmu.de>
Date: Fri, 16 Jul 2021 14:57:42 +0200
Subject: [PATCH] chore(hide-columns): implemented destroy

---
 .../src/lib/event-manager/event-manager.js    |  1 +
 .../src/utils/hide-columns/hide-columns.js    | 43 +++++++++++++------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/event-manager/event-manager.js b/frontend/src/lib/event-manager/event-manager.js
index 35a5075e6..499ede4f9 100644
--- a/frontend/src/lib/event-manager/event-manager.js
+++ b/frontend/src/lib/event-manager/event-manager.js
@@ -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',
diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js
index 7661ac92b..abfa37eb6 100644
--- a/frontend/src/utils/hide-columns/hide-columns.js
+++ b/frontend/src/utils/hide-columns/hide-columns.js
@@ -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);