chore(tooltips): implemented destroy

This commit is contained in:
Johannes Eder 2021-07-26 19:24:22 +02:00 committed by Sarah Vaupel
parent 4156db3abb
commit 01d9ce3980

View File

@ -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);
}
};