@yuneta/gobj-ui 2.2.4 → 2.3.0

package/src/c_yui_map.js

@@ -559,10 +559,13 @@ function onClick(gobj, e)
     const coordinates = e.features[0].geometry.coordinates.slice();
     const properties = e.features[0].properties;
 
-    const gobj_service = gobj_find_service(
-        properties.gobj_service_name,
-        true
-    );
+    /*  A marker may or may not be backed by a gobj service. Only look it up
+     *  when the feature carries a name (verbose=false: a marker without a
+     *  service is a normal case handled by the popup branch below, not an
+     *  error). gobj_find_service() would otherwise crash on undefined. */
+    const gobj_service = properties.gobj_service_name
+        ? gobj_find_service(properties.gobj_service_name, false)
+        : null;
     if(gobj_service) {
         let name = clean_name(gobj_name(gobj_service));
         let window_service_name = `window-map-${name}`;

package/src/c_yui_nav.js

@@ -12,6 +12,17 @@
  *          "drawer"     — off-canvas vertical (toggled by hamburger)
  *          "submenu"    — Bulma .menu nested under a heading
  *          "accordion"  — Bulma .menu list with collapsible group
+ *          "cards"      — grid of tappable cards (section-index landing;
+ *                         mounted as a stage view by C_YUI_SHELL when a
+ *                         primary item declares submenu.index)
+ *          "backbar"    — single "← <section>" link back to the section
+ *                         index; the mobile replacement of the tab strip
+ *                         for submenu.index sections (the shell collapses
+ *                         the secondary zone while the index is on stage)
+ *
+ *      The `show_on` attr (same expressions as the shell's zone
+ *      `show_on`) applies breakpoint visibility classes to the nav
+ *      container; build_ui re-applies them on every rebuild.
  *
  *      Each item supports:
  *          id, name, icon (CSS class or svg id), route, badge, disabled
@@ -51,13 +62,21 @@ import {
     createElement2, empty_string, is_array, is_object, is_string,
 } from "@yuneta/gobj-js";
 
+import { cards_grid_descriptor } from "./nav_cards_helpers.js";
+import {
+    BULMA_BP_ORDER,
+    breakpoints_from_expr,
+    bulma_hidden_class,
+} from "./shell_show_on.js";
+
 /***************************************************************
  *              Constants
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_NAV";
 
 const SUPPORTED_LAYOUTS = [
-    "vertical", "icon-bar", "tabs", "drawer", "submenu", "accordion"
+    "vertical", "icon-bar", "tabs", "drawer", "submenu", "accordion", "cards",
+    "backbar"
 ];
 
 /*  Decorative items have no `route` and never participate in
@@ -82,6 +101,8 @@ SDATA(data_type_t.DTP_STRING,   "layout",        0,  "vertical",   "vertical|ico
 SDATA(data_type_t.DTP_STRING,   "icon_pos",      0,  "left",       "left|right|top|bottom"),
 SDATA(data_type_t.DTP_BOOLEAN,  "show_label",    0,  true,         "Show item label next to/under the icon"),
 SDATA(data_type_t.DTP_STRING,   "level",         0,  "primary",    "primary|secondary"),
+SDATA(data_type_t.DTP_STRING,   "show_on",       0,  "",           "Breakpoint visibility expr (shell show_on syntax); empty = always"),
+SDATA(data_type_t.DTP_STRING,   "back_route",    0,  "",           "backbar layout: route of the section index the ← returns to"),
 
 SDATA(data_type_t.DTP_POINTER,  "shell",         0,  null,         "C_YUI_SHELL gobj (for navigation calls)"),
 SDATA(data_type_t.DTP_POINTER,  "$container",    0,  null,         "Root HTMLElement of this nav"),
@@ -200,12 +221,29 @@ function build_ui(gobj)
         case "drawer":     $container = render_drawer(gobj, items);   break;
         case "submenu":    $container = render_submenu(gobj, items);  break;
         case "accordion":  $container = render_accordion(gobj, items); break;
+        case "cards":      $container = render_cards(gobj, items);    break;
+        case "backbar":    $container = render_backbar(gobj);         break;
         default:           $container = render_vertical(gobj, items);
     }
     $container.setAttribute("data-nav-zone", zone);
     $container.setAttribute("data-nav-layout", layout);
     $container.classList.add("C_YUI_NAV", "yui-nav", `yui-nav-${layout}`);
 
+    /*  Breakpoint visibility (same expressions as the shell's zone
+     *  show_on).  Applied here, attr-driven, so a rebuild via
+     *  EV_SET_ITEMS re-applies it — the shell sets it only once at
+     *  creation time. */
+    let show_on = gobj_read_attr(gobj, "show_on") || "";
+    if(!empty_string(show_on) && show_on !== "*") {
+        let visible = breakpoints_from_expr(show_on);
+        for(let bp of BULMA_BP_ORDER) {
+            if(!visible[bp]) {
+                $container.classList.add(bulma_hidden_class(bp));
+            }
+        }
+        $container.setAttribute("data-show-on", show_on);
+    }
+
     /*  Accessibility: every nav root is a landmark.  For the drawer we
      *  tag the wrapper as role=dialog and the panel as role=navigation. */
     if(layout !== "drawer") {
@@ -383,6 +421,50 @@ function render_tabs(gobj, items)
     );
 }
 
