Edit File - ui-toasts.js

/**
 * UI Toasts
 */

'use strict';

(function () {
  // Bootstrap toasts example
  // --------------------------------------------------------------------
  const toastPlacementExample = document.querySelector('.toast-placement-ex'),
    toastPlacementBtn = document.querySelector('#showToastPlacement');
  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();
    }
  }
  // Placement Button click
  if (toastPlacementBtn) {
    toastPlacementBtn.onclick = function () {
      if (toastPlacement) {
        toastDispose(toastPlacement);
      }
      selectedType = document.querySelector('#selectTypeOpt').value;
      selectedPlacement = document.querySelector('#selectPlacement').value.split(' ');

toastPlacementExample.classList.add(selectedType);
      DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement);
      toastPlacement = new bootstrap.Toast(toastPlacementExample);
      toastPlacement.show();
    };
  }

// window.showToast = function (message, type = 'success') {
//   const toastContainer = document.getElementById('toastContainer');
//   const toastEl = document.createElement('div');
//   const color = config.colors[type] || config.colors.success;

//   toastEl.className = `toast bs-toast fade`;
//   toastEl.setAttribute('role', 'alert');
//   toastEl.setAttribute('aria-live', 'assertive');
//   toastEl.setAttribute('aria-atomic', 'true');
//   toastEl.style.backgroundColor = color;
//   toastEl.style.borderColor = color;

//   const toastHeader = `
//     <div class="toast-header" style="color: ${config.colors.white}; background-color: ${color}; border-color: ${color}">
//       <i class="bx bx-bell me-2"></i>
//       <div class="me-auto fw-semibold">${type.charAt(0).toUpperCase() + type.slice(1)}</div>
//       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" style="filter: invert(1)">
//       </button>
//     </div>
//   `;

//   const toastBody = `<div class="toast-body" style="color: ${config.colors.white}">${message}</div>`;
//   toastEl.innerHTML = toastHeader + toastBody;
//   toastContainer.appendChild(toastEl);

//   const toast = new bootstrap.Toast(toastEl);
//   toast.show();

//   toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
// };

})();

Kembali