chore(password): implemented destroy
This commit is contained in:
parent
1153ba8711
commit
b1c662da88
@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user