@yuneta/gobj-ui 5.2.0 → 5.3.0

package/src/shell_route_map.js

@@ -40,6 +40,16 @@ import i18next from "i18next";
 
 const WIN_NAME = "shell-route-map-window";
 
+/*  Reference rows — a route's second and third entry point: a drawer
+ *  entry, a toolbar SHORTCUT.  Shown by default: they are one line
+ *  each, and they are exactly what someone auditing the navigation
+ *  came to see ("which quick links does this app define?").  What was
+ *  ever noisy is the repeated SUBTREE, and that is gone for good
+ *  (dedupe_subtrees) rather than hidden behind a switch.  The toggle
+ *  stays for reading the bare structure, and remembers the choice for
+ *  this page. */
+let __show_refs__ = true;
+
 /*  Modal fallback currently open (the window flavour is a service and
  *  is found by name; the modal is not, so it is tracked here to make
  *  the second call a TOGGLE for both flavours). */
@@ -81,6 +91,16 @@ function render_node(node)
     if(node.event) {
         row.push(["span", {class: "ROUTEMAP_EVENT"}, node.event]);
     }
+    /*  A reference: this route's structure is drawn under whichever
+     *  surface owns it (the model's dedupe keeps one subtree per
+     *  route).  Still a live link — it just does not repeat the
+     *  branch. */
+    if(node.ref) {
+        row.push(["span", {class: "ROUTEMAP_REF", i18n: "shown above",
+            title: "shown above", "data-i18n-title": "shown above"},
+            "shown above"]);
+    }
+
     /*  "You are here" — the node whose route best matches the current
      *  one (marked by the model; at most one). */
     if(node.current) {
@@ -88,7 +108,8 @@ function render_node(node)
             "you are here"]);
     }
 
