Simple Toast

simpleToast.js

const wrapStyle = `display: flex; justify-content: center; padding: 2rem 1.5rem; font-size: 1.4rem; color: #fff; background: rgba(0, 0, 0, 0.7); border-radius: 1.6rem; position: fixed; top: 50%; left: 50%; z-index: var(--dxm-toast-z-index); transform: translate3d(-50%, -50%, 1px);`;
const contentStyle = `display: flex; flex-direction: column; align-items: center; text-align: center;`;

const simpleToast = {
  info: (content, duration = 2) => {
    if (window.simpleToastTimer) {
      clearTimeout(window.simpleToastTimer);
    }

    const toastEleId = '__simple_toast';
    const toastInnerHTML = `<div style="${wrapStyle}"><div style="${contentStyle}">${content}</div></div>`;
    const toastEl = document.getElementById(toastEleId);

    if (toastEl) {
      toastEl.innerHTML = toastInnerHTML;
    } else {
      const newToastEl = document.createElement('div');
      newToastEl.setAttribute('id', toastEleId);
      newToastEl.innerHTML = toastInnerHTML;
      document.body.appendChild(newToastEl);
    }

    window.simpleToastTimer = setTimeout(() => {
      const curToastEl = document.getElementById(toastEleId);
      if (curToastEl) {
        curToastEl.parentNode.removeChild(curToastEl);
      }
    }, duration * 1000);
  },
};

export default simpleToast;