Save curried event listeners so they can be removed.

somiaj · Feb 29, 2024 · b3ecaa9 · b3ecaa9
1 parent a7adea3
commit b3ecaa9
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 45 deletions.
diff --git a/htdocs/js/AchievementList/achievementlist.js b/htdocs/js/AchievementList/achievementlist.js
@@ -1,13 +1,19 @@
 (() => {
 	// Action form validation.
+	// Store event listeners so they can be removed.
+	const event_listeners = {};
+
 	const show_errors = (ids, elements) => {
 		for (const id of ids) elements.push(document.getElementById(id));
 		for (const element of elements) {
 			if (element?.id.endsWith('_err_msg')) {
 				element?.classList.remove('d-none');
 			} else {
 				element?.classList.add('is-invalid');
-				element?.addEventListener('change', hide_errors([], elements));
+				if (!(element.id in event_listeners)) {
+					event_listeners[element.id] = hide_errors([], elements);
+					element?.addEventListener('change', event_listeners[element.id]);
+				}
 			}
 		}
 	};
@@ -18,11 +24,18 @@
 			for (const element of elements) {
 				if (element?.id.endsWith('_err_msg')) {
 					element?.classList.add('d-none');
-					if (element.id === 'select_achievement_err_msg')
-						document.getElementById('achievement-table')?.removeEventListener('change', hide_errors);
+					if (element.id === 'select_achievement_err_msg' && 'achievement_table' in event_listeners) {
+						document
+							.getElementById('achievement-table')
+							?.removeEventListener('change', event_listeners.achievement_table);
+						delete event_listeners.achievement_table;
+					}
 				} else {
 					element?.classList.remove('is-invalid');
-					element?.removeEventListener('change', hide_errors);
+					if (element.id in event_listeners) {
+						element?.removeEventListener('change', event_listeners[element.id]);
+						delete event_listeners[element.id];
+					}
 				}
 			}
 		};
@@ -34,15 +47,13 @@
 		}
 		const err_msg = document.getElementById('select_achievement_err_msg');
 		err_msg?.classList.remove('d-none');
-		document
-			.getElementById('achievement-table')
-			?.addEventListener(
-				'change',
-				hide_errors(
-					['filter_select', 'edit_select', 'assign_select', 'export_select', 'score_select'],
-					[err_msg]
-				)
+		if (!('achievement_table' in event_listeners)) {
+			event_listeners.achievement_table = hide_errors(
+				['filter_select', 'edit_select', 'assign_select', 'export_select', 'score_select'],
+				[err_msg]
 			);
+			document.getElementById('achievement-table')?.addEventListener('change', event_listeners.achievement_table);
+		}
 		return false;
 	};
 
@@ -108,10 +119,11 @@
 	// Remove all error messages when changing tabs.
 	for (const tab of document.querySelectorAll('a[data-bs-toggle="tab"]')) {
 		tab.addEventListener('shown.bs.tab', () => {
-			hide_errors(
-				[],
-				document.getElementById('achievement-list')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
-			)();
+			if (Object.keys(event_listeners).length != 0)
+				hide_errors(
+					[],
+					document.getElementById('achievement-list')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
+				)();
 		});
 	}
 

diff --git a/htdocs/js/ProblemSetList/problemsetlist.js b/htdocs/js/ProblemSetList/problemsetlist.js
@@ -1,13 +1,19 @@
 (() => {
 	// Action form validation.
+	// Store event listeners so they can be removed.
+	const event_listeners = {};
+
 	const show_errors = (ids, elements) => {
 		for (const id of ids) elements.push(document.getElementById(id));
 		for (const element of elements) {
 			if (element?.id.endsWith('_err_msg')) {
 				element?.classList.remove('d-none');
 			} else {
 				element?.classList.add('is-invalid');
-				element?.addEventListener('change', hide_errors([], elements));
+				if (!(element.id in event_listeners)) {
+					event_listeners[element.id] = hide_errors([], elements);
+					element?.addEventListener('change', event_listeners[element.id]);
+				}
 			}
 		}
 	};
@@ -18,11 +24,18 @@
 			for (const element of elements) {
 				if (element?.id.endsWith('_err_msg')) {
 					element?.classList.add('d-none');
-					if (element.id === 'select_set_err_msg')
-						document.getElementById('set_table_id')?.removeEventListener('change', hide_errors);
+					if (element.id === 'select_set_err_msg' && 'set_table_id' in event_listeners) {
+						document
+							.getElementById('set_table_id')
+							?.removeEventListener('change', event_listeners.set_table_id);
+						delete event_listeners.set_table_id;
+					}
 				} else {
 					element?.classList.remove('is-invalid');
-					element?.removeEventListener('change', hide_errors);
+					if (element.id in event_listeners) {
+						element?.removeEventListener('change', event_listeners[element.id]);
+						delete event_listeners[element.id];
+					}
 				}
 			}
 		};
@@ -34,15 +47,13 @@
 		}
 		const err_msg = document.getElementById('select_set_err_msg');
 		err_msg?.classList.remove('d-none');
