Merge pull request #355 from Oksydan/alert-toast-changes

Alert toast changes - rewrite to bootstrap Toast component

Author: Oksydan

_dev/css/theme/components/_index.scss

@@ -8,4 +8,3 @@
 @import "search/index";
 @import "page-loader/index";
 @import "links-list/index";
-@import "alert-toast/index";

_dev/css/theme/components/alert-toast/_alert-toast-stack.scss

@@ -0,0 +1,4 @@
+
+.toast-container {
+  width: rem-calc(250px);
+}

_dev/css/theme/components/alert-toast/_alert-toast.scss

@@ -1,4 +1,5 @@
 import { parseToHtml } from '../../utils/DOM/DOMHelpers';
+import { one } from '../../utils/event/eventHandler';
 
 let id = 0;
 
@@ -29,14 +30,18 @@ const useAlertToast = (params = {}) => {
   /**
    * Builds the template for an individual toast.
    * @param {string} text - The text content of the toast.
-   * @param {string} type - The type of toast ('info', 'success', 'danger', 'warning').
+   * @param {string|null} type - The type of toast ('info', 'success', 'danger', 'warning').
    * @param {string} toastId - The unique ID for the toast element.
    * @returns {HTMLElement} - The constructed toast element.
    */
   const buildToastTemplate = (text, type, toastId) => parseToHtml(`
-    <div class="alert-toast alert-toast--${type} d-none" id=${toastId}>
-      <div class="alert-toast__content">
-        ${text}
+    <div class="toast ${type ? `text-bg-${type}` : ''}" id=${toastId}>
+      <div class="d-flex">
+        <div class="toast-body">
+          ${text}
+        </div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
+        </button>
       </div>
     </div>
   `);
@@ -46,7 +51,7 @@ const useAlertToast = (params = {}) => {
    * @returns {HTMLElement} - The constructed toast stack container element.
    */
   const buildToastStackTemplate = () => parseToHtml(`
-    <div id="${stackTemplateId}" class="alert-toast-stack">
+    <div id="${stackTemplateId}" class="toast-container p-3 top-0 end-0 position-fixed">
     </div>
   `);
 
@@ -64,27 +69,13 @@ const useAlertToast = (params = {}) => {
     return getElement();
   };
 
-  /**
-   * Hides a toast element.
-   * @param {HTMLElement} toast - The toast element to hide.
-   */
-  const hideToast = (toast) => {
-    toast.classList.remove('show');
-
-    const hideDuration = (parseFloat(window.getComputedStyle(toast).transitionDuration)) * 1000;
-
-    setTimeout(() => {
-      toast.remove();
-    }, hideDuration);
-  };
-
   /**
    * Displays a toast with the given text, type, and optional timeout duration.
    * @param {string} text - The text content of the toast.
-   * @param {string} type - The type of toast ('info', 'success', 'danger', 'warning').
+   * @param {string|null} type - The type of toast ('info', 'success', 'danger', 'warning').
    * @param {number|boolean} [timeOut=false] - Optional timeout duration for the toast.
    */
-  const showToast = (text, type, timeOut = false) => {
+  const showToast = (text, type = null, timeOut = false) => {
     const toastId = getId();
     const toast = buildToastTemplate(text, type, toastId);
     const toastStack = getToastStackTemplate();
@@ -94,15 +85,17 @@ const useAlertToast = (params = {}) => {
 
     const toastInDOM = document.querySelector(`#${toastId}`);
 
-    toastInDOM.classList.remove('d-none');
+    const instance = window.bootstrap.Toast.getOrCreateInstance(toastInDOM, {
+      autohide: true,
+      animation: true,
+      delay: timeOut,
+    });
 
-    setTimeout(() => {
-      toastInDOM.classList.add('show');
-    }, 10);
+    instance.show();
 
-    toastInDOM.dataset.timeoutId = setTimeout(() => {
-      hideToast(toastInDOM);
-    }, timeOut);
+    one(toastInDOM, 'hidden.bs.toast', () => {
+      toastInDOM.remove();
+    });
   };
 
   /**

_dev/css/theme/components/alert-toast/_index.scss

@@ -1,9 +1,9 @@
 import EventEmitter from 'events';
 
 import './windowExpose';
+import './components/dynamic-bootstrap-components';
 import './core/index';
 import './vendors/index';
-import './components/dynamic-bootstrap-components';
 import bsCustomFileInput from 'bs-custom-file-input';
 import './components/header/index';
 import './components/customer/index';

_dev/css/theme/override/bootstrap/_toast.scss

@@ -75,8 +75,6 @@ const useFunctionCallstackMap = (key) => {
       callbackMap.set(key, new Map());
     }
 
-    callbackMap.set(key, new Map());
-
     const functionsCallMap = callbackMap.get(key);
     const currentCallbacks = functionsCallMap.get(elementKey) || [];
     const callbacks = [...currentCallbacks, callback];