fixup! Feat(web): Introduce Toast JavaScript plugin #DS-1115

lmc-eu · Mar 6, 2024 · 76e2ce2 · 76e2ce2
1 parent 19f440b
commit 76e2ce2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
@@ -1,21 +1,26 @@
 import BaseComponent from './BaseComponent';
-import { ATTRIBUTE_ARIA_EXPANDED, CLASS_NAME_HIDDEN, CLASS_NAME_OPEN, CLASS_NAME_TRANSITIONING } from './constants';
+import {
+  ATTRIBUTE_ARIA_EXPANDED,
+  ATTRIBUTE_DATA_TARGET,
+  CLASS_NAME_HIDDEN,
+  CLASS_NAME_OPEN,
+  CLASS_NAME_TRANSITIONING,
+} from './constants';
 import { enableDismissTrigger, enableToggleTrigger, executeAfterTransition, SpiritConfig } from './utils';
-import { EventHandler, SelectorEngine } from './dom';
+import { EventHandler } from './dom';
 
 const NAME = 'toast';
-const DATA_KEY = 'tooltip';
+const DATA_KEY = `${NAME}`;
 const EVENT_KEY = `.${DATA_KEY}`;
 
 const EVENT_HIDE = `hide${EVENT_KEY}`;
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
 const EVENT_SHOW = `show${EVENT_KEY}`;
 const EVENT_SHOWN = `shown${EVENT_KEY}`;
 
-const SELECTOR_DATA_DISMISS = '[data-spirit-dismiss]';
-
 class Toast extends BaseComponent {
   isShown: boolean;
+  triggers: NodeListOf<Element>;
 
   static get NAME() {
     return NAME;
@@ -24,10 +29,18 @@ class Toast extends BaseComponent {
   constructor(element: SpiritElement, config?: SpiritConfig) {
     super(element, config);
 
+    this.triggers = this.getTrigger();
+
     this.isShown =
       this.element.classList.contains(CLASS_NAME_OPEN) || !this.element.classList.contains(CLASS_NAME_HIDDEN);
   }
 
+  getTrigger() {
+    const id = this.element && (this.element.getAttribute('id') as string);
+
+    return document.querySelectorAll(`[${ATTRIBUTE_DATA_TARGET}="#${id}"]`);
+  }
+
   show() {
     if (this.isShown) {
       return;
@@ -38,8 +51,9 @@ class Toast extends BaseComponent {
       return;
     }
 
-    const dismissEl = SelectorEngine.findOne(SELECTOR_DATA_DISMISS, this.element);
-    dismissEl?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');
+    this.triggers.forEach((element) => {
+      element?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'true');
+    });
 
     this.element.classList.remove(CLASS_NAME_HIDDEN);
     this.element.classList.add(CLASS_NAME_OPEN);
@@ -63,8 +77,9 @@ class Toast extends BaseComponent {
       return;
     }
 
-    const dismissEl = SelectorEngine.findOne(SELECTOR_DATA_DISMISS, this.element);
-    dismissEl?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');
+    this.triggers.forEach((element) => {
+      element?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');
+    });
 
     this.element.classList.remove(CLASS_NAME_OPEN);
     this.element.classList.add(CLASS_NAME_HIDDEN);

diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts
@@ -2,6 +2,7 @@ export const ATTRIBUTE_ARIA_EXPANDED = 'aria-expanded';
 export const ATTRIBUTE_ARIA_CONTROLS = 'aria-controls';
 export const ATTRIBUTE_DATA_TARGET = 'data-spirit-target';
 export const ATTRIBUTE_DATA_TOGGLE = 'data-spirit-toggle';
+export const ATTRIBUTE_DATA_DISMISS = 'data-spirit-dismiss';
 
 export const CLASS_NAME_HIDDEN = 'is-hidden';
 export const CLASS_NAME_OPEN = 'is-open';