Window

The draggable Window component provides a desktop-like container with minimize, maximize, and close controls. Windows can be positioned absolute, dragged within their parent container, and dynamically loaded via AJAX requests.

Default Window Title

This is a draggable window constrained to this container. Try dragging it by its header bar!

<!-- 1. Static HTML Window (Movable inside relative container) -->
<div style="position: relative; height: 400px; border: 2px dashed var(--secondary-color);">
    <div class="window" style="position: absolute;">
        <div class="window-header">
            <span>Window Title</span>
            <div class="window-controls">
                <button class="btn-min">−</button>
                <button class="btn-max">□</button>
                <button class="btn-close">×</button>
            </div>
        </div>
        <div class="window-content">
            This is a draggable window.
        </div>
    </div>
</div>

<!-- 2. Load Window Contents Dynamically via AJAX -->
<button class="btn success" onclick="Window.loadFromUrl('content-endpoint.html', { title: 'AJAX Loaded', width: '380px', container: this.closest('.container-element') })">
    Load Window
</button>

JavaScript API Reference

The global Window utility allows programmatically managing and creating draggable windows:

Method	Parameters	Description
Window.create(options)	`options` (Object)	Creates a draggable window element and appends it to the DOM. Options include: `title`: Header text string. `content`: Plain text or HTML block content. `width` / `height`: Dimensions (default: width 350px, height auto). `x` / `y`: Coordinates relative to parent container.
Window.loadFromUrl(url, options)	`url` (String), `options` (Object, optional)	Creates a window immediately displaying a loading state, fetches the content from the `url` via Fetch/AJAX, populates the window body, and scans the content to initialize nested components. Supports the same options as `Window.create`.