@yuneta/gobj-ui 7.25.7 → 7.25.9

package/src/shell_modals.js

@@ -113,12 +113,20 @@ function maybe_apply_translator($node, opts)
  *      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 -- that
- *      toast is kept, its time starts again, and its handle is
- *      returned. 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.
+ *      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)
 {
@@ -128,12 +136,12 @@ 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__) {
-                $shown.__toast__.restart();
-                return $shown.__toast__.handle;
+                return $shown.__toast__.hold(timeout);
             }
         }
     }
@@ -145,7 +153,8 @@ function show_notification(shell, kind, message, opts)
         ["div", {class: `TOAST notification yui-notification ${yui_tint(kind)}`,
                  role: kind === "danger" ? "alert" : "status"},
             [
-                ["button", {class: "TOAST_CLOSE delete", "aria-label": t("close"), "data-i18n-aria-label": "close"}],
+                ["button", {class: "TOAST_CLOSE delete", title: t("close"), "data-i18n-title": "close",
+                    "aria-label": t("close"), "data-i18n-aria-label": "close"}],
                 ["p", {...p_attrs, class: "TOAST_MSG"}, message]
             ]
         ]
@@ -153,44 +162,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);
+        $del.addEventListener("click", close_toast);
     }
 
-    let timeout = (opts && opts.timeout != null) ? opts.timeout : 5000;
-    let restart = function() {
-        if(timeout_id) {
-            clearTimeout(timeout_id);
-            timeout_id = null;
-        }
-        if(timeout > 0) {
-            timeout_id = setTimeout(close, timeout);
-        }
-    };
-    restart();
-
-    let handle = { close };
     $note.__toast_key__ = key;
-    $note.__toast__ = {handle: handle, restart: restart};
-    return handle;
+    $note.__toast__ = {hold: hold};
+    return hold(timeout);
 }
 
 
@@ -263,7 +285,8 @@ export function yui_shell_show_modal(shell, content, opts)
                     .concat(title
                         ? [["span", {class: "MODAL_TITLE_KIND", i18n: title}, title]]
                         : [])],
-            ["button", {class: "MODAL_CLOSE yui-dialog-x", type: "button", "aria-label": t("close"), "data-i18n-aria-label": "close"},
+            ["button", {class: "MODAL_CLOSE yui-dialog-x", type: "button", title: t("close"), "data-i18n-title": "close",
+                    "aria-label": t("close"), "data-i18n-aria-label": "close"},
                 [["i", {class: "yi-xmark"}]]],
         ]];
         let body = ["div", {class: "MODAL_BODY yui-dialog-body"}, inner ? [inner] : []];
@@ -283,7 +306,8 @@ export function yui_shell_show_modal(shell, content, opts)
         if(with_close) {
             modal_children.push(
                 ["button", {class: "MODAL_CLOSE modal-close is-large",
-                            "aria-label": t("close"), "data-i18n-aria-label": "close"}]
+                            title: t("close"), "data-i18n-title": "close",
+                    "aria-label": t("close"), "data-i18n-aria-label": "close"}]
             );
         }
     }
@@ -498,7 +522,8 @@ function build_dialog(shell, message, buttons, opts)
         );
     }
     $card_children.push(
-        ["button", {class: "CONFIRM_CLOSE delete yui-confirm-x", "aria-label": t("close"), "data-i18n-aria-label": "close"}],
+        ["button", {class: "CONFIRM_CLOSE delete yui-confirm-x", title: t("close"), "data-i18n-title": "close",
+                    "aria-label": t("close"), "data-i18n-aria-label": "close"}],
         ["section", {class: "CONFIRM_BODY modal-card-body has-text-centered"},
             $body_children],
         ["footer", {class: "CONFIRM_FOOT modal-card-foot"}, $footer_children]

package/src/shell_toast_once.test.js

@@ -7,10 +7,18 @@
  *      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.
+ *
+ *      And every ✕ this module draws is a control with a NAME: a
+ *      `title` and an `aria-label`, both translatable (fourth
+ *      independent review: TOAST_CLOSE had the label only).
+ *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
-import {describe, test, expect, beforeEach} from "vitest";
+import {describe, test, expect, beforeEach, afterEach, vi} from "vitest";
 import {install_dom_double} from "../test/dom_double.js";
 
 install_dom_double();
@@ -18,6 +26,8 @@ install_dom_double();
 const {
     yui_shell_show_error,
     yui_shell_show_info,
+    yui_shell_show_modal,
+    yui_shell_confirm_danger,
 } = await import("./shell_modals.js");
 
 let shell = null;
@@ -55,10 +65,103 @@ describe("one toast per message on screen", () => {
         expect(toasts().length).toBe(1);
     });
 
-    test("the handle of the repeat closes the toast on screen", () => {
-        yui_shell_show_error(shell, "the connection dropped");
+    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);
+    });
+});
+
+describe("every close control is named", () => {
+
+    function named($b)
+    {
+        /*  The text itself is whatever the app's i18next answers (none
+         *  here); what is checked is that both are THERE and carry the
+         *  key a language change re-translates them by.  */
+        return {
+            title:      $b.getAttribute("title") !== null,
+            title_key:  $b.getAttribute("data-i18n-title"),
+            label:      $b.getAttribute("aria-label") !== null,
+            label_key:  $b.getAttribute("data-i18n-aria-label"),
+        };
+    }
+
+    const NAMED = {title: true, title_key: "close", label: true, label_key: "close"};
+
+    test("the toast's", () => {
+        yui_shell_show_error(shell, "the connection dropped");
+        expect(named(toasts()[0].querySelector(".TOAST_CLOSE"))).toEqual(NAMED);
+    });
+
+    test("a modal's, dialog or plain, and a confirmation's", () => {
+        shell.priv.layers.modal = document.createElement("div");
+        yui_shell_show_modal(shell, document.createElement("div"), {dialog: true, title: "x"});
+        yui_shell_show_modal(shell, document.createElement("div"), {});
+        yui_shell_confirm_danger(shell, "delete this column?");
+        const $closes = shell.priv.layers.modal.querySelectorAll(
+            ".MODAL_CLOSE, .CONFIRM_CLOSE");
+        expect($closes.length).toBe(3);
+        for(const $b of $closes) {
+            expect(named($b)).toEqual(NAMED);
+        }
+    });
 });