@yuneta/gobj-ui 7.23.64 → 7.23.66

package/src/c_yui_shell.js

@@ -1586,6 +1586,20 @@ function safe_id(s)
  *      drawer   { type:"drawer",   op:"toggle"|"open"|"close", menu_id? }
  *      event    { type:"event",    event, kw? }
  *      dropdown { type:"dropdown", items[] }    (toolbar-only)
+ *      link     { type:"link",     url, target? }
+ *
+ *  `link` leaves the application, so on a toolbar item and on the brand
+ *  it is rendered as a real <a href> rather than a <button>:
+ *  middle-click, open-in-new-tab and the url in the status bar are what
+ *  make a link recognisable as one, and a button that assigns
+ *  location.href has none of them.  It is also why it does not become
+ *  an FSM event -- there is no state of this application to transition;
+ *  the page is being left.  A target of "_blank" gets
+ *  rel="noopener noreferrer" for free.
+ *
+ *  INSIDE A DROPDOWN it stays a <button>, deliberately: those rows are
+ *  role="menuitemradio" in a menu, and a link is not a choice among
+ *  options.  There the dispatcher navigates.
  *
  *  Per-item `show_on` is honoured: each rendered item is wrapped with
  *  the same Bulma-helper logic as zones.
@@ -1703,6 +1717,35 @@ function badge_node(value)
     return ["span", attrs, text];
 }
 
+/************************************************************
+ *  The attributes that turn a toolbar item into a real link, or
+ *  null when this item is not one.  Answering null is what keeps
+ *  every caller's default (a <button> that dispatches an action)
+ *  exactly as it was.
+ ************************************************************/
+function toolbar_link_attrs(it)
+{
+    let action = (it && it.action) || {};
+    if(action.type !== "link") {
+        return null;
+    }
+    if(empty_string(action.url)) {
+        log_warning(
+            `C_YUI_SHELL: toolbar item '${it.id||"?"}' has action.type "link" ` +
+            `without a url`
+        );
+        return null;
+    }
+    let attrs = {href: action.url};
+    if(!empty_string(action.target)) {
+        attrs.target = action.target;
+        if(action.target === "_blank") {
+            attrs.rel = "noopener noreferrer";
+        }
+    }
+    return attrs;
+}
+
 /************************************************************
  *  Renderer for the default ("action") item kind.
  ************************************************************/
@@ -1751,13 +1794,20 @@ function build_toolbar_action_item(gobj, it)
         btn_attrs.title = tip;
         btn_attrs["data-i18n-title"] = tip;
     }
+    let link = toolbar_link_attrs(it);
+    if(link) {
+        delete btn_attrs.type;      /*  meaningless, and invalid, on an <a>  */
+        Object.assign(btn_attrs, link);
+    }
     let $item = createElement2(
-        ["button", btn_attrs, children]
+        [link? "a": "button", btn_attrs, children]
     );
-    $item.addEventListener("click", ev => {
-        ev.preventDefault();
-        handle_toolbar_action(gobj, it, $item);
-    });
+    if(!link) {
+        $item.addEventListener("click", ev => {
+            ev.preventDefault();
+            handle_toolbar_action(gobj, it, $item);
+        });
+    }
     attach_context_action(gobj, $item, it);
     return $item;
 }
@@ -1793,7 +1843,11 @@ function build_toolbar_brand_item(gobj, it)
         attrs["aria-haspopup"] = "menu";
         attrs["aria-expanded"] = "false";
     }
-    if(action_type === "") {
+    let link = toolbar_link_attrs(it);
+    if(link) {
+        tag = "a";
+        Object.assign(attrs, link);
+    } else if(action_type === "") {
         /*  Passive brand: no action — render a div so it is not
          *  keyboard-focused and screen readers don't announce a
          *  pressable control. */
@@ -1807,7 +1861,7 @@ function build_toolbar_brand_item(gobj, it)
         ["span", {class: "yui-toolbar-brand-wordmark", i18n: it.wordmark},
             it.wordmark]
     ]]);
