nextapps-de/winbox
Winbox
Winbox is a browser-based windowing system and JavaScript library for creating draggable and resizable floating windows within a web interface. It functions as a floating window framework that enables the development of desktop-like experiences using a configurable viewport and coordinate system.
The system allows for the rendering of various content types, including raw HTML, existing DOM elements, and remote URLs loaded via iframes. It provides extensive UI customization through custom window layout templates, visual theme application via CSS classes, and the addition of custom controls to the window toolbar.
The framework includes a comprehensive window management suite for orchestrating multiple independent instances. This covers focus tracking and z-index stacking, programmatic control of window states—such as minimizing, maximizing, and hiding—and the ability to restrict movement or resizing through viewport limit configurations. It also features event-driven lifecycle callbacks for handling window movement, resizing, and closing interception.
Features
- Floating Window Frameworks - Generates customizable, draggable window containers within the interface to organize content and user interactions.
- DOM-Based Window Management - Simulates a desktop windowing environment by manipulating DOM elements with absolute positioning.
- Window Stack Tracking - Retrieves an ordered list of all active windows based on their focus history.
- Floating Window Components - Provides draggable and resizable floating window components for desktop-like web interfaces.
- Multi-Window Controllers - Spawns and controls several independent windows with their own states and settings within a single web interface.
- Window Lifecycle Controllers - Controls the lifecycle, visibility, and positioning of multiple virtual windows.
- Window Focus Control - Brings a window to the front of the stack to manage user interaction priority.
- Z-Index Management - Manages the stacking order of windows to ensure the focused window remains on top.
- Visual Theme Application - Provides the ability to change window appearances using CSS classes and custom styles for borders and backgrounds.
- Window State Callbacks - Provides event-driven callbacks for handling window state changes like movement, resizing, and closure.
- Toolbar Button Customizations - Allows the addition of custom buttons with icons and click listeners to the window heading toolbar.
- Window State Controls - Toggles visibility and size by minimizing, maximizing, hiding, or restoring the window to a previous state.
- Window Positioning Control - Sets initial coordinates and viewport boundaries to restrict movement or create custom split-screen grids.
- Customizable UI Components - Offers customizable containers for rendering HTML and iframes with programmable toolbars.
- Programmatic Position and Size - Sets window properties such as position, size, and modal state programmatically.
- Window Lifecycle Monitors - Executes callback functions in response to lifecycle events such as resizing, movement, focusing, and closing.
- Iframe-Based Rendering - Renders remote web content inside isolated iframes within window containers.
- Iframe Content Integration - Opens websites or resources inside the window using iframes and various URI schemes in the product.
- CSS Class-Based Styling - Provides a system for toggling visual themes and styles via CSS classes on window containers.
- UI Customization Frameworks - Provides a framework for creating specialized UI elements with custom toolbars and themes.
- Viewport Constraints - Implements logic to restrict window movement and resizing based on predefined viewport boundaries.
- UI Window Templates - Allows replacing the default window structure with custom HTML templates.
- Browser-Based Application Runtimes - Creates a browser-based desktop environment where multiple apps or URLs are hosted in managed windows.
- DOM Element Manipulators - Injects and mounts existing DOM elements directly into the window body.
- HTML Content Renderers - Renders static or dynamic HTML content within the window body.