-		document
-			.getElementById('set_table_id')
-			?.addEventListener(
-				'change',
-				hide_errors(
-					['filter_select', 'edit_select', 'publish_filter_select', 'export_select', 'score_select'],
-					[err_msg]
-				)
+		if (!('set_table_id' in event_listeners)) {
+			event_listeners.set_table_id = hide_errors(
+				['filter_select', 'edit_select', 'publish_filter_select', 'export_select', 'score_select'],
+				[err_msg]
 			);
+			document.getElementById('set_table_id')?.addEventListener('change', event_listeners.set_table_id);
+		}
 		return false;
 	};
 
@@ -108,10 +119,11 @@
 	// Remove all error messages when changing tabs.
 	for (const tab of document.querySelectorAll('a[data-bs-toggle="tab"]')) {
 		tab.addEventListener('shown.bs.tab', () => {
-			hide_errors(
-				[],
-				document.getElementById('problemsetlist')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
-			)();
+			if (Object.keys(event_listeners) != 0)
+				hide_errors(
+					[],
+					document.getElementById('problemsetlist')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
+				)();
 		});
 	}
 

diff --git a/htdocs/js/UserList/userlist.js b/htdocs/js/UserList/userlist.js
@@ -26,14 +26,20 @@
 	}
 
 	// Action form validation.
+	// Store event listeners so they can be removed.
+	const event_listeners = {};
+
 	const show_errors = (ids, elements) => {
 		for (const id of ids) elements.push(document.getElementById(id));
 		for (const element of elements) {
 			if (element?.id.endsWith('_err_msg')) {
 				element?.classList.remove('d-none');
 			} else {
 				element?.classList.add('is-invalid');
-				element?.addEventListener('change', hide_errors([], elements));
+				if (!(element.id in event_listeners)) {
+					event_listeners[element.id] = hide_errors([], elements);
+					element?.addEventListener('change', event_listeners[element.id]);
+				}
 			}
 		}
 	};
@@ -44,11 +50,18 @@
 			for (const element of elements) {
 				if (element?.id.endsWith('_err_msg')) {
 					element?.classList.add('d-none');
-					if (element.id === 'select_user_err_msg')
-						document.getElementById('classlist-table')?.removeEventListener('change', hide_errors);
+					if (element.id === 'select_user_err_msg' && 'classlist_table' in event_listeners) {
+						document
+							.getElementById('classlist-table')
+							?.removeEventListener('change', event_listeners.classlist_table);
+						delete event_listeners.classlist_table;
+					}
 				} else {
 					element?.classList.remove('is-invalid');
-					element?.removeEventListener('change', hide_errors);
+					if (element.id in event_listeners) {
+						element?.removeEventListener('change', event_listeners[element.id]);
+						delete event_listeners[element.id];
+					}
 				}
 			}
 		};
@@ -60,12 +73,13 @@
 		}
 		const err_msg = document.getElementById('select_user_err_msg');
 		err_msg?.classList.remove('d-none');
-		document
-			.getElementById('classlist-table')
-			?.addEventListener(
-				'change',
-				hide_errors(['filter_select', 'edit_select', 'password_select', 'export_select_scope'], [err_msg])
+		if (!('classlist_table' in event_listeners)) {
+			event_listeners.classlist_table = hide_errors(
+				['filter_select', 'edit_select', 'password_select', 'export_select_scope'],
+				[err_msg]
 			);
+			document.getElementById('classlist-table')?.addEventListener('change', event_listeners.classlist_table);
+		}
 		return false;
 	};
 
@@ -120,10 +134,11 @@
 	// Remove all error messages when changing tabs.
 	for (const tab of document.querySelectorAll('a[data-bs-toggle="tab"]')) {
 		tab.addEventListener('shown.bs.tab', () => {
-			hide_errors(
-				[],
-				document.getElementById('user-list-form')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
-			)();
+			if (Object.keys(event_listeners) != 0)
+				hide_errors(
+					[],
+					document.getElementById('user-list-form')?.querySelectorAll('div[id$=_err_msg], .is-invalid')
+				)();
 		});
 	}
 })();