@yuneta/gobj-ui 7.25.6 → 7.25.8

package/src/shell_modals.js

@@ -111,6 +111,22 @@ function maybe_apply_translator($node, opts)
  *      Non-blocking, auto-dismiss after `opts.timeout` ms (default
  *      5000).  `opts.timeout = 0` disables auto-dismiss.
  *      Returns `{ close() }` so callers can dismiss programmatically.
+ *
+ *      ONE toast per message on screen: a string message of the same
+ *      kind as a toast still showing is not stacked under it. One
+ *      close of a transport settles every request it cut, each view
+ *      shows its failure, and the operator got a column of identical
+ *      "the connection dropped". A message built of nodes is never
+ *      merged: its text is not a key.
+ *
+ *      A repeat is still a CALLER of its own: it gets its own handle
+ *      and its own time, and the toast stays while any caller holds
+ *      it -- until every handle is closed or has timed out. Handed the
+ *      first caller's handle and timer, a repeat asking `timeout: 0`
+ *      was dismissed on the first one's timer, and closing one
+ *      caller's handle closed a toast another was still showing
+ *      (third independent review). The operator's ✕ closes it for
+ *      everybody.
  ***************************************************************/
 function show_notification(shell, kind, message, opts)
 {
@@ -120,6 +136,16 @@ function show_notification(shell, kind, message, opts)
         return { close: () => {} };
     }
 
+    let timeout = (opts && opts.timeout != null) ? opts.timeout : 5000;
+    let key = (typeof message === "string") ? `${kind}\u0000${message}` : null;
+    if(key !== null) {
+        for(let $shown of Array.from($layer.children)) {
+            if($shown.__toast_key__ === key && $shown.__toast__) {
+                return $shown.__toast__.hold(timeout);
+            }
+        }
+    }
+
     let p_attrs = (typeof message === "string")
         ? {i18n: message}
         : {};
@@ -135,34 +161,57 @@ function show_notification(shell, kind, message, opts)
     $layer.appendChild($note);
     maybe_apply_translator($note, opts);
 
-    let timeout_id = null;
+    let holders = new Set();
     let closed = false;
 
