Feat(web): Introduce bulk Toast queue clearing

lmc-eu · May 2, 2024 · 3787a0b · 3787a0b
1 parent ac409c5
commit 3787a0b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 21 deletions.
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
@@ -40,7 +40,12 @@ const SELECTOR_CLOSE_BUTTON_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="close-
 const SELECTOR_DISMISS_TRIGGER_ELEMENT = `[${ATTRIBUTE_DATA_DISMISS}="${NAME}"]`;
 const SELECTOR_MESSAGE_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="message"]`;
 
-export const SLOWEST_TRANSITION_PROPERTY_NAME = 'max-height'; // Keep in sync with transitions in `scss/Toast/_theme.scss`.
+// Keep in sync with transitions in `scss/Toast/_theme.scss`.
+export const SLOWEST_TRANSITION_PROPERTY_NAME = {
+  css: 'max-height',
+  js: 'maxHeight',
+};
+const FALLBACK_TRANSITION_PROPERTY_NAME = 'opacity';
 
 type Color = keyof typeof COLOR_ICON_MAP;
 
@@ -77,6 +82,13 @@ class Toast extends BaseComponent {
       : false;
   }
 
+  getAwaitedTransitionPropertyName(): CSSProperties {
+    // @ts-expect-error -- TS7015: Element implicitly has an any type because index expression is not of type number.
+    return parseInt(getComputedStyle(this.element)[SLOWEST_TRANSITION_PROPERTY_NAME.js], 10) > 0
+      ? SLOWEST_TRANSITION_PROPERTY_NAME.css
+      : FALLBACK_TRANSITION_PROPERTY_NAME;
+  }
+
   getContainer(): SpiritElement {
     const config = this.config as Config;
 
@@ -238,7 +250,7 @@ class Toast extends BaseComponent {
         this.element.classList.remove(CLASS_NAME_TRANSITIONING);
       },
       true,
-      SLOWEST_TRANSITION_PROPERTY_NAME as CSSProperties,
+      this.getAwaitedTransitionPropertyName(),
     );
 
     this.isShown = true;
@@ -258,21 +270,24 @@ class Toast extends BaseComponent {
       element?.setAttribute(ATTRIBUTE_ARIA_EXPANDED, 'false');
     });
 
-    this.element.classList.remove(CLASS_NAME_VISIBLE);
-    this.element.classList.add(CLASS_NAME_HIDDEN);
-    this.element.classList.add(CLASS_NAME_TRANSITIONING);
+    // Use the visibility style to check if the toast is already visually hidden
+    const { visibility } = getComputedStyle(this.element);
 
-    executeAfterTransition(
-      this.element,
-      () => {
-        EventHandler.trigger(this.element, Toast.eventName(EVENT_HIDDEN));
-        this.element.remove();
-      },
-      true,
-      SLOWEST_TRANSITION_PROPERTY_NAME as CSSProperties,
-    );
+    const finishHiding = () => {
+      EventHandler.trigger(this.element, Toast.eventName(EVENT_HIDDEN));
+      this.element.remove();
+      this.isShown = false;
+    };
+
+    if (visibility === 'hidden') {
+      finishHiding();
+    } else {
+      this.element.classList.remove(CLASS_NAME_VISIBLE);
+      this.element.classList.add(CLASS_NAME_HIDDEN);
+      this.element.classList.add(CLASS_NAME_TRANSITIONING);
 
-    this.isShown = false;
+      executeAfterTransition(this.element, finishHiding, true, this.getAwaitedTransitionPropertyName());
+    }
   }
 }
 

diff --git a/packages/web/src/scss/components/Toast/_Toast.scss b/packages/web/src/scss/components/Toast/_Toast.scss
@@ -134,27 +134,27 @@ $_queue-collapsed-visible-limit: 2; // 10.
 }
 
 // 9.
-.Toast--collapsible > .Toast__queue > :nth-last-child(-n + #{theme.$queue-collapse-after}) {
+.Toast--collapsible > .Toast__queue > :where(:nth-last-child(-n + #{theme.$queue-collapse-after})) {
     z-index: 1;
 }
 
 // 10.a
 .Toast--collapsible
     > .Toast__queue
-    > :nth-last-child(#{theme.$queue-collapse-after + $_queue-collapsed-visible-limit - 1}) {
+    > :where(:nth-last-child(#{theme.$queue-collapse-after + $_queue-collapsed-visible-limit - 1})) {
     scale: 0.95;
 }
 
 // 10.b
 .Toast--collapsible
     > .Toast__queue
-    > :nth-last-child(#{theme.$queue-collapse-after + $_queue-collapsed-visible-limit}) {
+    > :where(:nth-last-child(#{theme.$queue-collapse-after + $_queue-collapsed-visible-limit})) {
     opacity: 0.5;
     scale: 0.9;
 }
 
 // 10.c
-.Toast--collapsible > .Toast__queue > :nth-last-child(n + #{theme.$queue-collapse-after + 1}) {
+.Toast--collapsible > .Toast__queue > :where(:nth-last-child(n + #{theme.$queue-collapse-after + 1})) {
     --toast-bar-pointer-events: none;
 
     max-height: 0;
@@ -163,7 +163,7 @@ $_queue-collapsed-visible-limit: 2; // 10.
 // 11.
 .Toast--collapsible
     > .Toast__queue
-    > :nth-last-child(n + #{theme.$queue-collapse-after + $_queue-collapsed-visible-limit + 1}) {
+    > :where(:nth-last-child(n + #{theme.$queue-collapse-after + $_queue-collapsed-visible-limit + 1})) {
     margin-block: 0;
     visibility: hidden;
     opacity: 0;

diff --git a/packages/web/src/scss/components/Toast/dynamic-toast.mjs b/packages/web/src/scss/components/Toast/dynamic-toast.mjs
@@ -17,3 +17,25 @@ export const addDynamicToast = (event, containerId) => {
 
   console.log('Created dynamic toast with config:', config);
 };
+
+export const clearQueue = (event, containerId) => {
+  const container = document.getElementById(containerId);
+  const children = container.querySelectorAll('.ToastBar');
+
+  let cleared = 0;
+
+  children.forEach((element) => {
+    const instance = Toast.getOrCreateInstance(element);
+
+    if (instance instanceof Toast && instance?.isShown) {
+      instance?.hide();
+      cleared++;
+    }
+  });
+
+  if (cleared) {
+    console.log('Cleared toast queue of length:', cleared);
+  } else {
+    console.log('No toasts to clear.');
+  }
+};
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
@@ -135,8 +135,9 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
     <!-- Dynamic queue demo: start -->
     <script type="module">
-      import { addDynamicToast } from './dynamic-toast.mjs';
+      import { addDynamicToast, clearQueue } from './dynamic-toast.mjs';
       window.addDynamicToast = addDynamicToast;
+      window.clearQueue = clearQueue;
     </script>
 
     <form>
@@ -185,6 +186,13 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
             >
               Add
             </button>
+            <button
+              type="button"
+              class="Button Button--medium Button--secondary"
+              onclick="clearQueue(event, 'toast-example')"
+            >
+              Clear queue
+            </button>
           </div>
         </div>
       </fieldset>