chore(communication-recipients): implemented destroy method
This commit is contained in:
parent
a75f6621ce
commit
6581137d2c
@ -1,4 +1,5 @@
|
||||
import { Utility } from '../../core/utility';
|
||||
import { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager';
|
||||
|
||||
const MASS_INPUT_SELECTOR = '.massinput';
|
||||
const RECIPIENT_CATEGORIES_SELECTOR = '.recipient-categories';
|
||||
@ -14,12 +15,16 @@ const RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR = '.recipient-category__checke
|
||||
})
|
||||
export class CommunicationRecipients {
|
||||
massInputElement;
|
||||
_element;
|
||||
|
||||
_eventManager;
|
||||
|
||||
constructor(element) {
|
||||
if (!element) {
|
||||
throw new Error('Communication Recipient utility cannot be setup without an element!');
|
||||
}
|
||||
|
||||
this._element = element;
|
||||
this._eventManager = new EventManager();
|
||||
this.massInputElement = element.closest(MASS_INPUT_SELECTOR);
|
||||
|
||||
this.setupRecipientCategories();
|
||||
@ -31,6 +36,18 @@ export class CommunicationRecipients {
|
||||
setupRecipientCategories() {
|
||||
Array.from(this.massInputElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR)).forEach(setupRecipientCategory);
|
||||
}
|
||||
|
||||
removeCheckedCounter() {
|
||||
let checkedCounters = this._element.querySelectorAll(RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR);
|
||||
checkedCounters.forEach((checkedCounter) => {
|
||||
checkedCounter.innerHTML = '';
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._eventManager.removeAllEventListenersFromUtil();
|
||||
this.removeCheckedCounter();
|
||||
}
|
||||
}
|
||||
|
||||
function setupRecipientCategory(recipientCategoryElement) {
|
||||
@ -42,34 +59,35 @@ function setupRecipientCategory(recipientCategoryElement) {
|
||||
const toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
|
||||
|
||||
// setup category checkbox to toggle all child checkboxes if changed
|
||||
categoryCheckbox.addEventListener('change', () => {
|
||||
const categoryToggleEvent = new EventWrapper(EVENT_TYPE.CHANGE,(() => {
|
||||
categoryCheckboxes.filter(checkbox => !checkbox.disabled).forEach(checkbox => {
|
||||
checkbox.checked = categoryCheckbox.checked;
|
||||
});
|
||||
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
||||
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
||||
});
|
||||
}).bind(this), categoryCheckbox );
|
||||
this._eventManager.registerNewListener(categoryToggleEvent);
|
||||
|
||||
// update counter and toggle checkbox initially
|
||||
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
||||
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
||||
|
||||
// register change listener for individual checkboxes
|
||||
categoryCheckboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
||||
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
||||
});
|
||||
});
|
||||
const individualToggleEvent = new EventWrapper(EVENT_TYPE.CHANGE,(() => {
|
||||
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
||||
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
|
||||
}).bind(this), categoryCheckboxes );
|
||||
this._eventManager.registerNewListener(individualToggleEvent);
|
||||
|
||||
// register change listener for toggle all checkbox
|
||||
if (toggleAllCheckbox) {
|
||||
toggleAllCheckbox.addEventListener('change', () => {
|
||||
const toggleAllEvent = new EventWrapper(EVENT_TYPE.CHANG, (() => {
|
||||
categoryCheckboxes.filter(checkbox => !checkbox.disabled).forEach(checkbox => {
|
||||
checkbox.checked = toggleAllCheckbox.checked;
|
||||
});
|
||||
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
|
||||
});
|
||||
}).bind(this), toggleAllCheckbox);
|
||||
this._eventManager.registerNewListener(toggleAllEvent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user