feat: add resizable option to detached glass via can-resize attribute

dev/window/bwin-detached-windowless-glass.html

@@ -16,6 +16,7 @@ <h2>BinaryWindow - windowless glass</h2>
         <button id="add-modal">Add modal windowless glass</button>
         <button id="add-positioned">Add positioned windowless glass</button>
         <button id="add-fullscreen">Fullscreen popup</button>
+        <button id="add-non-resizable">Add non-resizable glass</button>
       </div>
     </main>
   </body>

dev/window/bwin-detached-windowless-glass.js

@@ -31,15 +31,26 @@ document.querySelector('#add-positioned').addEventListener('click', () => {
 });
 
 // Windowless glass filling the viewport with a 20px inset on every edge.
+// A fullscreen popup shouldn't be resized, so `resizable: false` suppresses the handles.
 document.querySelector('#add-fullscreen').addEventListener('click', () => {
   const EDGE = 20;
   BinaryWindow.addWindowlessGlass({
     title: 'Fullscreen popup',
     draggable: false,
+    resizable: false,
     position: 'top-left',
     offset: EDGE,
     width: document.documentElement.clientWidth - EDGE * 2,
     height: document.documentElement.clientHeight - EDGE * 2,
     content: createContent('fullscreen'),
   });
 });
+
+// `resizable: false` keeps resize handles from ever appearing on hover.
+document.querySelector('#add-non-resizable').addEventListener('click', () => {
+  BinaryWindow.addWindowlessGlass({
+    title: 'Non-resizable glass',
+    resizable: false,
+    content: createContent('non-resizable'),
+  });
+});

src/binary-window/binary-window.js

@@ -135,6 +135,7 @@ export class BinaryWindow extends Frame {
    * @param {string|Node} [options.content] - Glass body content.
    * @param {Object[]} [options.tabs] - Header tabs (shown instead of `title`).
    * @param {boolean} [options.draggable=true] - Whether the header can be dragged to move the glass.
+   * @param {boolean} [options.resizable=true] - Whether resize handles appear on hover so the glass can be resized.
    * @param {boolean} [options.animateOpen=true] - Whether to play the open animation on insert.
    * @returns {Element} - The `bw-glass[detached][windowless]` element
    */

src/binary-window/detached-glass/detached-glass.js

@@ -22,6 +22,7 @@ export class DetachedGlass extends Glass {
       offsetX,
       offsetY,
       id,
+      resizable = true,
       actions = DEFAULT_DETACHED_GLASS_ACTIONS,
       ...glassOptions
     } = options;
@@ -30,6 +31,9 @@ export class DetachedGlass extends Glass {
 
     this.domNode.setAttribute('id', id || genId() + '-F');
     this.domNode.setAttribute('detached', '');
+    // Mirrors the header's `can-drag`: the resize module skips glasses marked
+    // `can-resize="false"`, so handles never appear on them.
+    this.domNode.setAttribute('can-resize', resizable);
 
     this.domNode.style.position = 'absolute';
     this.domNode.style.width = `${width}px`;

src/binary-window/detached-glass/detached-glass.test.js

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { DetachedGlass } from './detached-glass';
+
+const build = (options = {}) => new DetachedGlass({ position: 'center', ...options }).domNode;
+
+describe('DetachedGlass can-resize', () => {
+  it('is "true" by default so resize handles appear on hover', () => {
+    const glassEl = build();
+    expect(glassEl.getAttribute('can-resize')).toBe('true');
+  });
+
+  it('is "false" when resizable is false', () => {
+    const glassEl = build({ resizable: false });
+    expect(glassEl.getAttribute('can-resize')).toBe('false');
+  });
+});

src/binary-window/detached-glass/resize.js

@@ -8,6 +8,10 @@ function hasResizeHandles(glassEl) {
 }
 
 function addResizeHandles(glassEl) {
+  // Opt-out: glasses marked `can-resize="false"` never get handles, so they
+  // can't be resized (the pointerdown handler only fires on a handle element).
+  if (glassEl.getAttribute('can-resize') === 'false') return;
+
   if (!hasResizeHandles(glassEl)) {
     glassEl.append(...createResizeHandles());
   }