@yuneta/gobj-ui 2.0.0 → 2.2.3

package/{c_yui_window.js → src/c_yui_window.js}

@@ -19,6 +19,7 @@ import {
     gobj_write_attr,
     gobj_short_name,
     clean_name,
+    gobj_send_event,
     gobj_find_service,
     createElement2,
     is_gobj,
@@ -49,6 +50,19 @@ import {get_yesnocancel} from "./c_yui_main.js";
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_WINDOW";
 
+/*  Window-control glyphs as inline SVG (currentColor → theme-aware,
+ *  pixel-consistent). There is no minimize/restore glyph in the
+ *  yui_icons.css mask set, and chrome affordances read better as
+ *  crisp SVG than as content icons. */
+const WC_MIN = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="3" y="11" width="10" height="1.6" rx="0.8" fill="currentColor"/></svg>';
+const WC_MAX = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="3.3" y="3.3" width="9.4" height="9.4" rx="1.6" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>';
+const WC_RESTORE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="5.2" y="3" width="7.8" height="7.8" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.4"/><rect x="3" y="5.2" width="7.8" height="7.8" rx="1.3" fill="var(--bulma-scheme-main)" stroke="currentColor" stroke-width="1.4"/></svg>';
+const WC_CLOSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
+
+/*  Bulma mobile breakpoint: at or below this a window becomes a
+ *  full-screen sheet (no float / drag / resize). */
+const MOBILE_MAX = 768;
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -70,9 +84,13 @@ SDATA(data_type_t.DTP_BOOLEAN,  "resizable",    0,  true,   "Allow resizing"),
 SDATA(data_type_t.DTP_BOOLEAN,  "showFooter",   0,  true,   "Show footer"),
 SDATA(data_type_t.DTP_BOOLEAN,  "openMaximized",0,  false,  "Open the window maximized"),
 SDATA(data_type_t.DTP_BOOLEAN,  "showMax",      0,  true,   "Show maximize button"),
+SDATA(data_type_t.DTP_BOOLEAN,  "showMin",      0,  true,   "Show minimize (roll-up / shade) button"),
 SDATA(data_type_t.DTP_BOOLEAN,  "maximized",    0,  false,  "Flag to indicate if maximized"),
 SDATA(data_type_t.DTP_JSON,     "window_style", 0,  "{}",   "Override window style"),
 SDATA(data_type_t.DTP_POINTER,  "on_close",     0,  null,   "Callback on destroy"),
+SDATA(data_type_t.DTP_POINTER,  "manager",      0,  null,   "Optional C_YUI_WINDOW_MANAGER (gobj or service name) for dock/taskbar"),
+SDATA(data_type_t.DTP_STRING,   "title",        0,  "",     "Window title, shown on the dock chip"),
+SDATA(data_type_t.DTP_STRING,   "icon",         0,  "",     "Dock-chip icon: a yi-* class name or inline SVG (by window type)"),
 // TODO pendiente focus modal keyboard
 SDATA(data_type_t.DTP_POINTER,  "focus",        0,  null,   "Brings focus to the element, can be a number or selector"),
 SDATA(data_type_t.DTP_BOOLEAN,  "modal",        0,  false,  "Enable modal mode"),
@@ -85,6 +103,7 @@ SDATA_END()
 
 let PRIVATE_DATA = {
     prevSize: 0,
+    preShadeHeight: 0,
 };
 
 let __gclass__ = null;
@@ -116,6 +135,27 @@ function mt_create(gobj)
     gobj_write_attr(gobj, "window_id", window_id);
     build_ui(gobj);
 
+    /*  Optional window manager (dock/taskbar): register, and raise/
+     *  highlight on any pointer press. Absent → the window is a plain
+     *  floating window and minimize falls back to shade in place. */
+    let manager = resolve_manager(gobj);
+    if(manager) {
+        let $c = gobj_read_attr(gobj, "$container");
+        if($c) {
+            $c.addEventListener("pointerdown", function() {
+                let m = gobj_read_pointer_attr(gobj, "manager");
+                if(m) {
+                    gobj_send_event(m, "EV_FOCUS_WINDOW", {window: gobj}, gobj);
+                }
+            }, true);
+        }
+        gobj_send_event(manager, "EV_REGISTER_WINDOW", {
+            window: gobj,
+            title: gobj_read_attr(gobj, "title") || gobj_short_name(gobj),
+            icon: gobj_read_attr(gobj, "icon") || "",
+        }, gobj);
+    }
+
     /*  Keep the window inside the viewport on a breakpoint change.
      *  Wired in mt_create (NOT mt_start) on purpose: windows are
      *  often created via gobj_create_service WITHOUT being started
@@ -159,6 +199,11 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    let manager = gobj_read_pointer_attr(gobj, "manager");
+    if(manager) {
+        gobj_send_event(manager, "EV_UNREGISTER_WINDOW", {window: gobj}, gobj);
+    }
+
     let on_win_resize = gobj_read_attr(gobj, "win_resize_handler");
     if(on_win_resize) {
         window.removeEventListener("resize", on_win_resize);
@@ -177,11 +222,122 @@ function mt_destroy(gobj)
 
 
 
+/************************************************************
+ *   Inject the window-chrome stylesheet once. Theme-aware via
+ *   Bulma scheme vars (flips on <html data-theme>); replaces the
+ *   old saturated `has-background-info` bar + forced black text.
+ ************************************************************/
+function ensure_window_style()
+{
+    if(document.getElementById('yui-window-style')) {
+        return;
+    }
+    let css = `
+.yui-window-header {
+    background: var(--bulma-scheme-main-bis);
+    color: var(--bulma-text-strong);
+    -webkit-user-select: none; user-select: none;
+}
+.yui-window-titlebar-controls { display: flex; align-items: center; gap: 2px; padding-left: 6px; }
+.yui-wc {
+    width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
+    padding: 0; border: 0; background: transparent; color: var(--bulma-text); cursor: pointer;
+    border-radius: 5px; -webkit-tap-highlight-color: transparent;
+}
+.yui-wc:hover { background: var(--bulma-scheme-main-ter); color: var(--bulma-text-strong); }
+.yui-wc.wc-close:hover { background: #e0364a; color: #fff; }
+.yui-wc svg { width: 15px; height: 15px; display: block; }
+.C_YUI_WINDOW.is-shaded .yui-window-body,
+.C_YUI_WINDOW.is-shaded .yui-window-footer { display: none !important; }
+.C_YUI_WINDOW.is-shaded { height: auto !important; }
+.yui-window-resize { color: var(--bulma-text-weak); opacity: 0.55; }
+.yui-window-resize:hover { opacity: 1; color: var(--bulma-text); }
+@media (max-width: ${MOBILE_MAX}px) {
+    .C_YUI_WINDOW.is-mobile-sheet { border-radius: 0 !important; box-shadow: none !important; }
+    .C_YUI_WINDOW.is-mobile-sheet .yui-window-resize { display: none !important; }
+    .yui-wc { width: 42px; height: 38px; }
+    .yui-wc.wc-max { display: none !important; }
+    .yui-wc svg { width: 18px; height: 18px; }
+}
+`;
+    let $style = document.createElement('style');
+    $style.id = 'yui-window-style';
+    $style.textContent = css;
+    document.head.appendChild($style);
+}
+
+/************************************************************
+ *   Below the mobile breakpoint the window is a full-screen
+ *   sheet (no float / drag / resize).
+ ************************************************************/
+function is_mobile()
+{
+    let w = window.innerWidth || document.documentElement.offsetWidth;
+    return w <= MOBILE_MAX;
+}
+
+/************************************************************
+ *   Resolve the optional `manager` attr (a gobj or a service
+ *   name) to a gobj, caching the resolution back into the attr.
+ ************************************************************/
+function resolve_manager(gobj)
+{
+    let m = gobj_read_pointer_attr(gobj, "manager");
+    if(!m) {
+        return null;
+    }
+    if(typeof m === "string") {
+        m = gobj_find_service(m, false);
+        gobj_write_attr(gobj, "manager", m);
+    }
+    return m;
+}
+
+/************************************************************
+ *   Minimize: with a manager, send the window to the dock;
+ *   otherwise "shade" it in place. Called by the minimize button.
+ ************************************************************/
+function do_minimize(gobj)
+{
+    let manager = gobj_read_pointer_attr(gobj, "manager");
+    if(manager) {
+        gobj_send_event(manager, "EV_MINIMIZE_WINDOW", {window: gobj}, gobj);
+    } else {
+        toggle_shade(gobj);
+    }
+}
+
+/************************************************************
+ *   Minimize as "shade": roll the window up to its title bar
+ *   in place (self-contained; no window manager needed). Toggles.
+ ************************************************************/
+function toggle_shade(gobj)
+{
+    let priv = gobj.priv;
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return;
+    }
+    if($container.classList.contains("is-shaded")) {
+        $container.classList.remove("is-shaded");
+        if(priv.preShadeHeight) {
+            $container.style.height = parseInt(priv.preShadeHeight) + 'px';
+        }
+    } else {
+        priv.preShadeHeight = $container.getBoundingClientRect().height;
+        $container.classList.add("is-shaded");
+        $container.style.height = "auto";
+    }
+}
+
 /************************************************************
  *   Build UI
  ************************************************************/
 function build_ui(gobj)
 {
+    ensure_window_style();
+    let mobile = is_mobile();
+
     let header = gobj_read_attr(gobj, "header");
     if(is_gobj(header)) {
         header = gobj_read_attr(header, "$container");
@@ -224,6 +380,16 @@ function build_ui(gobj)
         rect = do_center(gobj, rect.x, rect.y, rect.width, rect.height);
     }
 
+    /*  On mobile the window is a full-screen sheet: ignore the saved
+     *  rect / centering and fill the viewport. */
+    if(mobile) {
+        rect = {
+            x: 0, y: 0,
+            width: window.innerWidth || document.documentElement.offsetWidth,
+            height: window.innerHeight || document.documentElement.offsetHeight,
+        };
+    }
+
     let window_style = {
         position: "fixed",
         "z-index": 3,
@@ -245,14 +411,14 @@ function build_ui(gobj)
 
     let $container = createElement2(
         ['div', {
-            class: 'yui-window strong-shadow is-flex is-flex-direction-column',
+            class: 'C_YUI_WINDOW strong-shadow is-flex is-flex-direction-column' + (mobile ? ' is-mobile-sheet' : ''),
             style: window_style}, [
 
             /*----------------------------*
              *          Header
              *----------------------------*/
             ['div', {
-                class: 'yui-window-header p-1 is-flex-shrink-0 is-flex is-flex-nowrap is-justify-content-space-between is-align-items-flex-start has-text-black has-background-info', style: 'border-bottom:1px solid var(--bulma-border); cursor:move; box-sizing: border-box;'
+                class: 'yui-window-header p-1 is-flex-shrink-0 is-flex is-flex-nowrap is-justify-content-space-between is-align-items-center', style: 'border-bottom:1px solid var(--bulma-border); cursor:move; box-sizing: border-box;'
                 }, [
                 /*  Custom header content: a single-row, horizontally
                  *  scrollable strip.  It takes the remaining width and
@@ -272,33 +438,40 @@ function build_ui(gobj)
                      *  width and kept wrapping. */
                     ['div', {class: '', style: 'width:max-content; display:flex; flex-wrap:nowrap; align-items:center;'}, header]
                 ]],
-                /*  Max/close: pinned top-right, never shrink, never
-                 *  wrap, always on top so the click always lands. */
-                ['div', {class: 'is-flex-shrink-0 is-flex is-flex-nowrap is-align-items-flex-start', style: 'position:relative; z-index:1; cursor:default;'}, [
+                /*  Window controls: pinned top-right, never shrink,
+                 *  never wrap, always on top so the click always lands.
+                 *  Minimize (shade) · maximize/restore · close. */
+                ['div', {class: 'yui-window-titlebar-controls is-flex-shrink-0', style: 'position:relative; z-index:1; cursor:default;'}, [
                     /*----------------------------*
-                     *      Max/min button
+                     *      Minimize (shade)
                      *----------------------------*/
                     ['button', {
-                        class: 'without-border pr-4',
-                        style: {
-                            color: 'var(--bulma-text)',
-                            "font-size": "1.4em",
-                            "cursor": "pointer",
-                            "display": gobj_read_bool_attr(gobj, "showMax")?'inline-block':'none',
+                        class: 'yui-wc wc-min', type: 'button', 'aria-label': 'minimize',
+                        style: gobj_read_bool_attr(gobj, "showMin") ? '' : 'display:none;',
+                    }, WC_MIN, {
+                        click: (evt) => {
+                            evt.stopPropagation();
+                            do_minimize(gobj);
                         }
-                    }, '<i class="yi-square"></i>', {
+                    }],
+                    /*----------------------------*
+                     *      Maximize / restore
+                     *----------------------------*/
+                    ['button', {
+                        class: 'yui-wc wc-max', type: 'button', 'aria-label': 'maximize',
+                        style: gobj_read_bool_attr(gobj, "showMax") ? '' : 'display:none;',
+                    }, WC_MAX, {
                         click: (evt) => {
                             evt.stopPropagation();
                             toggle(gobj);
                         }
                     }],
                     /*----------------------------*
-                     *      Close button
+                     *      Close
                      *----------------------------*/
                     ['button', {
-                        class: 'without-border pr-2',
-                        style: 'color:var(--bulma-text);font-size:1.6em;cursor:pointer;',
-                    }, '<i class="yi-xmark"></i>', {
+                        class: 'yui-wc wc-close', type: 'button', 'aria-label': 'close',
+                    }, WC_CLOSE, {
                         click: (evt) => {
                             evt.stopPropagation();
                             close_window(gobj);
@@ -409,7 +582,7 @@ function build_ui(gobj)
      *----------------------------*/
     if(gobj_read_bool_attr(gobj, "resizable") && !gobj_read_bool_attr(gobj, "showFooter")) {
         let $resizable_btn = createElement2(['div', {
-            class: 'without-border',
+            class: 'without-border yui-window-resize',
             style: {
                 cursor: "nwse-resize",
                 display: "flex",
@@ -447,7 +620,7 @@ function build_ui(gobj)
 
     if (gobj_read_bool_attr(gobj, "openMaximized")) {
         max(gobj);
-    } else {
+    } else if(!mobile) {
         if(gobj_read_bool_attr(gobj, "content_size")) {
             $container.style.height = "auto";
         }
@@ -538,10 +711,27 @@ function max(gobj)
     $container.style.height = parseInt(rect.height) +'px';
 
     gobj_write_bool_attr(gobj, "maximized", true);
+    set_max_icon(gobj, true);
 
     return rect;
 }
 
+/************************************************************
+ *   Swap the maximize/restore glyph to match the state.
+ ************************************************************/
+function set_max_icon(gobj, maximized)
+{
+    let $container = gobj_read_attr(gobj, "$container");
+    if(!$container) {
+        return;
+    }
+    let $btn = $container.querySelector('.wc-max');
+    if($btn) {
+        $btn.innerHTML = maximized ? WC_RESTORE : WC_MAX;
+        $btn.setAttribute('aria-label', maximized ? 'restore' : 'maximize');
+    }
+}
+
 /************************************************************
  *
  ************************************************************/
@@ -562,6 +752,7 @@ function min(gobj)
     $container.style.height = parseInt(rect.height) +'px';
 
     gobj_write_bool_attr(gobj, "maximized", false);
+    set_max_icon(gobj, false);
 
     return rect;
 }
@@ -571,6 +762,11 @@ function min(gobj)
  ************************************************************/
 function mvStart(gobj, evt)
 {
+    /*  No window-dragging on a mobile full-screen sheet. */
+    if(is_mobile()) {
+        return;
+    }
+
     let $container = gobj_read_attr(gobj, "$container");
 
     let window_rect = $container.getBoundingClientRect();
@@ -776,6 +972,19 @@ function handleResize(gobj)
         return;
     }
 
+    /*  Mobile: full-screen sheet, refit to the viewport and stop. */
+    if(is_mobile()) {
+        $container.classList.add("is-mobile-sheet");
+        let vw = window.innerWidth || document.documentElement.offsetWidth;
+        let vh = window.innerHeight || document.documentElement.offsetHeight;
+        $container.style.left = '0px';
+        $container.style.top = '0px';
+        $container.style.width = vw + 'px';
+        $container.style.height = vh + 'px';
+        return;
+    }
+    $container.classList.remove("is-mobile-sheet");
+
     /*  Maximized: just refit to the (new) viewport. */
     if(gobj_read_bool_attr(gobj, "maximized") === true) {
         let r = do_fix_dimension_to_screen(gobj, 0, 0, 10000, 10000);
@@ -853,6 +1062,16 @@ function ac_hide(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *   EV_CLOSE_WINDOW — close from outside (e.g. the dock chip ✕),
+ *   the same teardown as the title-bar close button.
+ ************************************************************/
+function ac_close(gobj, event, kw, src)
+{
+    close_window(gobj);
+    return 0;
+}
+
 
 
 
@@ -891,7 +1110,8 @@ function create_gclass(gclass_name)
             ["EV_RESIZE",       ac_resize,      null],
             ["EV_REFRESH",      ac_refresh,     null],
             ["EV_SHOW",         ac_show,        null],
-            ["EV_HIDE",         ac_hide,        null]
+            ["EV_HIDE",         ac_hide,        null],
+            ["EV_CLOSE_WINDOW", ac_close,       null]
         ]]
     ];
 
@@ -905,7 +1125,8 @@ function create_gclass(gclass_name)
         ["EV_RESIZE",           0],
         ["EV_REFRESH",          0],
         ["EV_SHOW",             0],
-        ["EV_HIDE",             0]
+        ["EV_HIDE",             0],
+        ["EV_CLOSE_WINDOW",     0]
     ];
 
     __gclass__ = gclass_create(