baseline

web/js/components/app-flash-auto-dismiss.js

@@ -0,0 +1,53 @@
+export function initFlashAutoDismiss(options = {}) {
+  const {
+    selector = '.flash-stack .notice[data-flash-timeout]',
+    defaultTimeout = 0
+  } = options;
+
+  const notices = document.querySelectorAll(selector);
+  if (!notices.length) {
+    return;
+  }
+
+  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');
+    window.setTimeout(async () => {
+      const form = notice.querySelector('form');
+      if (form) {
+        const response = await postForm(form);
+        if (!response || !response.ok) {
+          return;
+        }
+      }
+      notice.remove();
+    }, timeout);
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => initFlashAutoDismiss());
+} else {
+  initFlashAutoDismiss();
+}