feat: windowless glass (floating on document.body) + modal option, with detached-glass move/resize hardening#75
Merged
Merged
Conversation
…rollbars Dragging a detached glass by its header could push it past the viewport edge and grow the page, surfacing browser scrollbars. Clamp the move to the viewport (clientWidth/Height, which exclude scrollbars), reserving the resize-handle overhang on the right/bottom so hover handles stay on-screen. Extract clamp() to utils and getResizeHandleOverhang() to detached-glass/utils.
Derive the containing block from the glass via offsetParent and bind pointer listeners to document instead of windowElement. getResizeHandleOverhang now reads the inherited handle-size var from the glass element itself.
addFreeGlass is a static BinaryWindow method that builds a detached glass and appends it to document.body instead of a bw-window, managed by the shared glass manager and tagged with a 'free' attribute. Free glasses default to close-only actions since minimize/attach need an owning window. Move math now resolves the containing-block origin via getContainingBlockOrigin: the positioned bw-window for a detached glass, or the scroll-shifted viewport origin for a free glass on a static body. CSS vars move to :root so a free glass outside any bw-window still inherits them.
Move the detached-glass resize and activate pointer listeners from windowElement to document so they also fire for a free glass living on document.body, and normalize resize start geometry via getContainingBlockOrigin (positioned bw-window for detached, scroll-shifted viewport for free). bringToFront now clears the [active] marker across all managed glasses rather than only :scope siblings, so a detached and a free glass (different parents) can't both look active at once. Dev page: add a fullscreen-popup button exercising a non-draggable free glass inset 20px from every viewport edge.
"Free" described a property a detached glass already has (it floats and moves freely within the window). The distinguishing trait is that this glass has no owning bw-window, so name it for that: addWindowlessGlass, DEFAULT_WINDOWLESS_GLASS_ACTIONS, and the bw-glass[windowless] attribute.
Split bw-window[theme='dark'] out of vars.css so vars.css holds only the :root token defaults. Import theme.css last so its overrides win on source order.
Match bw-glass[windowless][theme='dark'] so a windowless glass on the page body picks up dark tokens. TODO left to differentiate window vs windowless settings.
…glass button Rename the dark-theme example to the bwin-* convention, add an 'Add windowless glass' button, and have the index theme toggle also flip bw-glass[windowless].
Add a `modal` option to addWindowlessGlass that appends a <bw-glass-backdrop for="<glassId>"> behind the glass to block interaction underneath. The backdrop sits one z-index below its glass, using the slot the manager's topZIndex reservation leaves free. Tear down the backdrop in both removeWindowlessGlass and the detached close action via a shared removeGlassBackdrop helper. Expand the addWindowlessGlass JSDoc to enumerate all options.
ohxyz
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Enhances detached glass and adds windowless glass — a detached glass that floats on
document.bodywith no owningBinaryWindow. Along the way, hardens move/resize, extracts shared utilities, and extends theming.What's in here
Windowless glass (new)
BinaryWindow.addWindowlessGlass(options)/removeWindowlessGlass(id)— a detached glass appended todocument.body, registered with the shareddetachedGlassManagerfor z-index/activation, with no owning window. Default actions are close only (DEFAULT_WINDOWLESS_GLASS_ACTIONS), since minimize/attach need a window.addWindowlessGlass({ modal: true })appends a<bw-glass-backdrop for="<glassId>">behind the glass to block interaction underneath. It sits one z-index below its glass (using the slot the manager'stopZIndexreservation leaves free) and is torn down by bothremoveWindowlessGlassand the close action via a sharedremoveGlassBackdrophelper.body(origin = document origin, scroll-adjusted) vs. inside a positionedbw-window.Fixes
enableFeatures(). Split them intoenableDetachedGlassStandaloneFeatures(), invoked once at module load, so the staticaddWindowlessGlasspath is fully interactive. Per-instance wiring keeps only the sill-bound restore handler.Refactors
glass/utils.js) used by detach/attach.windowElement.normActionsintobinary-window/utils.js.enableGlassFeature→enableGlassFeatures; restore handler →enableRestoreFromMinimizedDetachedGlass.detached-glass/drag.jsin favor of free-floatingmove.js.Theming
theme.css; extend it to windowless glasses (themed viabw-glass[windowless]).Dev pages & docs
bwin-detached-windowless-glassdev page; windowless + modal + positioned + fullscreen cases also on the detached-glass page for comparison.dark-theme→bwin-dark-themedev page.ARCHITECTURE.md(§1 glossary, §8.5 standalone-vs-per-instance split, §8.6 windowless glass),conventions.mdterminology, and resolve the now-fixeddrag.jsentry inTECH_DEBT.md.