feat(core events): remove_event_listener - support wildcard ids.

The id parameter can be a wildcard string, e.g. `test-*-event`, which
would match any event which starts with "test-" and ends with "-event".
The wildcard "*" can be anywhere in the string and also be used multiple
times. If no wildcard is present the search string is used for an exact
match.

Author: thet

src/core/events.js

@@ -1,3 +1,5 @@
+import utils from "./utils";
+
 // Event related methods and event factories
 
 // Event listener registration for easy-to-remove event listeners.
@@ -49,8 +51,14 @@ const add_event_listener = (el, event_type, id, cb, opts = {}) => {
  * If an id but no element is given, all event listeners for any element matching the id are removed.
  * If no element and no id are given, all event listeners are removed.
  *
+ * The id can be a wildcard string, e.g. `test-*-event`, which would match any
+ * event which starts with "test-" and ends with "-event". The wildcard "*" can
+ * be anywhere in the string and also be used multiple times. If no wildcard is
+ * present the search string is used for an exact match.
+ *
  * @param {DOM Node} [el] - The element to register the event for.
  * @param {string} [id] - A unique id under which the event is registered.
+ *                        Can be a wildcard string.
  *
  */
 const remove_event_listener = (el, id) => {
@@ -65,9 +73,10 @@ const remove_event_listener = (el, id) => {
         }
         let entries;
         if (id) {
-            // remove event listener with specific id
-            const entry = el_events.get(id);
-            entries = entry ? [[id, entry]] : [];
+            // remove event listener with matching id
+            entries = [...el_events.entries()].filter((entry) =>
+                utils.regexp_from_wildcard(id).test(entry[0])
+            );
         } else {
             // remove all event listeners of element
             entries = el_events.entries();

src/core/events.test.js

@@ -303,6 +303,41 @@ describe("core.events tests", () => {
             events.remove_event_listener();
             expect(event_listener_map.size).toBe(0);
         });
+
+        it("Remove wildcard matching event listeners.", () => {
+            const el = document.createElement("div");
+
+            // register the event handlers
+            events.add_event_listener(el, "test", "test_event_1", () => {});
+            events.add_event_listener(el, "test", "test_event_2", () => {});
+            events.add_event_listener(el, "test", "test_event_3", () => {});
+
+            events.add_event_listener(el, "test", "a_aha", () => {});
+            events.add_event_listener(el, "test", "b_aha", () => {});
+            events.add_event_listener(el, "test", "c_aha", () => {});
+
+            events.add_event_listener(el, "test", "ok_aha_ok", () => {});
+            events.add_event_listener(el, "test", "ok_bhb_ok", () => {});
+            events.add_event_listener(el, "test", "ok_chc_ok", () => {});
+
+            events.add_event_listener(el, "test", "oh_aha_ok", () => {});
+            events.add_event_listener(el, "test", "ah_bhb_ok", () => {});
+            events.add_event_listener(el, "test", "uh_chc_ok", () => {});
+
+            expect(event_listener_map.get(el).size).toBe(12);
+
+            events.remove_event_listener(el, "test_event_*");
+            expect(event_listener_map.get(el).size).toBe(9);
+
+            events.remove_event_listener(el, "*_aha");
+            expect(event_listener_map.get(el).size).toBe(6);
+
+            events.remove_event_listener(el, "ok_*_ok");
+            expect(event_listener_map.get(el).size).toBe(3);
+
+            events.remove_event_listener(el, "*h_*_ok");
+            expect(event_listener_map.get(el)).not.toBeDefined();
+        });
     });
 
     describe("2 - await pattern initialization", () => {