-    let close = function() {
+    let close_toast = function() {
         if(closed) {
             return;
         }
         closed = true;
-        if(timeout_id) {
-            clearTimeout(timeout_id);
-            timeout_id = null;
+        for(let holder of holders) {
+            if(holder.timeout_id) {
+                clearTimeout(holder.timeout_id);
+                holder.timeout_id = null;
+            }
         }
+        holders.clear();
         if($note.parentNode) {
             $note.parentNode.removeChild($note);
         }
     };
 
+    /*  One caller of this toast: its handle, and its time.  */
+    let hold = function(ms) {
+        let holder = {timeout_id: null};
+        let release = function() {
+            if(!holders.has(holder)) {
+                return;
+            }
+            if(holder.timeout_id) {
+                clearTimeout(holder.timeout_id);
+                holder.timeout_id = null;
+            }
+            holders.delete(holder);
+            if(holders.size === 0) {
+                close_toast();
+            }
+        };
+        holders.add(holder);
+        if(ms > 0) {
+            holder.timeout_id = setTimeout(release, ms);
+        }
+        return { close: release };
+    };
+
     let $del = $note.querySelector(".delete");
     if($del) {
-        $del.addEventListener("click", close);
-    }
-
-    let timeout = (opts && opts.timeout != null) ? opts.timeout : 5000;
-    if(timeout > 0) {
-        timeout_id = setTimeout(close, timeout);
+        $del.addEventListener("click", close_toast);
     }
 
-    return { close };
+    $note.__toast_key__ = key;
+    $note.__toast__ = {hold: hold};
+    return hold(timeout);
 }
 
 

package/src/shell_toast_once.test.js

@@ -0,0 +1,125 @@
+/***********************************************************************
+ *          shell_toast_once.test.js
+ *
+ *      A toast that says what one already on screen says is not
+ *      stacked under it: one close of the transport settles every
+ *      request it cut, each view that asked shows its failure, and
+ *      the operator got a column of identical "the connection
+ *      dropped" (low of the independent review of the 2nd round).
+ *
+ *      And a repeat is a caller of its own (third independent
+ *      review): its handle and its time are its own, and the toast
+ *      stays while any caller still holds it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeEach, afterEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+const {
+    yui_shell_show_error,
+    yui_shell_show_info,
+} = await import("./shell_modals.js");
+
+let shell = null;
+
+function toasts()
+{
+    return shell.priv.layers.notification.children;
+}
+
+beforeEach(() => {
+    shell = {priv: {layers: {notification: document.createElement("div")}}};
+});
+
+describe("one toast per message on screen", () => {
+
+    test("the same error twice is ONE toast", () => {
+        yui_shell_show_error(shell, "the connection dropped");
+        yui_shell_show_error(shell, "the connection dropped");
+        yui_shell_show_error(shell, "the connection dropped");
+        expect(toasts().length).toBe(1);
+    });
+
+    test("different messages, or kinds, still stack", () => {
+        yui_shell_show_error(shell, "the connection dropped");
+        yui_shell_show_error(shell, "the connection dropped during the write");
+        yui_shell_show_info(shell, "the connection dropped");
+        expect(toasts().length).toBe(3);
+    });
+
+    test("closing the one on screen: the next one is shown", () => {
+        const first = yui_shell_show_error(shell, "the connection dropped");
+        first.close();
+        expect(toasts().length).toBe(0);
+        yui_shell_show_error(shell, "the connection dropped");
+        expect(toasts().length).toBe(1);
+    });
+
+    test("the toast goes when EVERY handle of it is closed", () => {
+        const first = yui_shell_show_error(shell, "the connection dropped");
+        const again = yui_shell_show_error(shell, "the connection dropped");
+        again.close();
+        expect(toasts().length).toBe(1);    /*  the first still holds it  */
+        first.close();
+        expect(toasts().length).toBe(0);
+    });
+});
+
+/*
+ *  The third independent review: a repeat was handed the FIRST toast's
+ *  handle and timer. A repeat asking `timeout: 0` was dismissed on the
+ *  first one's timer, and closing one caller's handle closed the toast
+ *  another caller was still showing.
+ */
+describe("a repeat is its own caller", () => {
+
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    test("a repeat asking timeout 0 is not dismissed on the first one's timer", () => {
+        yui_shell_show_error(shell, "the connection dropped", {timeout: 1000});
+        const sticky = yui_shell_show_error(shell, "the connection dropped", {timeout: 0});
+        vi.advanceTimersByTime(5000);
+        expect(toasts().length).toBe(1);
+        sticky.close();
+        expect(toasts().length).toBe(0);
+    });
+
+    test("closing the first caller's handle leaves the repeat's toast up", () => {
+        const first = yui_shell_show_error(shell, "the connection dropped", {timeout: 0});
+        yui_shell_show_error(shell, "the connection dropped", {timeout: 3000});
+        first.close();
+        expect(toasts().length).toBe(1);
+        vi.advanceTimersByTime(3000);
+        expect(toasts().length).toBe(0);
+    });
+
+    test("the longest time wins, as a restart did", () => {
+        yui_shell_show_error(shell, "the connection dropped", {timeout: 1000});
+        vi.advanceTimersByTime(800);
+        yui_shell_show_error(shell, "the connection dropped", {timeout: 1000});
+        vi.advanceTimersByTime(500);
+        expect(toasts().length).toBe(1);
+        vi.advanceTimersByTime(500);
+        expect(toasts().length).toBe(0);
+    });
+
+    test("the operator's close takes it down for every caller", () => {
+        const first = yui_shell_show_error(shell, "the connection dropped", {timeout: 0});
+        const again = yui_shell_show_error(shell, "the connection dropped", {timeout: 0});
+        toasts()[0].querySelector(".TOAST_CLOSE").click();
+        expect(toasts().length).toBe(0);
+        first.close();
+        again.close();
+        yui_shell_show_error(shell, "the connection dropped", {timeout: 0});
+        expect(toasts().length).toBe(1);
+    });
+});