diff --git a/frontend/src/utils/tooltips/tooltips.js b/frontend/src/utils/tooltips/tooltips.js index 12d628f35..c520af204 100644 --- a/frontend/src/utils/tooltips/tooltips.js +++ b/frontend/src/utils/tooltips/tooltips.js @@ -1,6 +1,7 @@ import { Utility } from '../../core/utility'; import './tooltips.sass'; import { MovementObserver } from '../../lib/movement-observer/movement-observer'; +import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; const TOOLTIP_CLASS = 'tooltip'; const TOOLTIP_INITIALIZED_CLASS = 'tooltip--initialized'; @@ -17,6 +18,7 @@ export class Tooltip { _content; _movementObserver; + _eventManager; _openedPersistent = false; @@ -45,16 +47,19 @@ export class Tooltip { this._element = element; this._handle = element.querySelector('.tooltip__handle') || element; + this._eventManager = new EventManager(); + this._movementObserver = new MovementObserver(this._handle, { leadingCallback: this.close.bind(this) }); element.classList.add(TOOLTIP_INITIALIZED_CLASS); } start() { - this._element.addEventListener('mouseover', () => { this.open(false); }); - this._element.addEventListener('mouseout', this._leave.bind(this)); - this._content.addEventListener('mouseout', this._leave.bind(this)); - this._element.addEventListener('click', this._click.bind(this)); + const mouseOverEv = new EventWrapper(EVENT_TYPE.MOUSE_OVER, (() => { this.open(false); }).bind(this), this._element); + const mouseOutEv = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (this._leave.bind(this)).bind(this), this._element); + const contentMouseOut = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (this._leave.bind(this)).bind(this), this._content); + const clickEv = new EventWrapper(EVENT_TYPE.CLICK, this._click.bind(this), this._element); + this.registerListeners([mouseOverEv, mouseOutEv, contentMouseOut, clickEv]); } open(persistent) { @@ -183,5 +188,15 @@ export class Tooltip { } - destroy() {} + destroy() { + this._eventManager.cleanUp(); + if(this._element.classList.contains(TOOLTIP_OPEN_CLASS)) + this._element.classList.remove(TOOLTIP_OPEN_CLASS); + if(this._element.classList.contains('tooltip--right')) + this._element.classList.remove('tooltip--right'); + if(this._element.classList.contains('tooltip--bottom')) + this._element.classList.remove('tooltip--bottom'); + this._movementObserver.unobserve(); + this._element.classList.remove(TOOLTIP_INITIALIZED_CLASS); + } };