From 780a5f7ce17fbe419cedc077e196e3999c929212 Mon Sep 17 00:00:00 2001 From: Johannes Eder Date: Fri, 2 Jul 2021 15:27:33 +0200 Subject: [PATCH] chore(exam-correct): destroy method in exam-correct implemented --- .../src/lib/event-manager/event-manager.js | 1 + .../src/utils/check-all/check-all.spec.js | 1 - .../src/utils/exam-correct/exam-correct.js | 42 ++++++++++++------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/frontend/src/lib/event-manager/event-manager.js b/frontend/src/lib/event-manager/event-manager.js index a1400486a..f0959d66e 100644 --- a/frontend/src/lib/event-manager/event-manager.js +++ b/frontend/src/lib/event-manager/event-manager.js @@ -7,6 +7,7 @@ export const EVENT_TYPE = { MOUSE_OVER : 'mouseover', SUBMIT : 'submit', INPUT : 'input', + FOCUS_OUT : 'focusout', //more to be added }; diff --git a/frontend/src/utils/check-all/check-all.spec.js b/frontend/src/utils/check-all/check-all.spec.js index 08cf2a088..431dd5993 100644 --- a/frontend/src/utils/check-all/check-all.spec.js +++ b/frontend/src/utils/check-all/check-all.spec.js @@ -28,7 +28,6 @@ describe('CheckAll', () => { it('should destroy CheckAll', () => { checkAll.destroy(); expect(checkAll._eventManager._registeredListeners.length).toBe(0); - console.log(checkAll._element.classList); expect(checkAll._element.classList).not.toEqual(jasmine.arrayContaining([CHECK_ALL_INITIALIZED_CLASS])); }); diff --git a/frontend/src/utils/exam-correct/exam-correct.js b/frontend/src/utils/exam-correct/exam-correct.js index cf23c911d..c88ce2d6b 100644 --- a/frontend/src/utils/exam-correct/exam-correct.js +++ b/frontend/src/utils/exam-correct/exam-correct.js @@ -1,5 +1,6 @@ import { Utility } from '../../core/utility'; import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager'; +import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; import { HttpClient } from '../../services/http-client/http-client'; import moment from 'moment'; @@ -58,6 +59,7 @@ export class ExamCorrect { _lastColumnIndex; _storageManager; + _eventManager; constructor(element, app) { if (!element) { @@ -71,6 +73,8 @@ export class ExamCorrect { this._element = element; this._app = app; + this._eventManager = new EventManager(); + // TODO work in progress // this._storageManager = new StorageManager('EXAM_CORRECT', '0.0.0', { location: LOCATION.SESSION, encryption: { all: { tag: 'exam-correct', exam: this._element.getAttribute('uw-exam-correct') } } }); this._storageManager = new StorageManager('EXAM_CORRECT', '0.0.0', { location: LOCATION.WINDOW }); @@ -88,20 +92,28 @@ export class ExamCorrect { this._resultPassSelect = resultDetailCell && resultDetailCell.querySelector('select.uw-exam-correct__pass'); this._partDeleteBoxes = [...this._element.querySelectorAll('input.uw-exam-correct--delete-exam-part')]; - if (this._sendBtn) - this._sendBtn.addEventListener('click', this._sendCorrectionHandler.bind(this)); - else console.error('ExamCorrect utility could not detect send button!'); + if (this._sendBtn){ + const sendClickEvent = new EventWrapper(EVENT_TYPE.CLICK, this._sendCorrectionHandler.bind(this), this._sendBtn); + this._eventManager.registerNewListener(sendClickEvent); + } else { + console.error('ExamCorrect utility could not detect send button!'); + } - if (this._userInput) - this._userInput.addEventListener('focusout', this._validateUserInput.bind(this)); - else throw new Error('ExamCorrect utility could not detect user input!'); + if (this._userInput) { + const focusOutEvent = new EventWrapper(EVENT_TYPE.FOCUS_OUT, this._validateUserInput.bind(this), this._userInput); + this._eventManager.registerNewListener(focusOutEvent); + } else { + throw new Error('ExamCorrect utility could not detect user input!'); + } for (let deleteBox of this._partDeleteBoxes) { - deleteBox.addEventListener('change', (() => { this._updatePartDeleteDisabled(deleteBox); }).bind(this)); + const deleteBoxChangeEvent = new EventWrapper(EVENT_TYPE.CHANGE, (() => { this._updatePartDeleteDisabled(deleteBox); }).bind(this), deleteBox); + this._eventManger.registerNewListener(deleteBoxChangeEvent); } for (let input of [this._userInput, ...this._partInputs]) { - input.addEventListener('keypress', this._inputKeypress.bind(this)); + const inputKeyDownEvent = new EventWrapper(EVENT_TYPE.KEYDOWN, this._inputKeypress.bind(this), input); + this._eventManager.registerNewListener(inputKeyDownEvent); } if (!this._userInputStatus) { @@ -125,23 +137,25 @@ export class ExamCorrect { ); if (this._resultSelect && this._resultGradeSelect) { - this._resultSelect.addEventListener('change', () => { + const resultSelectEvent = new EventWrapper(EVENT_TYPE.CHANGE, (() => { if (this._resultSelect.value !== 'grade') this._resultGradeSelect.classList.add('grade-hidden'); else this._resultGradeSelect.classList.remove('grade-hidden'); - }); + }).bind(this), this._resultSelect ); + this._eventManager.registerNewListener(resultSelectEvent); if (this._resultSelect.value !== 'grade') this._resultGradeSelect.classList.add('grade-hidden'); } if (this._resultSelect && this._resultPassSelect) { - this._resultSelect.addEventListener('change', () => { + const resultPassSelectEvent = new EventWrapper(EVENT_TYPE.CHANGE, (() => { if (this._resultSelect.value !== 'pass') this._resultPassSelect.classList.add('pass-hidden'); else this._resultPassSelect.classList.remove('pass-hidden'); - }); + }).bind(this), this._resultSelect); + this._eventManager.registerNewListener(resultPassSelectEvent); if (this._resultSelect.value !== 'pass') this._resultPassSelect.classList.add('pass-hidden'); @@ -158,9 +172,7 @@ export class ExamCorrect { } destroy() { - this._sendBtn.removeEventListener('click', this._sendCorrectionHandler); - this._userInput.removeEventListener('change', this._validateUserInput); - // TODO destroy handlers on user input candidate elements + this._eventManager.removeAllEventListenersFromUtil(); } _updatePartDeleteDisabled(deleteBox) {