+function render_cards(gobj, items)
+{
+    let show_label = gobj_read_attr(gobj, "show_label");
+    return createElement2(cards_grid_descriptor(items, show_label));
+}
+
+/************************************************************
+ *  "backbar": a single "← <section>" link back to the section
+ *  index route.  Static DOM — the active child view names itself
+ *  in its own content, so the bar only carries the way back plus
+ *  section context.  While the index itself is on stage the shell
+ *  collapses the whole secondary zone (tabs and cards never
+ *  coexist), so the bar needs no self-hiding logic.
+ ************************************************************/
+function render_backbar(gobj)
+{
+    let back_route = gobj_read_attr(gobj, "back_route") || "";
+    let label = gobj_read_attr(gobj, "nav_label") || "";
+
+    let label_attrs = {class: "yui-nav-label"};
+    if(label) {
+        label_attrs.i18n = label;
+    }
+    let a_attrs = {
+        class: "yui-nav-item yui-nav-back",
+        href: back_route ? "#" + back_route : "#",
+        "data-item-id": "__index__",
+        "data-route": back_route,
+        "aria-label": label || "back"
+    };
+    if(label) {
+        a_attrs["data-i18n-aria-label"] = label;
+    }
+    return createElement2(
+        ["div", {},
+            ["a", a_attrs, [
+                ["span", {class: "icon is-small"},
+                    ["i", {class: "yi-arrow-left", "aria-hidden": "true"}]],
+                ["span", label_attrs, label]
+            ]]
+        ]
+    );
+}
+
 function render_drawer(gobj, items)
 {
     /*  Off-canvas drawer: initially hidden; toggled via .is-active on the
@@ -757,6 +839,13 @@ function ac_route_changed(gobj, event, kw, src)
         return 0;
     }
 
+    /*  backbar: no per-item highlight.  Its visibility while the index
+     *  itself is on stage is the shell's job (the whole secondary zone
+     *  collapses at the index route — tabs and cards never coexist). */
+    if(gobj_read_attr(gobj, "layout") === "backbar") {
+        return 0;
+    }
+
     /*  Remove prior active class on any children */
     let previouslyActive = $c.querySelectorAll(".is-active");
     previouslyActive.forEach(n => n.classList.remove("is-active"));

package/src/c_yui_shell.css

@@ -167,13 +167,21 @@
 }
 .yui-nav-iconbar .yui-nav-item.is-active,
 .yui-nav-iconbar li.is-active > .yui-nav-item {
-    color: var(--bulma-link, #485fc7);
-    background-color: var(--bulma-link-light, rgba(72,95,199,0.1));
+    background-color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
 }
 
 /*--- tabs (Bulma .tabs) ---*/
 .yui-nav-tabs .tabs ul { flex-wrap: wrap; }
 
+/*  Secondary-nav tab strip (top-sub zone): Bulma gives `.tabs:not(:last-child)`
+ *  a 1.5rem block-spacing margin-bottom, which steals content height on every
+ *  view (worst on mobile). The zone already has its own bottom border for
+ *  separation, so drop the margin. Specificity (3 classes) beats Bulma's rule. */
+.yui-zone-top-sub .yui-nav-tabs.tabs {
+    margin-bottom: 0.25rem;
+}
+
 /*--- closable tab: trailing ✕ affordance (item.closable) ---*/
 .yui-nav-close {
     opacity: 0.55;
@@ -189,6 +197,64 @@
 /*--- per-item state class (item.class) — generic disconnected tint ---*/
 .yui-nav-tabs .tabs li.yui-nav-disconnected a { color: var(--bulma-danger, #f14668); }
 
+/*--- cards (section-index landing grid, mounted as a stage view) ---*/
+.yui-nav-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    gap: 0.75rem;
+    padding: 1rem;
+    width: 100%;
+    align-content: start;
+}
+.yui-nav-cards .yui-nav-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1.25rem 0.75rem;
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    border-radius: 0.5rem;
+    background: var(--bulma-scheme-main, #fff);
+    color: var(--bulma-text, inherit);
+    text-decoration: none;
+    text-align: center;
+    line-height: 1.2;
+    word-break: break-word;
+}
+/*  yui_icons are 1em CSS masks: font-size scales them. */
+.yui-nav-cards .yui-nav-card .icon {
+    font-size: 1.5rem;
+}
+.yui-nav-cards .yui-nav-card:hover,
+.yui-nav-cards .yui-nav-card:focus-visible {
+    border-color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link, #485fc7);
+}
+.yui-nav-cards .yui-nav-card.is-active {
+    border-color: var(--bulma-link, #485fc7);
+}
+.yui-nav-cards .yui-nav-card[data-disabled="1"] {
+    opacity: 0.5;
+}
+
+/*--- backbar (mobile "← <section>" back-to-index, submenu.index) ---*/
+.yui-nav-backbar {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+}
+.yui-nav-backbar .yui-nav-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    color: var(--bulma-text, inherit);
+    text-decoration: none;
+    font-weight: 600;
+}
+
 /*--- stacked item (icon above label) ---*/
 .yui-nav-stacked {
     display: inline-flex;

package/src/c_yui_shell.js

@@ -16,6 +16,11 @@
  *      $container in its stage, hide the previous one. Lifecycle per item
  *      decides when the gobj is created/destroyed.
  *
+ *      A primary item with `submenu.index` gets a section-index landing:
+ *      its own route mounts the submenu as a "cards" C_YUI_NAV in the
+ *      stage instead of redirecting to the default child (see
+ *      shell_section_index.js for the contract).
+ *
  *      Hash-based 2-level routing (#/primary/secondary). No dependency on
  *      C_YUI_ROUTING.
  *
@@ -53,6 +58,10 @@ import {
 } from "./shell_toolbar_helpers.js";
 
 import { resolve_route } from "./route_resolver.js";
+import {
+    section_index_target,
+    secondary_nav_renders,
+} from "./shell_section_index.js";
 
 /***************************************************************
  *              Constants
@@ -621,18 +630,28 @@ function build_item_index(gobj, config)
         let items = (menu && menu.items) || [];
         for(let item of items) {
             if(item.route) {
+                /*  Section-index landing (submenu.index): the section
+                 *  route gets a synthesized target — the submenu itself
+                 *  rendered as a "cards" C_YUI_NAV in the stage — so it
+                 *  becomes a real resting, deep-linkable route instead
+                 *  of redirecting to the default child (navigate_to()
+                 *  only redirects while the entry has NO target).
+                 *  Explicit inline targets keep precedence (the helper
+                 *  returns null then). */
+                let target = item.target || section_index_target(menu_id, item);
+
                 /*  A later menu must NOT clobber an earlier entry that
                  *  has a valid target with one that has none.  This is
                  *  the common case where a `quick` drawer just reuses
                  *  routes declared (with target) in `primary.submenu`.
                  *  Rule: prefer the first entry with a target. */
                 let prev = priv.item_index[item.route];
-                if(!prev || (!prev.target && item.target)) {
+                if(!prev || (!prev.target && target)) {
                     priv.item_index[item.route] = {
                         item: item,
                         parent_item: null,
-                        stage: item.target && item.target.stage || null,
-                        target: item.target || null,
+                        stage: target && target.stage || null,
+                        target: target,
                         menu_id: menu_id
                     };
                 }
@@ -761,19 +780,27 @@ function instantiate_menus(gobj, config)
                     );
                     continue;
                 }
-                let submenu_def = {
-                    items: sub.items,
-                    render: { [zone_id]: render_to_obj(layout) }
-                };
+                /*  Index sections (submenu.index) get a render PLAN:
+                 *  the declared nav constrained to ">=tablet" plus a
+                 *  mobile "backbar" (← <section>) — tabs and cards
+                 *  never coexist, and a child view on mobile offers
+                 *  the way back instead of a duplicated tab strip. */
+                let renders = secondary_nav_renders(item, render_to_obj(layout));
                 let sub_menu_id = `secondary.${menu_id}.${item.id}`;
-                let nav = instantiate_nav_in_zone(
-                    gobj, submenu_def, sub_menu_id, zone_id, "secondary",
-                    item.name || ""
-                );
-                /*  Hidden until owning primary is active. */
-                let $c = gobj_read_attr(nav, "$container");
-                if($c) {
-                    $c.classList.add("is-hidden");
+                for(let render_cfg of renders) {
+                    let submenu_def = {
+                        items: sub.items,
+                        render: { [zone_id]: render_cfg }
+                    };
+                    let nav = instantiate_nav_in_zone(
+                        gobj, submenu_def, sub_menu_id, zone_id, "secondary",
+                        item.name || ""
+                    );
+                    /*  Hidden until owning primary is active. */
+                    let $c = gobj_read_attr(nav, "$container");
+                    if($c) {
+                        $c.classList.add("is-hidden");
+                    }
                 }
             }
         }
@@ -801,8 +828,11 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
         render_cfg = { layout: render_cfg };
     }
 
-    let nav_name = `nav_${menu_id.replace(/\./g, "_")}_${zone_id}`;
     let layout = render_cfg.layout || "vertical";
+    /*  A backbar shares menu_id and zone with the nav it complements —
+     *  suffix the gobj name to avoid a sibling-name collision. */
+    let nav_name = `nav_${menu_id.replace(/\./g, "_")}_${zone_id}` +
+                   (layout === "backbar" ? "_backbar" : "");
     let nav = gobj_create(
         nav_name,
         "C_YUI_NAV",
@@ -815,6 +845,8 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
             icon_pos:    render_cfg.icon_pos || default_icon_pos(zone_id),
             show_label:  render_cfg.show_label !== false,
             level:       level,
+            show_on:     render_cfg.show_on || "",
+            back_route:  render_cfg.back_route || "",
             shell:       gobj
         },
         gobj
@@ -1174,6 +1206,16 @@ function build_view_gobj(gobj, entry, route, stage)
     }
     stage.el.appendChild($view);
     gobj_start(view);
+
+    /*  App view gclasses translate their own DOM; a section-index view
+     *  (synthesized "cards" C_YUI_NAV) is SHELL-owned DOM built after
+     *  the host's one-shot refresh_language — apply the registered
+     *  translator, same policy as lazily-built dropdown panels. */
+    let priv = gobj_read_attr(gobj, "priv");
+    if(priv && typeof priv.translator === "function" &&
+            target.gclass === "C_YUI_NAV") {
+        refresh_language($view, priv.translator);
+    }
     return view;
 }
 
