Add events

mmdevcodes · Nov 30, 2022 · 9bef87f · 9bef87f
1 parent 6c3a911
commit 9bef87f
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -82,6 +82,30 @@ nav.destroy();
 | destroy        | Removes everything that the A11YNav created in the DOM    |
 | closeAllMenus  | Closes all currently opened menus                         |
 
+## Events
+
+```js
+// Example use of the 'afterOpen' event
+const navEl = document.querySelector(".a11y-nav");
+
+navEl.addEventListener("afterOpen", function (e) {
+  console.log(e.detail.menu);
+});
+
+const a11yNav = new A11YNav(navEl);
+```
+
+| Event         | Detail                              | Description                         |
+| ------------- | ----------------------------------- | ----------------------------------- |
+| init          | a11yNav                             | Fires after nav initialization      |
+| beforeOpen    | a11yNav, menu                       | Fires before menu open              |
+| afterOpen     | a11yNav, menu                       | Fires after menu open               |
+| beforeClose   | a11yNav, menu                       | Fires before menu close             |
+| afterClose    | a11yNav, menu                       | Fires after menu close              |
+| destroy       | a11yNav                             | Fires after the nav is destroyed    |
+
+Events listeners should be added before initializing the nav if possible. For example `init` will require it.
+
 ## Browser support
 
 Currently works in all browsers except IE 11 until I figure out how to correctly polyfill the UMD build.
diff --git a/index.html b/index.html
@@ -260,6 +260,28 @@ <h2>Methods</h2>
 const a11yNav = new A11YNav(document.querySelector('.a11y-nav'));
 a11yNav.destroy();
     </code></pre>
+    <h2>Events</h2>
+    <pre><code class="language-js">
+// Example use of the 'afterOpen' event
+const navEl = document.querySelector(".a11y-nav");
+
+navEl.addEventListener("afterOpen", function (e) {
+  console.log(e.detail.menu);
+});
+
+const a11yNav = new A11YNav(navEl);
+    </code></pre>
+    <pre>
+| Event         | Detail                              | Description                         |
+| ------------- | ----------------------------------- | ----------------------------------- |
+| init          | a11yNav                             | Fires after nav initialization      |
+| beforeOpen    | a11yNav, menu                       | Fires before menu open              |
+| afterOpen     | a11yNav, menu                       | Fires after menu open               |
+| beforeClose   | a11yNav, menu                       | Fires before menu close             |
+| afterClose    | a11yNav, menu                       | Fires after menu close              |
+| destroy       | a11yNav                             | Fires after the nav is destroyed    |
+    </pre>
+    <p>Events listeners should be added before initializing the nav if possible. For example `init` will require it.</p>
         </div>
         <div class="side">
             <ul class="a11y-nav rail-nav">

diff --git a/src/a11y-nav.ts b/src/a11y-nav.ts
@@ -83,6 +83,8 @@ export default class A11YNav {
     if (this.options.closeOnBlur) {
       this.nav.addEventListener("focusout", this.onBlur);
     }
+
+    this.nav.dispatchEvent(new CustomEvent("init", { detail: this }));
   }
 
   private onButtonClick(event: MouseEvent): void {
@@ -237,6 +239,15 @@ export default class A11YNav {
   }
 
   private openMenu(menu: Menu, forceNoFocus = false): void {
+    this.nav.dispatchEvent(
+      new CustomEvent("beforeOpen", {
+        detail: {
+          a11yNav: this,
+          menu,
+        },
+      })
+    );
+
     // Close all other menus on the same level
     this.menus.forEach((otherMenu) => {
       if (
@@ -266,22 +277,49 @@ export default class A11YNav {
       if (!forceNoFocus && this.options.focusOnOpen) {
         setTimeout(() => {
           menu.el.focus({
-            preventScroll: true
+            preventScroll: true,
           });
+
+          this.nav.dispatchEvent(
+            new CustomEvent("afterOpen", {
+              detail: {
+                a11yNav: this,
+                menu,
+              },
+            })
+          );
         }, this.options.duration);
       }
     } else {
       if (!forceNoFocus && this.options.focusOnOpen) {
         menu.el.focus({
-          preventScroll: true
+          preventScroll: true,
         });
+
+        this.nav.dispatchEvent(
+          new CustomEvent("afterOpen", {
+            detail: {
+              a11yNav: this,
+              menu,
+            },
+          })
+        );
       }
     }
   }
 
   private closeMenu(menu: Menu): void {
     // Skip this if it's already closed
     if (!menu.el.classList.contains("a11y-nav-active")) return;
+
+    this.nav.dispatchEvent(
+      new CustomEvent("beforeClose", {
+        detail: {
+          a11yNav: this,
+          menu,
+        },
+      })
+    );
 
     // Close all children menus currently open first
     menu.el
@@ -311,10 +349,28 @@ export default class A11YNav {
         menu.el.classList.remove("a11y-nav-active");
         menu.el.classList.remove("a11y-nav-animate-out");
         menu.el.parentElement?.classList.remove("a11y-nav-child-open");
+
+        this.nav.dispatchEvent(
+          new CustomEvent("afterClose", {
+            detail: {
+              a11yNav: this,
+              menu,
+            },
+          })
+        );
       }, this.options.duration);
     } else {
       menu.el.classList.remove("a11y-nav-active");
       menu.el.parentElement?.classList.remove("a11y-nav-child-open");
+
+      this.nav.dispatchEvent(
+        new CustomEvent("afterClose", {
+          detail: {
+            a11yNav: this,
+            menu,
+          },
+        })
+      );
     }
   }
 
@@ -407,5 +463,13 @@ export default class A11YNav {
     });
 
     this.nav.removeEventListener("focusout", this.onBlur);
+
+    this.nav.dispatchEvent(
+      new CustomEvent("destroy", {
+        detail: {
+          a11yNav: this,
+        },
+      })
+    );
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -8,5 +8,17 @@ Prism.highlightAll();
 const mainNav = document.querySelector<HTMLElement>('.main-nav');
 const railNav = document.querySelector<HTMLElement>('.rail-nav');
 
+mainNav?.addEventListener("init", ((event: CustomEvent) => {
+  console.log(event.detail)
+}) as EventListener);
+
+mainNav?.addEventListener("beforeOpen", ((event: CustomEvent) => {
+  console.log(event.detail)
+}) as EventListener);
+
+mainNav?.addEventListener("afterClose", ((event: CustomEvent) => {
+  console.log(event)
+}) as EventListener);
+
 if (mainNav) new A11YNav(mainNav);
 if (railNav) new A11YNav(railNav);