fix(communication-recipients): fixed undefined error with context and a few minor issues

This commit is contained in:
Johannes Eder 2021-07-08 12:17:25 +02:00 committed by Sarah Vaupel
parent 9e342a5368
commit 03ac80342e
2 changed files with 43 additions and 40 deletions

View File

@ -33,7 +33,7 @@ export class EventManager {
registerNewMutationObserver(callback, domNode, config) {
let observer = new MutationObserver(callback);
observer.observe(domNode, config);
this._muatationObservers.add(observer);
this._mutationObservers.push(observer);
}
removeAllEventListenersFromUtil() {

View File

@ -25,7 +25,7 @@ export class CommunicationRecipients {
}
this._element = element;
this._eventManager = new EventManager();
this.massInputElement = element.closest(MASS_INPUT_SELECTOR);
this.massInputElement = this._element.closest(MASS_INPUT_SELECTOR);
this.setupRecipientCategories();
@ -33,10 +33,10 @@ export class CommunicationRecipients {
}
setupRecipientCategories() {
Array.from(this.massInputElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR)).forEach(setupRecipientCategory);
Array.from(this.massInputElement.querySelectorAll(RECIPIENT_CATEGORY_SELECTOR)).forEach(this.setupRecipientCategory.bind(this));
}
removeCheckedCounter() {
_removeCheckedCounter() {
let checkedCounters = this._element.querySelectorAll(RECIPIENT_CATEGORY_CHECKED_COUNTER_SELECTOR);
checkedCounters.forEach((checkedCounter) => {
checkedCounter.innerHTML = '';
@ -46,48 +46,51 @@ export class CommunicationRecipients {
destroy() {
this._eventManager.removeAllEventListenersFromUtil();
this._eventManager.removeAllObserversFromUtil();
this.removeCheckedCounter();
this._removeCheckedCounter();
}
}
function setupRecipientCategory(recipientCategoryElement) {
const categoryCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKBOX_SELECTOR);
const categoryOptions = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_OPTIONS_SELECTOR);
if (categoryOptions) {
const categoryCheckboxes = Array.from(categoryOptions.querySelectorAll('[type="checkbox"]'));
const toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
// setup category checkbox to toggle all child checkboxes if changed
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
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) {
const toggleAllEvent = new EventWrapper(EVENT_TYPE.CHANG, (() => {
setupRecipientCategory(recipientCategoryElement) {
const categoryCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_CHECKBOX_SELECTOR);
const categoryOptions = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_OPTIONS_SELECTOR);
if (categoryOptions) {
const categoryCheckboxes = Array.from(categoryOptions.querySelectorAll('[type="checkbox"]'));
const toggleAllCheckbox = recipientCategoryElement.querySelector(RECIPIENT_CATEGORY_TOGGLE_ALL_SELECTOR);
// setup category checkbox to toggle all child checkboxes if changed
const categoryToggleEvent = new EventWrapper(EVENT_TYPE.CHANGE,(() => {
categoryCheckboxes.filter(checkbox => !checkbox.disabled).forEach(checkbox => {
checkbox.checked = toggleAllCheckbox.checked;
checkbox.checked = categoryCheckbox.checked;
});
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
}).bind(this), toggleAllCheckbox);
this._eventManager.registerNewListener(toggleAllEvent);
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 => {
const individualToggleEvent = new EventWrapper(EVENT_TYPE.CHANGE, (() => {
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
updateToggleAllCheckbox(toggleAllCheckbox, categoryCheckboxes);
}).bind(this), checkbox);
this._eventManager.registerNewListener(individualToggleEvent);
});
// register change listener for toggle all checkbox
if (toggleAllCheckbox) {
const toggleAllEvent = new EventWrapper(EVENT_TYPE.CHANGE, (() => {
categoryCheckboxes.filter(checkbox => !checkbox.disabled).forEach(checkbox => {
checkbox.checked = toggleAllCheckbox.checked;
});
updateCheckedCounter(recipientCategoryElement, categoryCheckboxes);
}).bind(this), toggleAllCheckbox);
this._eventManager.registerNewListener(toggleAllEvent);
}
}
}
}