dynamic bootstrap 5 toast

dynamically-bootstrap5-toast.md

Dynamiclly bootstrap 5 toast

ui-toasts.js

/**
 * UI Toasts
 */

"use strict";

// Bootstrap toasts example
// --------------------------------------------------------------------
// window.onload = (event) => {
const baseEl = `<div class="bs-toast toast toast-placement-ex m-2" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <span class="toast-icon">
                            <i class="bx bx-bell me-2"></i>
                        </span>
                        <div class="me-auto fw-semibold toast-title">Bootstrap</div>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body toast-message">Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.</div>
                </div>`;

// document.body.innerHTML += baseEl;
document.querySelector(".content-toast").innerHTML += baseEl;

// placement position
const TopLeft = "top-0 start-0";
const TopCenter = "top-0 start-50 translate-middle-x";
const TopRight = "top-0 end-0";
const MiddleLeft = "top-50 start-0 translate-middle-y";
const MiddleCenter = "top-50 start-50 translate-middle";
const MiddleRight = "top-50 end-0 translate-middle-y";
const BottomLeft = "bottom-0 start-0";
const BottomCenter = "bottom-0 start-50 translate-middle-x";
const BottomRight = "bottom-0 end-0";

const toastPlacementExample = document.querySelector(".toast-placement-ex");
const toastPlacementBtn = document.querySelector("#showToastPlacement");
const toastTitle = document.querySelector(".toast-title");
const toastMessage = document.querySelector(".toast-message");
const toastIcon = document.querySelector(".toast-icon");
let selectedType, selectedPlacement, toastPlacement;

// Dispose toast when open another
function toastDispose(toast) {
    if (toast && toast._element !== null) {
        if (toastPlacementExample) {
            toastPlacementExample.classList.remove(selectedType);
            DOMTokenList.prototype.remove.apply(
                toastPlacementExample.classList,
                selectedPlacement
            );
        }
        toast.dispose();
    }
}

function bootstrapToast(selectedType, title, message, icon, position) {
    if (toastPlacement) {
        toastDispose(toastPlacement);
    }

    selectedPlacement = position ? position.split(" ") : TopCenter.split(" ");

    toastPlacementExample.classList.add(selectedType);
    DOMTokenList.prototype.add.apply(
        toastPlacementExample.classList,
        selectedPlacement
    );

    toastTitle.textContent = title;
    toastMessage.textContent = message;
    if (icon) toastIcon.innerHTML = icon;

    toastPlacement = new bootstrap.Toast(toastPlacementExample, {
        autohide: true,
        delay: 3000,
    });
    toastPlacement.show();
}

// Parent function
const Toast = {
    primary(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-primary", title, message, icon, position);
    },
    secondary(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-secondary", title, message, icon, position);
    },
    success(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-success", title, message, icon, position);
    },
    danger(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-danger", title, message, icon, position);
    },
    warning(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-warning", title, message, icon, position);
    },
    info(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-info", title, message, icon, position);
    },
    dark(title = null, message = null, icon = null, position = null) {
        bootstrapToast("bg-dark", title, message, icon, position);
    },
};

How to use

<div class="content-toast"></div>

  <script src="../js/ui-toasts.js"></script>
  
  <script>
    Toast.primary('Sukses', 'Pesan berhasil terkirim!', null, TopCenter)
  </script>