-    let row_class = node.current ? " ROUTEMAP_CURRENT" : "";
+    let row_class = (node.current ? " ROUTEMAP_CURRENT" : "") +
+                    (node.ref ? " ROUTEMAP_IS_REF" : "");
     let $row;
     if(node.route) {
         $row = createElement2(
@@ -113,29 +134,64 @@ function render_node(node)
  *  descendant matches (keep the ancestor path). Empty `q` shows all.
  *  Matches against the visible row text (name + route + event), so it
  *  honours the current translation. Returns whether the <li> is shown.
+ *
+ *  `show_refs` off hides the reference rows — the second and third
+ *  place a route is reachable from, which carry no structure. They are
+ *  hidden by DEFAULT: in an app with a drawer and an account menu they
+ *  are a third of the map, and what a reader comes here for is the
+ *  structure. A ref stays hidden even inside a matched subtree — an
+ *  ancestor match must not smuggle it back in — and a group left with
+ *  nothing but refs collapses with them, since a group is only ever
+ *  shown by what it contains.
  ***************************************************************/
-function filter_li($li, q, ancestor_match)
+function filter_li($li, q, ancestor_match, show_refs)
 {
     let $row = $li.querySelector(":scope > .ROUTEMAP_ROW");
     let text = $row ? ($row.textContent || "").toLowerCase() : "";
+    let hidden_ref = !show_refs &&
+        !!($row && $row.classList.contains("ROUTEMAP_IS_REF"));
     let self_match = q === "" || text.indexOf(q) >= 0;
-    let show_all = ancestor_match || self_match;
+    let show_all = (ancestor_match || self_match) && !hidden_ref;
 
     let any_child = false;
     let $ul = $li.querySelector(":scope > ul");
     if($ul) {
         let kids = $ul.children;
         for(let i = 0; i < kids.length; i++) {
-            if(filter_li(kids[i], q, show_all)) {
+            if(filter_li(kids[i], q, show_all, show_refs)) {
+                any_child = true;
+            }
+        }
+    }
+
+    let is_group = !!($row && $row.classList.contains("ROUTEMAP_STRUCT"));
+    let had_children = !!($ul && $ul.children.length);
+
+    /*  Hiding references removes NOISE, never a navigation surface.  A
+     *  whole menu whose entries are all references — a drawer that
+     *  reaches the same routes as the primary nav — would otherwise
+     *  vanish heading and all, and the map would be quietly lying about
+     *  what the app has.  So when hiding would empty a group, its
+     *  entries are shown anyway: one line each, still without the
+     *  repeated subtree, which is the part that was actually noisy. */
+    if(is_group && had_children && !any_child && !show_refs) {
+        let kids = $ul.children;
+        for(let i = 0; i < kids.length; i++) {
+            if(filter_li(kids[i], q, show_all, true)) {
                 any_child = true;
             }
         }
     }
 
-    let visible = show_all || any_child;
+    /*  A group is only ever shown by what it contains.  While a search
+     *  is running its own heading may still match — a query that finds
+     *  a name must not come back empty. */
+    let visible = (is_group && had_children)
+        ? (any_child || (q !== "" && self_match))
+        : ((show_all || any_child) && !hidden_ref);
     $li.style.display = visible ? "" : "none";
     if($row) {
-        $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match);
+        $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match && visible);
     }
     return visible;
 }
@@ -147,13 +203,23 @@ function filter_li($li, q, ancestor_match)
  *  on a resting-route change.  `on_jump()` closes the host for the
  *  one click that navigates nowhere (the current route).
  ***************************************************************/
-function build_body(shell, t, on_jump)
+function build_body(shell, t)
 {
     let map = yui_shell_nav_map(shell);
-    let children = [
-        {label: "toolbar", icon: "", route: "", event: "",
-         kind: "group", children: map.toolbar}
-    ].concat(map.nav);
+
+    /*  STRUCTURE FIRST.  The nav leads, then the toolbar, then the
+     *  route-table leftovers.  The toolbar used to come first, which
+     *  put a shortcut ("Go to Cards", an account-menu entry) above the
+     *  section it points at: with one subtree per route the shortcut
+     *  renders as a reference, so the first /cards a reader met had no
+     *  tree under it and the real one was thirty rows down.  It also
+     *  made the reference's own "shown above" a lie — the owner was
+     *  BELOW it.  Leading with the structure fixes both. */
+    let children = [].concat(map.nav);
+    if(Array.isArray(map.toolbar) && map.toolbar.length) {
+        children.push({label: "toolbar", icon: "", route: "", event: "",
+            kind: "group", children: map.toolbar});
+    }
     /*  Routes declared only in the route table (config.shell.routes)
      *  that no menu/toolbar item points at — root "/", URL-only action
      *  routes.  Rendered last, as their own group. */
@@ -197,15 +263,33 @@ function build_body(shell, t, on_jump)
         ["span", {class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden"},
             [$count_n, ["span", {i18n: "matches"}, "matches"]]]
     );
+    /*  References are hidden by default and revealed by this toggle.
+     *  Remembered for the page session (not localStorage): it is a
+     *  reading preference of the panel, not a position (ROUTING.md §3),
+     *  and it costs nothing to be back at the useful default tomorrow. */
+    let $refs_input = createElement2(
+        ["input", {class: "ROUTEMAP_REFS_INPUT", type: "checkbox"}]
+    );
+    if(__show_refs__) {
+        $refs_input.checked = true;
+    }
+    let $refs_toggle = createElement2(
+        ["label", {class: "checkbox is-size-7 ROUTEMAP_REFS_TOGGLE",
+                   title: "show references", "data-i18n-title": "show references"},
+            [$refs_input, ["span", {class: "ml-1", i18n: "show references"},
+                "show references"]]]
+    );
+
     let $search_row = createElement2(
-        ["div", {class: "ROUTEMAP_SEARCH_ROW mb-2"}, [$search_ctrl, $count]]
+        ["div", {class: "ROUTEMAP_SEARCH_ROW mb-2"},
+            [$search_ctrl, $count, $refs_toggle]]
     );
 
-    $search.addEventListener("input", function() {
+    let apply_filter = function() {
         let q = ($search.value || "").trim().toLowerCase();
         let $root_li = $tree.querySelector(".ROUTEMAP_ROOT > li");
         if($root_li) {
-            filter_li($root_li, q, false);
+            filter_li($root_li, q, false, __show_refs__);
         }
         if(q === "") {
             $count.classList.add("is-hidden");
@@ -213,8 +297,24 @@ function build_body(shell, t, on_jump)
             $count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
             $count.classList.remove("is-hidden");
         }
+    };
+
+    $search.addEventListener("input", apply_filter);
+    $refs_input.addEventListener("change", function() {
+        __show_refs__ = !!$refs_input.checked;
+        apply_filter();
     });
 
+    /*  Nothing to toggle in an app where every route is reachable from
+     *  exactly one place. */
+    if($tree.querySelectorAll(".ROUTEMAP_IS_REF").length === 0) {
+        $refs_toggle.classList.add("is-hidden");
+    }
+
+    /*  Apply the default (references hidden) before the panel is shown,
+     *  so it is never painted once with them and once without. */
+    apply_filter();
+
     let $body = createElement2(
         ["div", {class: "C_YUI_SHELL_ROUTEMAP ROUTEMAP_BODY"}, [
             ["p", {class: "ROUTEMAP_HINT is-size-7 mb-2", i18n: "site map hint"},
@@ -251,34 +351,85 @@ function build_body(shell, t, on_jump)
         });
     }
 
-    /*  A route link jumps there NATIVELY (browser push + hashchange —
-     *  no preventDefault): a resting-route change then closes this
-     *  window/modal through the shell's transient-overlay drain, which
-     *  is deterministic (the old close-then-deferred-navigate raced the
-     *  dismissal's history.back() and could land back where it
-     *  started).  A subpath or action-route jump keeps the map open —
-     *  it doubles as a navigation panel.  Clicking the route the user
-     *  is ALREADY on navigates nowhere: close the host instead.
+    /*  A route link jumps there NATIVELY (browser push + hashchange, no
+     *  preventDefault) and the map STAYS OPEN — every row, not just the
+     *  subpath ones.  It is a navigation panel: the user opens it to
+     *  move around, and having half the rows close it under them made
+     *  the same gesture mean two different things.  The window is
+     *  either dock-managed or registered with `keep_on_navigate`, so
+     *  the shell's transient-overlay drain leaves it alone.
      *  Action nodes (no route) are documentation only and do not fire. */
-    $body.addEventListener("click", function(ev) {
-        let $link = ev.target && ev.target.closest &&
-            ev.target.closest(".ROUTEMAP_LINK");
-        if(!$link) {
+
+    /*  "You are here" has to follow the url now that the panel outlives
+     *  the navigation, or it would keep pointing at where the user was
+     *  when they opened it.  Self-detaching: the panel's DOM is owned by
+     *  the window/modal that hosts it, and this helper has no hook into
+     *  their teardown — once the body leaves the document the listener
+     *  retires itself instead of leaking one per open. */
+    let on_hash = function() {
+        if(typeof document === "undefined" || !$body.isConnected) {
+            if(typeof window !== "undefined") {
+                window.removeEventListener("hashchange", on_hash);
+            }
             return;
         }
-        let href = $link.getAttribute("href");
-        if(href && typeof window !== "undefined" &&
-                window.location.hash === href &&
-                typeof on_jump === "function") {
-            ev.preventDefault();
-            on_jump();
-        }
-    });
+        mark_current_row($body, window.location.hash, t);
+    };
+    if(typeof window !== "undefined") {
+        window.addEventListener("hashchange", on_hash);
+    }
 
     refresh_language($body, t);
     return $body;
 }
 
+/***************************************************************
+ *  Move the "you are here" mark to the row that best matches
+ *  `hash`: an exact route wins, else the LONGEST declared route
+ *  that is a path-prefix of it (the base view of a deep subpath
+ *  position).  Same rule as the model's mark_current(), applied
+ *  to the rendered rows so the open panel stays truthful.
+ ***************************************************************/
+function mark_current_row($body, hash, t)
+{
+    let route = String(hash || "").replace(/^#/, "");
+    let $best = null;
+    let best_len = -1;
+
+    for(let $a of $body.querySelectorAll(".ROUTEMAP_LINK")) {
+        let r = String($a.getAttribute("href") || "").replace(/^#/, "");
+        if(!r) {
+            continue;
+        }
+        if(r === route) {
+            $best = $a;
+            break;
+        }
+        if(route.indexOf(r + "/") === 0 && r.length > best_len) {
+            $best = $a;
+            best_len = r.length;
+        }
+    }
+
+    for(let $marked of $body.querySelectorAll(".ROUTEMAP_CURRENT")) {
+        $marked.classList.remove("ROUTEMAP_CURRENT");
+    }
+    if(!$best) {
+        return;
+    }
+    $best.classList.add("ROUTEMAP_CURRENT");
+
+    /*  One badge, moved — never a second one left behind on the row the
+     *  user came from. */
+    let $badge = $body.querySelector(".ROUTEMAP_HERE");
+    if(!$badge) {
+        $badge = createElement2(
+            ["span", {class: "ROUTEMAP_HERE", i18n: "you are here"},
+                t ? t("you are here") : "you are here"]);
+    }
+    $best.appendChild($badge);
+}
+
 
 /***************************************************************
  *  Show the site map. Toggles: a second call closes the open one.
@@ -305,11 +456,7 @@ export function yui_shell_show_route_map(shell, opts)
     /*  Preferred: a resizable, maximisable floating window. */
     if(gclass_find_by_name("C_YUI_WINDOW") !== null) {
         let win_ref = {gobj: null};
-        let $body = build_body(shell, t, function() {
-            if(win_ref.gobj && is_gobj(win_ref.gobj)) {
-                gobj_send_event(win_ref.gobj, "EV_CLOSE_WINDOW", {}, shell);
-            }
-        });
+        let $body = build_body(shell, t);
         let $parent = yui_shell_popup_layer(shell) ||
             (typeof document !== "undefined" &&
                 document.getElementById("top-layer")) || null;
@@ -328,7 +475,13 @@ export function yui_shell_show_route_map(shell, opts)
             title:      "site map",
             icon:       "yi-bars",
             body:       $body,
-            manager:    null
+            /*  A workspace surface, not a thing floating over one view:
+             *  it joins the dock when the app has one (minimise, restore,
+             *  focus like any other window).  Without a dock it stays a
+             *  floating overlay, and `keep_on_navigate` gives it the same
+             *  survives-navigation behaviour there. */
+            manager:    gobj_find_service("__window_manager__", false),
+            keep_on_navigate: true
         }, shell);
         if(!win) {
             log_error("C_YUI_SHELL: cannot create the site-map window");
@@ -342,11 +495,7 @@ export function yui_shell_show_route_map(shell, opts)
 
     /*  Fallback: a modal (no C_YUI_WINDOW registered). */
     let modal_ref = {modal: null};
-    let $body = build_body(shell, t, function() {
-        if(modal_ref.modal && typeof modal_ref.modal.close === "function") {
-            modal_ref.modal.close();
-        }
-    });
+    let $body = build_body(shell, t);
     modal_ref.modal = yui_shell_show_modal(shell, $body, {
         dialog:        true,
         logical_class: "ROUTEMAP_SHEET",

package/src/yui_dev.js

@@ -715,7 +715,7 @@ function render_full(e)
     let payload = full_sections(e.kw ? e.kw : e.jn);
     let text;
     try {
-        text = JSON.stringify(payload, null, 2);
+        text = JSON.stringify(payload, null, 4);
     } catch(err) {
         text = String(payload);
     }
@@ -1021,7 +1021,7 @@ function info_log(level, msg, hora)
         let text;
         if(lvl === "json") {
             try {
-                text = JSON.stringify(msg, null, 2);
+                text = JSON.stringify(msg, null, 4);
             } catch(e) {
                 text = String(msg);
             }
@@ -1248,7 +1248,7 @@ function traffic_to_text()
         out.push(head);
         let payload = e.kw ? e.kw : e.jn;
         try {
-            out.push(JSON.stringify(payload, null, 2));
+            out.push(JSON.stringify(payload, null, 4));
         } catch(err) {
             out.push(String(payload));
         }

package/src/yui_icons.css

@@ -336,3 +336,16 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29l0-320c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241l0-145c0-17.7-14.3-32-32-32S0 78.3 0 96L0 416c0 17.7 14.3 32 32 32s32-14.3 32-32l0-145 11.5 9.6 192 160z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29l0-320c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241l0-145c0-17.7-14.3-32-32-32S0 78.3 0 96L0 416c0 17.7 14.3 32 32 32s32-14.3 32-32l0-145 11.5 9.6 192 160z'/%3E%3C/svg%3E");
 }
+
+/*  yi-bolt / yi-droplet: hand-drawn masks.  Added for the node-tree
+ *  demo, but they earn their place in the set on their own: energy and
+ *  water are two of the meter families the AMR apps read.            */
+.yi-bolt::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M300 0 60 288l140 0-50 224 240-288-140 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M300 0 60 288l140 0-50 224 240-288-140 0z'/%3E%3C/svg%3E");
+}
+
+.yi-droplet::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 0C192 0 48 176 48 304a144 144 0 1 0 288 0C336 176 192 0 192 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 0C192 0 48 176 48 304a144 144 0 1 0 288 0C336 176 192 0 192 0z'/%3E%3C/svg%3E");
+}