breadcrumb-the-shire/web/js/components/app-flash-auto-dismiss.js

/**
 * Auto-dismisses flash notices after their data-flash-timeout expires.
 */
import { resolveHost } from '../core/app-dom.js';

export function initFlashAutoDismiss(root = document, options = {}) {
  const {
    selector = '.flash-stack .notice[data-flash-timeout]',
    defaultTimeout = 0,
  } = options;
  const host = resolveHost(root);
  const notices = Array.from(host.querySelectorAll(selector));
  if (!notices.length) {
    return { destroy: () => {} };
  }

  const timers = [];
  let destroyed = false;

  const postForm = async (form) => {
    const action = form.getAttribute('action');
    if (!action) {
      return null;
    }
    const body = new URLSearchParams(new FormData(form));
    return fetch(action, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'fetch',
      },
      body,
    });
  };

  notices.forEach((notice) => {
    const timeout = Number.parseInt(
      notice.dataset.flashTimeout || `${defaultTimeout}`,
      10
    );
    if (!timeout || timeout <= 0) {
      return;
    }
    notice.style.setProperty('--flash-timeout', `${timeout}ms`);
    notice.classList.add('flash-timed');

    const timer = window.setTimeout(async () => {
      if (destroyed) {
        return;
      }
      const form = notice.querySelector('form');
      if (form) {
        const response = await postForm(form);
        if (!response || !response.ok) {
          return;
        }
      }
      notice.remove();
    }, timeout);
    timers.push(timer);
  });

  const destroy = () => {
    destroyed = true;
    timers.forEach((timer) => window.clearTimeout(timer));
  };

  return { destroy };
}