chore(password): implemented destroy

This commit is contained in:
Johannes Eder 2021-07-21 10:54:45 +02:00 committed by Sarah Vaupel
parent 1153ba8711
commit b1c662da88

View File

@ -1,4 +1,5 @@
import { Utility } from '../../core/utility';
import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
const PASSWORD_INITIALIZED_CLASS = 'password-input--initialized';
@ -9,6 +10,9 @@ export class Password {
_element;
_iconEl;
_toggleContainerEl;
_wrapperEl;
_eventManager;
constructor(element) {
if (!element)
@ -18,25 +22,26 @@ export class Password {
return false;
this._element = element;
this._eventManager = new EventManager();
this._element.classList.add('password-input__input');
const siblingEl = this._element.nextSibling;
const parentEl = this._element.parentElement;
const wrapperEl = document.createElement('div');
wrapperEl.classList.add('password-input__wrapper');
wrapperEl.appendChild(this._element);
this._wrapperEl = document.createElement('div');
this._wrapperEl.classList.add('password-input__wrapper');
this._wrapperEl.appendChild(this._element);
this._toggleContainerEl = document.createElement('div');
this._toggleContainerEl.classList.add('password-input__toggle');
wrapperEl.appendChild(this._toggleContainerEl);
this._wrapperEl.appendChild(this._toggleContainerEl);
this._iconEl = document.createElement('i');
this._iconEl.classList.add('fas', 'fa-fw');
this._toggleContainerEl.appendChild(this._iconEl);
parentEl.insertBefore(wrapperEl, siblingEl);
parentEl.insertBefore(this._wrapperEl, siblingEl);
this._element.classList.add(PASSWORD_INITIALIZED_CLASS);
}
@ -44,17 +49,30 @@ export class Password {
start() {
this.updateVisibleIcon(this.isVisible());
this._toggleContainerEl.addEventListener('mouseover', () => {
const mouseOverEv = new EventWrapper(EVENT_TYPE.MOUS_OVER, (() => {
this.updateVisibleIcon(!this.isVisible());
});
this._toggleContainerEl.addEventListener('mouseout', () => {
}).bind(this), this._toggleContainerEl);
const mouseOutEv = new EventWrapper(EVENT_TYPE.MOUSE_OUT, (() => {
this.updateVisibleIcon(this.isVisible());
});
this._toggleContainerEl.addEventListener('click', (event) => {
}).bind(this), this._toggleContainerEl);
const clickEv = new EventWrapper(EVENT_TYPE.CLICK,((event) => {
event.preventDefault();
event.stopPropagation();
this.setVisible(!this.isVisible());
});
}).bind(this), this._toggleContainerEl );
this._eventManager.registerListeners([mouseOverEv, mouseOutEv, clickEv]);
}
destroy() {
this._iconEl.remove();
this._toggleContainerEl.remove();
this._wrapperEl.remove();
this._iconEl.remove();
this._element.classList.remove(PASSWORD_INITIALIZED_CLASS);
}
isVisible() {