https://www.tul-laval.com/modules/ratpdev/rdds/components/molecules/tiny-popin/tiny-popin.js?tm8j6f

1/**
2 * @file tiny-overlay.js
3 *
4 * JS File to clear the search input field.
5 */
6(function (Drupal, once) {
7  const openSelector = "[data-open-target]";
8  const tinyPopinsSelector = '.js--tiny-popin';
9
10  /**
11   * @Behavior
12   *
13   * Clear the search input field when the clear button is clicked.
14   */
15  Drupal.behaviors.tinyPopin = {
16    attach(context) {
17      // We need to prevent event propagation on popin.
18      // If we not, popin will be closed when a click occurs inside the popin.
19      context.querySelectorAll(tinyPopinsSelector).forEach(function (element) {
20        element.addEventListener("click", function (event) {
21          event.stopPropagation();
22        });
23      });
24      // We need to prevent event propagation on open elements to allow outside popin click.
25      context.querySelectorAll(openSelector).forEach(function (element) {
26        const targetId = element.getAttribute("aria-controls");
27        element.addEventListener("click", function (event) {
28          context.querySelectorAll(tinyPopinsSelector).forEach(function (popinElement) {
29            if (popinElement.id === targetId) {
30              event.stopPropagation();
31            }
32          });
33        });
34      });
35
36      /**
37       * Close tiny popin instances.
38       */
39      function closeTinyPopin(tinyPopins) {
40        tinyPopins.forEach(function (tinyPopin) {
41          if (tinyPopin.getAttribute("aria-hidden") === "false") {
42            tinyPopin.setAttribute("aria-hidden", "true");
43          }
44        });
45      }
46
47      // Close all popins on outside popins click.
48      once("closeTinyPopinOnClick", "body").forEach((element) => {
49        const tinyPopins = element.querySelectorAll(tinyPopinsSelector);
50        element.addEventListener("click", function () {
51          closeTinyPopin(tinyPopins);
52        });
53        element.addEventListener("keydown", function (event) {
54          if (event.key === "Escape" || event.key === "Esc") {
55            closeTinyPopin(tinyPopins);
56          }
57        });
58      });
59
60      // If a search is cleared inside the overlay, close the overlay.
61      context.addEventListener("searchCleared", (event) => {
62        context.querySelectorAll(tinyPopinsSelector).forEach(function (tinyPopin) {
63          if (tinyPopin.contains(event.detail.target)) {
64            tinyPopin.setAttribute("aria-hidden", "true");
65          }
66        });
67      });
68    },
69  };
70})(Drupal, once);