-    if(action_type !== "") {
+    if(action_type !== "" && !link) {
         $item.addEventListener("click", ev => {
             ev.preventDefault();
             handle_toolbar_action(gobj, it, $item);
@@ -2032,6 +2086,23 @@ function handle_toolbar_action(gobj, item, $trigger)
         case "dropdown":
             toggle_toolbar_dropdown(gobj, item, action, $trigger);
             break;
+        case "link":
+            /*  Reached only from the renderers that stay buttons (avatar,
+             *  and the entries inside a dropdown panel). The anchor
+             *  renderers never come through here. */
+            if(!empty_string(action.url)) {
+                if(action.target === "_blank") {
+                    window.open(action.url, "_blank", "noopener,noreferrer");
+                } else {
+                    window.location.assign(action.url);
+                }
+            } else {
+                log_warning(
+                    `C_YUI_SHELL: toolbar item '${item.id||"?"}' has action.type ` +
+                    `"link" without a url`
+                );
+            }
+            break;
         default:
             log_warning(
                 `C_YUI_SHELL: toolbar item '${item.id||"?"}' has no/unknown action.type`

package/src/c_yui_treedb_graph.js

@@ -37,6 +37,7 @@ import {
     kw_get_dict_value,
     gobj_short_name,
     gobj_read_str_attr,
+    gobj_read_integer_attr,
     gobj_destroy,
     json_object_update,
     is_object,
@@ -80,6 +81,7 @@ import {
 import {yui_toolbar} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
+import {yui_graph_fold_items} from "./yui_graph_camera.js";
 import {
     removeChildElements,
     disableElements,
@@ -107,6 +109,8 @@ SDATA(data_type_t.DTP_LIST,     "operation_modes",  0,
 '["reading", "operation", "writing", "edition"]',
 "Available **permission** or behaviour modes. These operation modes are required to be accomplish by the graph handler (G6 child). TODO permissions must match treedb permissions."),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_treedb_tables",0, false,  "Include treedb tables"),
+SDATA(data_type_t.DTP_INTEGER,  "expand_depth",     0,  2,      "Levels of the treedb open when it loads: 1 = the roots alone, 2 = the roots and their children. Forwarded to the G6 child"),
+SDATA(data_type_t.DTP_INTEGER,  "fold_page_size",   0,  24,     "Children of one hook shown per page in the graph; a `+N` chip opens the next page. Forwarded to the G6 child"),
 
 /*---------------- User last selections  ----------------*/
 SDATA(data_type_t.DTP_STRING,   "operation_mode",   sdata_flag_t.SDF_PERSIST, "reading", "Current operation mode (internal behaviour or role). Changed by the user trough the gui."),
@@ -240,6 +244,8 @@ function mt_create(gobj)
             with_treedb_tables: priv.with_treedb_tables,
             hook_port_position: "bottom",
             fkey_port_position: "top",
+            expand_depth: gobj_read_integer_attr(gobj, "expand_depth"),
+            fold_page_size: gobj_read_integer_attr(gobj, "fold_page_size"),
         },
         gobj
     );
@@ -563,6 +569,12 @@ function make_toolbar(gobj)
             }
         }],
 
+        /*  The fold pair, the same two chevrons the JSON graph and the
+         *  lazy tree use: the graph opens folded (see the G6 child), and
+         *  these are the whole thing and the roots alone. Refresh is the
+         *  way back to the default depth.  */
+        ...yui_graph_fold_items(gobj, gobj_read_str_attr(gobj, "wide")),
+
         /*  Which colour is which topic. The port colour of a node encodes
          *  the topic it links to, which is the whole point of the graph and
          *  which nothing on screen explained. Clicking an entry focuses that
@@ -2466,6 +2478,28 @@ function ac_find_nodes(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The fold pair of the toolbar, forwarded to the G6 child,
+ *  which owns the tree.
+ ************************************************************/
+function ac_expand_all(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_EXPAND_ALL", {}, gobj);
+    }
+    return 0;
+}
+
+function ac_collapse_all(gobj, event, kw, src)
+{
+    let priv = gobj.priv;
+    if(priv.gobj_nodes_tree) {
+        gobj_send_event(priv.gobj_nodes_tree, "EV_COLLAPSE_ALL", {}, gobj);
+    }
+    return 0;
+}
+
 /************************************************************
  *  How many nodes the term matched, from the graph child. Zero with a
  *  term typed is an ANSWER and is shown; an empty box shows nothing.
@@ -2602,6 +2636,8 @@ function create_gclass(gclass_name)
             ["EV_SET_OPERATION_MODE",       ac_set_operation_mode,      null],
             ["EV_SET_FOCUS_TOPIC",          ac_set_focus_topic,         null],
             ["EV_FIND_NODES",               ac_find_nodes,              null],
+            ["EV_EXPAND_ALL",               ac_expand_all,              null],
+            ["EV_COLLAPSE_ALL",             ac_collapse_all,            null],
             ["EV_LAYOUT_AUTOSET",           ac_layout_autoset,          null],
             ["EV_TOGGLE_LEGEND",            ac_toggle_legend,           null],
             ["EV_LEGEND_TOPIC",             ac_legend_topic,            null],
@@ -2641,6 +2677,8 @@ function create_gclass(gclass_name)
         ["EV_SET_OPERATION_MODE",       0],
         ["EV_SET_FOCUS_TOPIC",          0],
         ["EV_FIND_NODES",               0],
+        ["EV_EXPAND_ALL",               0],
+        ["EV_COLLAPSE_ALL",             0],
         ["EV_FIND_RESULT",              0],
         ["EV_LAYOUT_AUTOSET",           0],
         ["EV_TOGGLE_LEGEND",            0],

package/src/shell_toolbar_helpers.js

@@ -19,14 +19,19 @@
  *                      triggers an action.type on click
  *
  *      Action types accepted on a toolbar item or on a dropdown sub-item:
- *          "navigate" | "drawer" | "event" | "dropdown"
+ *          "navigate" | "drawer" | "event" | "dropdown" | "link"
+ *
+ *      "link" is the one that leaves the application, and the one item
+ *      rendered as a real <a href> rather than a <button>.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 
 export const TOOLBAR_ITEM_KINDS = ["brand", "avatar", "connection", "action"];
-export const TOOLBAR_ACTION_TYPES = ["navigate", "drawer", "event", "dropdown"];
+export const TOOLBAR_ACTION_TYPES = [
+    "navigate", "drawer", "event", "dropdown", "link"
+];
 
 
 /************************************************************
@@ -141,6 +146,11 @@ export function validate_action(action, owner_id)
             `toolbar item '${id}' (action.type:event) requires 'event' name`
         );
     }
+    if(action.type === "link" && !_is_non_empty_string(action.url)) {
+        warnings.push(
+            `toolbar item '${id}' (action.type:link) requires 'url'`
+        );
+    }
     if(action.type === "dropdown") {
         let nested = validate_dropdown_action(action, id);
         for(let w of nested) {

package/src/shell_toolbar_helpers.test.js

@@ -203,7 +203,9 @@ test("dropdown: invalid sub-action surfaces underlying warning", () => {
  *============================================================*/
 test("kinds + action-type constants are exposed", () => {
     expect(TOOLBAR_ITEM_KINDS).toEqual(["brand", "avatar", "connection", "action"]);
-    expect(TOOLBAR_ACTION_TYPES).toEqual(["navigate", "drawer", "event", "dropdown"]);
+    expect(TOOLBAR_ACTION_TYPES).toEqual(
+        ["navigate", "drawer", "event", "dropdown", "link"]
+    );
 });
 
 
@@ -246,3 +248,55 @@ test("dropdown: non-boolean 'selected' warns", () => {
     expect(r.length).toBe(1);
     expect(r[0]).toContain("non-boolean");
 });
+
+
+/*============================================================
+ *      validate_action — link
+ *
+ *  The action that LEAVES the application. It is the only one
+ *  rendered as an <a href>, so the url is not an optional extra:
+ *  without it there is no link, only a dead control.
+ *============================================================*/
+test("validate link: ok with a url", () => {
+    let r = validate_toolbar_item({
+        id: "landing", icon: "yi-arrow-left", name: "yuneta.io",
+        action: { type: "link", url: "https://yuneta.io/" }
+    });
+    expect(r.ok).toBe(true);
+    expect(r.warnings).toEqual([]);
+});
+
+test("validate link: a target is optional", () => {
+    let r = validate_toolbar_item({
+        id: "docs",
+        action: { type: "link", url: "https://doc.yuneta.io/", target: "_blank" }
+    });
+    expect(r.ok).toBe(true);
+});
+
+test("validate link: missing url flags warning", () => {
+    let r = validate_toolbar_item({
+        id: "landing", action: { type: "link" }
+    });
+    expect(r.ok).toBe(false);
+    expect(r.warnings.join("\n")).toMatch(/requires 'url'/);
+});
+
+test("validate link: empty url counts as missing", () => {
+    let r = validate_toolbar_item({
+        id: "landing", action: { type: "link", url: "   " }
+    });
+    expect(r.ok).toBe(false);
+    expect(r.warnings.join("\n")).toMatch(/requires 'url'/);
+});
+
+test("validate link: accepted inside a dropdown too", () => {
+    let r = validate_dropdown_action({
+        type: "dropdown",
+        items: [
+            { id: "site", name: "yuneta.io",
+              action: { type: "link", url: "https://yuneta.io/" } },
+        ],
+    }, "help");
+    expect(r).toEqual([]);
+});