Save curried event listeners so they can be removed.

somiaj · Feb 25, 2024 · cb74c03 · cb74c03
1 parent 92f9cfc
commit cb74c03
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 37 deletions.
diff --git a/htdocs/js/AchievementList/achievementlist.js b/htdocs/js/AchievementList/achievementlist.js
@@ -1,28 +1,40 @@
 (() => {
 	// 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) element?.removeEventListener('change', event_listeners[element.id]);
+				event_listeners[element.id] = hide_errors([], elements);
+				element?.addEventListener('change', event_listeners[element.id]);
 			}
 		}
 	};
 
 	const hide_errors = (ids, elements) => {
-		return () => {
+		return function hide_errors_listener() {
 			for (const id of ids) elements.push(document.getElementById(id));
 			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 +46,11 @@
 		}
 		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]
-				)
-			);
+		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;
 	};
 

diff --git a/htdocs/js/ProblemSetList/problemsetlist.js b/htdocs/js/ProblemSetList/problemsetlist.js
@@ -1,13 +1,18 @@
 (() => {
 	// 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) element?.removeEventListener('change', event_listeners[element.id]);
+				event_listeners[element.id] = hide_errors([], elements);
+				element?.addEventListener('change', event_listeners[element.id]);
 			}
 		}
 	};
@@ -18,11 +23,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 +46,11 @@
 		}
 		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]
-				)
-			);
+		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;
 	};
 

diff --git a/htdocs/js/UserList/userlist.js b/htdocs/js/UserList/userlist.js
@@ -26,14 +26,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) element?.removeEventListener('change', event_listeners[element.id]);
+				event_listeners[element.id] = hide_errors([], elements);
+				element?.addEventListener('change', event_listeners[element.id]);
 			}
 		}
 	};
@@ -44,11 +49,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_use_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 +72,11 @@
 		}
 		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])
-			);
+		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;
 	};