diff --git a/frontend/src/utils/mass-input/mass-input.js b/frontend/src/utils/mass-input/mass-input.js index aaa5f7d0c..184706b4d 100644 --- a/frontend/src/utils/mass-input/mass-input.js +++ b/frontend/src/utils/mass-input/mass-input.js @@ -2,6 +2,7 @@ import { Utility } from '../../core/utility'; import { Datepicker } from '../form/datepicker'; +import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; import './mass-input.sass'; const MASS_INPUT_CELL_SELECTOR = '.massinput__cell'; @@ -29,6 +30,8 @@ export class MassInput { _changedAdd = new Array(); + _eventManager; + constructor(element, app) { if (!element) { throw new Error('Mass Input utility cannot be setup without an element!'); @@ -37,6 +40,8 @@ export class MassInput { this._element = element; this._app = app; + this._eventManager = new EventManager(); + if (global !== undefined) this._global = global; else if (window !== undefined) @@ -64,9 +69,10 @@ export class MassInput { buttons.forEach((button) => { this._setupSubmitButton(button); }); - - this._massInputForm.addEventListener('submit', this._massInputFormSubmitHandler.bind(this)); - this._massInputForm.addEventListener('keypress', this._keypressHandler.bind(this)); + + const submitEv = new EventWrapper(EVENT_TYPE.SUBMIT, this._massInputFormSubmitHandler.bind(this), this._massInputForm); + const keyPressEv = new EventWrapper(EVENT_TYPE.KEYDOWN, this._keypressHandler.bind(this), this.massInputForm); + this._eventManager.registerListeners([submitEv, keyPressEv]); Array.from(this._element.querySelectorAll(MASS_INPUT_ADD_CELL_SELECTOR)).forEach(this._setupChangedHandlers.bind(this)); @@ -76,14 +82,16 @@ export class MassInput { destroy() { this._reset(); + this._eventManager.cleanUp(); + this._element.classList.remove(MASS_INPUT_INITIALIZED_CLASS); } _setupChangedHandlers(addCell) { Array.from(addCell.querySelectorAll(MASS_INPUT_ADD_CHANGE_FIELD_SELECTOR)).forEach(inputElem => { if (inputElem.closest('[uw-mass-input]') !== this._element) return; - - inputElem.addEventListener('change', () => { this._changedAdd.push(addCell); }); + const changeEv = new EventWrapper(EVENT_TYPE.CHANGE, (() => { this._changedAdd.push(addCell); }).bind(this), inputElem); + this._eventManager.registerNewListener(changeEv); }); } @@ -207,13 +215,13 @@ export class MassInput { _setupSubmitButton(button) { button.setAttribute('type', 'button'); button.classList.add(MASS_INPUT_SUBMIT_BUTTON_CLASS); - button.addEventListener('click', this._massInputFormSubmitHandler); + const buttonClickEv = new EventWrapper(EVENT_TYPE.CLICK, this._massInputFormSubmitHandler.bind(this), button); + this._eventManager.registerNewListener(buttonClickEv); } _resetSubmitButton(button) { button.setAttribute('type', 'submit'); button.classList.remove(MASS_INPUT_SUBMIT_BUTTON_CLASS); - button.removeEventListener('click', this._massInputFormSubmitHandler); } _processResponse(responseElement) { @@ -268,9 +276,6 @@ export class MassInput { } _reset() { - this._element.classList.remove(MASS_INPUT_INITIALIZED_CLASS); - this._massInputForm.removeEventListener('submit', this._massInputFormSubmitHandler); - this._massInputForm.removeEventListener('keypress', this._keypressHandler); const buttons = this._getMassInputSubmitButtons(); buttons.forEach((button) => {