@@ -2002,7 +2044,19 @@ function update_secondary_nav_visibility(gobj, entry)
      *  secondary navs and a nav-derived check would never collapse
      *  the zone (empty white strip under the toolbar). */
     let active_primary = entry.parent_item || entry.item || null;
-    let has_secondary = !!(
+
+    /*  At the section-index route itself (a level-1 item with
+     *  submenu.index) the cards ARE the navigation: showing the tab
+     *  strip too would duplicate it (confusing — either tabs or
+     *  cards, never both).  Collapse the secondary zone there. */
+    let at_section_index = !!(
+        !entry.parent_item &&
+        active_primary &&
+        active_primary.submenu &&
+        active_primary.submenu.index
+    );
+
+    let has_secondary = !at_section_index && !!(
         active_primary &&
         active_primary.submenu &&
         Array.isArray(active_primary.submenu.items) &&
@@ -2037,7 +2091,7 @@ function update_secondary_nav_visibility(gobj, entry)
         if(!$c) {
             continue;
         }
-        if(nav_menu_id === target_secondary_id) {
+        if(nav_menu_id === target_secondary_id && has_secondary) {
             $c.classList.remove("is-hidden");
         } else {
             $c.classList.add("is-hidden");
@@ -2130,6 +2184,11 @@ function find_secondary_nav(priv, parent_item_id)
     for(let nav of priv.navs) {
         let menu_id = gobj_read_attr(nav, "menu_id") || "";
         if(menu_id.startsWith("secondary.") && menu_id.endsWith(suffix)) {
+            /*  A backbar shares the menu_id but renders no items —
+             *  EV_SET_ITEMS must reach the item-based nav. */
+            if(gobj_read_attr(nav, "layout") === "backbar") {
+                continue;
+            }
             return nav;
         }
     }
@@ -2237,6 +2296,32 @@ function yui_shell_set_submenu(shell_gobj, parent_item_id, items)
 
     /*  Push the new items into the nav (rebuilds its DOM in place). */
     gobj_send_event(nav, "EV_SET_ITEMS", {items: items}, shell_gobj);
+
+    /*  Section-index landing (submenu.index): keep the synthesized
+     *  target and any mounted index view (a "cards" C_YUI_NAV in the
+     *  stage) in sync with the new items — otherwise a later mount,
+     *  or the already mounted view, would render the stale set. */
+    if(parent_item && parent_item.route &&
+            parent_item.submenu && parent_item.submenu.index) {
+        let entry = priv.item_index[parent_item.route];
+        if(entry && entry.target &&
+                entry.target.gclass === "C_YUI_NAV" && entry.target.kw) {
+            entry.target.kw.menu_items = items;
+        }
+        for(let stage_name in priv.stages) {
+            let stage = priv.stages[stage_name];
+            let view = stage.items && stage.items[parent_item.route];
+            if(view) {
+                gobj_send_event(view, "EV_SET_ITEMS", {items: items}, shell_gobj);
+                /*  EV_SET_ITEMS rebuilt the DOM: re-apply the translator
+                 *  (shell-owned DOM, same policy as build_view_gobj). */
+                let $view = gobj_read_attr(view, "$container");
+                if($view && typeof priv.translator === "function") {
+                    refresh_language($view, priv.translator);
+                }
+            }
+        }
+    }
     return 0;
 }