flexdesk 0.17.17 → 0.17.18

package/src/ui/components/menu_bar.js

@@ -62,6 +62,15 @@
  * shortcut, context, action }`), so the palette and the bar list identical
  * verbs.
  *
+ * ── Two styles: a bar, or one hamburger button (STORY-0133) ───────────
+ * `style: 'bar'` (the default) draws a title per menu: File  Edit  Help.
+ * `style: 'hamburger'` draws ONE icon button (`icon`, 'menu' by default,
+ * named by `label`) whose menu lists the menus, each flying out its items:
+ * ☰ › File › Open…. It is the same model, so `commands()`, `setEnabled`,
+ * `setChecked` and `onAction` do not change; `open(menuId)` opens the
+ * hamburger with that menu flown out. `setStyle(style)` switches at run
+ * time (a setting, a narrow window), closing whatever is open.
+ *
  * ── Roles ─────────────────────────────────────────────────────────────
  * The WAI-ARIA menubar pattern: `role="menubar"` on the element you pass,
  * a `role="menuitem"` title per menu inside a `role="none"` wrapper, each
@@ -77,6 +86,9 @@
 const SEL_TITLE = '.twm-menubar__title';
 const SEL_ITEM = '.twm-menubar__item';
 const SEL_MENU = '.twm-menubar__menu';
+const STYLES = ['bar', 'hamburger'];
+/** The hamburger's own model ids. A menu's row in it is `${HAMBURGER}:${menu.id}`. */
+const HAMBURGER = 'twm-menubar:hamburger';
 
 /** @returns {MenuBar} */
 export function createMenuBar(el, opts) {
@@ -91,16 +103,22 @@ export class MenuBar {
      * @param {Function} [opts.onAction]  `(id, { item, checked }) => void`
      * @param {string}  [opts.label]      the bar's accessible name ('Menu')
      * @param {string}  [opts.emptyLabel] the disabled row an empty submenu shows ('Empty')
+     * @param {string}  [opts.style]      'bar' (a title per menu, the default) or 'hamburger' (one button)
+     * @param {string}  [opts.icon]       the hamburger's Material Symbols icon ('menu')
      */
-    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty' } = {}) {
+    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty', style = 'bar', icon = 'menu' } = {}) {
         if (!el || typeof el.appendChild !== 'function') {
             throw new TypeError('createMenuBar: `el` must be an element');
         }
         _validateMenus(menus);
+        _validateStyle(style);
         this.el = el;
         this.menus = menus;
         this._onAction = typeof onAction === 'function' ? onAction : null;
         this._emptyLabel = emptyLabel;
+        this._label = label;
+        this._icon = icon;
+        this._style = style;
         this._doc = el.ownerDocument;
         this._disabled = new Map();     // id -> boolean (override)
         this._checked = new Map();      // id -> boolean (override, check items)
@@ -112,26 +130,10 @@ export class MenuBar {
         this._returnTo = null;          // what had focus before the bar did
         this._altArmed = false;
 
-        el.innerHTML = '';
         el.classList.add('twm-menubar');
         el.setAttribute('role', 'menubar');
         el.setAttribute('aria-label', label);
-        this._titles = menus.map((m, i) => {
-            const entry = this._doc.createElement('div');
-            entry.className = 'twm-menubar__entry';
-            entry.setAttribute('role', 'none');
-            const btn = this._doc.createElement('button');
-            btn.type = 'button';
-            btn.className = 'twm-menubar__title';
-            btn.setAttribute('role', 'menuitem');
-            btn.setAttribute('aria-haspopup', 'menu');
-            btn.setAttribute('aria-expanded', 'false');
-            btn.tabIndex = i === 0 ? 0 : -1;
-            btn.textContent = m.label;
-            entry.appendChild(btn);
-            el.appendChild(entry);
-            return btn;
-        });
+        this._renderTitles();
 
         this._h = {
             mousedown: (e) => this._onMouseDown(e),
@@ -163,12 +165,35 @@ export class MenuBar {
     /** Whether a menu is open. */
     isOpen() { return this._openIdx >= 0; }
 
-    /** Open the menu with this id (focus on its title, or on its first item). */
+    /** Open the menu with this id (focus on its title, or on its first item).
+     *  A hamburger opens with that menu flown out (focus on its row, or on
+     *  the menu's first item). */
     open(menuId, { focusItem = false } = {}) {
         const i = this.menus.findIndex((m) => m.id === menuId);
         if (i < 0) return;
         this._enter();
-        this._open(i, focusItem ? 'first' : null);
+        if (this._style !== 'hamburger') { this._open(i, focusItem ? 'first' : null); return; }
+        this._open(0, null);
+        const row = this._itemsIn(this._stack[0].menu)
+            .find((b) => this._models.get(b)?.id === `${HAMBURGER}:${menuId}`);
+        if (!row) return;
+        row.focus({ preventScroll: true });
+        this._openSub(row, focusItem ? 'first' : null);
+    }
+
+    /** 'bar' or 'hamburger'. */
+    get style() { return this._style; }
+
+    /** Draw the menus as a bar or as one hamburger button. Whatever is open
+     *  closes; the model and every setEnabled / setChecked stay. */
+    setStyle(style) {
+        _validateStyle(style);
+        if (style === this._style) return;
+        const hadFocus = this.el.contains(this._doc.activeElement);
+        this._deactivate();
+        this._style = style;
+        this._renderTitles();
+        if (hadFocus) this._focusTitle(0);
     }
 
     /** Close every open menu. Focus stays in the bar if it was there. */
@@ -239,7 +264,7 @@ export class MenuBar {
         this._doc.removeEventListener('mousedown', this._h.docMousedown, true);
         this._doc.defaultView?.removeEventListener('blur', this._h.winBlur);
         this.el.innerHTML = '';
-        this.el.classList.remove('twm-menubar');
+        this.el.classList.remove('twm-menubar', 'twm-menubar--hamburger');
         this.el.removeAttribute('role');
         this.el.removeAttribute('aria-label');
     }
@@ -317,6 +342,50 @@ export class MenuBar {
         }
     }
 
+    // ── titles ────────────────────────────────────────────────────────
+
+    /** The titles for the current style. `_top` is what they open: the
+     *  menus themselves, or the hamburger's one menu that lists them. */
+    _renderTitles() {
+        const d = this._doc;
+        const burger = this._style === 'hamburger';
+        this.el.innerHTML = '';
+        this.el.classList.toggle('twm-menubar--hamburger', burger);
+        this._top = burger
+            ? [{ id: HAMBURGER, label: this._label, items: this.menus.map((m) => ({
+                id: `${HAMBURGER}:${m.id}`, label: m.label, submenu: m.items,
+            })) }]
+            : this.menus;
+        this._titles = this._top.map((m, i) => {
+            const entry = d.createElement('div');
+            entry.className = 'twm-menubar__entry';
+            entry.setAttribute('role', 'none');
+            const btn = d.createElement('button');
+            btn.type = 'button';
+            btn.className = 'twm-menubar__title';
+            btn.setAttribute('role', 'menuitem');
+            btn.setAttribute('aria-haspopup', 'menu');
+            btn.setAttribute('aria-expanded', 'false');
+            btn.tabIndex = i === 0 ? 0 : -1;
+            if (burger) {
+                btn.classList.add('twm-menubar__title--icon', 'twm-has-tooltip');
+                btn.setAttribute('aria-label', m.label);
+                btn.dataset.tooltip = m.label;
+                btn.dataset.tooltipPlacement = 'bottom';
+                const icon = d.createElement('span');
+                icon.className = 'material-symbols-outlined';
+                icon.setAttribute('aria-hidden', 'true');
+                icon.textContent = this._icon;
+                btn.appendChild(icon);
+            } else {
+                btn.textContent = m.label;
+            }
+            entry.appendChild(btn);
+            this.el.appendChild(entry);
+            return btn;
+        });
+    }
+
     // ── open / close ──────────────────────────────────────────────────
 
     _setRoving(i) {
@@ -359,7 +428,7 @@ export class MenuBar {
         // being removed never holds focus.
         this._focusTitle(i);
         this._closeAll();
-        const m = this.menus[i];
+        const m = this._top[i];
         const title = this._titles[i];
         const menu = this._buildMenu(m.items, m.label);
         title.parentElement.appendChild(menu);
@@ -596,6 +665,8 @@ export class MenuBar {
     _titleKey(key, i) {
         const n = this._titles.length;
         const open = this._openIdx >= 0;
+        // One title (a hamburger): there is no next or previous menu.
+        if (n === 1 && (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Home' || key === 'End')) return true;
         switch (key) {
             case 'ArrowRight': open ? this._open(i + 1, null) : this._focusTitle((i + 1) % n); return true;
             case 'ArrowLeft':  open ? this._open(i - 1, null) : this._focusTitle((i - 1 + n) % n); return true;
@@ -642,11 +713,11 @@ export class MenuBar {
             case 'End':  this._focusIn(menu, 'last'); return true;
             case 'ArrowRight':
                 if (item?.submenu != null && !this._isDisabled(item)) this._openSub(btn, 'first');
-                else this._open(this._openIdx + 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx + 1, 'first');
                 return true;
             case 'ArrowLeft':
                 if (level > 0) this._closeFrom(level);
-                else this._open(this._openIdx - 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx - 1, 'first');
                 return true;
             case 'Enter': case ' ':
                 this._activate(btn);
@@ -706,6 +777,12 @@ function _kind(item) {
     return 'menuitem';
 }
 
+function _validateStyle(style) {
+    if (!STYLES.includes(style)) {
+        throw new TypeError(`createMenuBar: \`style\` must be ${STYLES.map((s) => `'${s}'`).join(' or ')}`);
+    }
+}
+
 /** A bad model is a boot error, not a menu that silently lacks a row. */
 function _validateMenus(menus) {
     if (!Array.isArray(menus) || !menus.length) {

package/src/ui/controllers/window_chrome_controller.js

@@ -404,10 +404,13 @@ export class WindowChromeController {
         // What never starts a drag: anything you can click or type into. An
         // embedder adds its own with `noDrag`. (`.window-controls` and
         // `.panel-toggles` are kept for embedders' own markup of that shape.)
+        // A menu bar in the top bar (a hamburger, STORY-0133) drops its menus
+        // inside the bar's DOM: a press on a menu's padding or separator is
+        // in the bar, not a drag.
         const NO_DRAG_SELECTOR = [
             '.no-drag', 'button', 'a', 'input', 'select', 'textarea', 'label',
             '[role="button"]', '[role="menuitem"]', '[role="tab"]', '[contenteditable="true"]',
-            '.twm-window-controls', '.window-controls', '.panel-toggles',
+            '.twm-window-controls', '.window-controls', '.panel-toggles', '.twm-menubar',
             this._noDrag,
         ].filter(Boolean).join(', ');