Window

The Window component provides a customizable floating window interface with features like dragging, resizing, minimizing, and maximizing. It can be used to create modal dialogs, information panels, or application windows.

Dependencies

• Metro.Component
• Metro.draggable
• Metro.resizable

Usage

Basic Usage

<!-- Basic usage -->
<div id="my-window" data-role="window" data-title="My Window">
    Window content goes here
</div>

Additional Configurations

<!-- With custom options -->
<div data-role="window"
     data-title="Custom Window"
     data-icon="<span class='mif-apps'></span>"
     data-width="640"
     data-height="480"
     data-place="center"
     data-btn-min="true"
     data-btn-max="true"
     data-resizable="true">
    <p>Window content goes here</p>
</div>

You can also create windows dynamically using JavaScript:

// Create window with options
var win = Metro.window.create({
    title: "Dynamic Window",
    content: "<div>Window content</div>",
    width: 400,
    height: 300,
    place: "center",
    icon: "<span class='mif-rocket'></span>"
});

Plugin Parameters

Parameter	Type	Default	Description
windowDeferred	Number	0	Defer initialization of component in milliseconds
hidden	Boolean	false	Whether window is initially hidden
width	String/Number	"auto"	Window width
height	String/Number	"auto"	Window height
btnClose	Boolean	true	Show close button
btnMin	Boolean	true	Show minimize button
btnMax	Boolean	true	Show maximize button
draggable	Boolean	true	Allow window to be dragged
dragElement	String	".window-caption .title"	Element used for dragging
dragArea	String	"parent"	Area where window can be dragged
shadow	Boolean	false	Add shadow to window
icon	String	""	Icon HTML for window caption
title	String	"Window"	Window title
content	String/Function/Element	null	Window content
resizable	Boolean	true	Allow window to be resized
overlay	Boolean	false	Create overlay behind window
overlayColor	String	"transparent"	Overlay color
overlayAlpha	Number	0.5	Overlay opacity
modal	Boolean	false	Make window modal (disables minimize and maximize)
position	String	"absolute"	CSS position value
checkEmbed	Boolean	true	Check if content is a video embed
top	String/Number	"auto"	Initial top position
left	String/Number	"auto"	Initial left position
place	String	"auto"	Window placement: “auto” or positioning values like “top-left”, “center”, etc.
closeAction	String	Metro.actions.HIDE	Action on close: REMOVE or HIDE
customButtons	Object	null	Custom buttons for window caption
status	String	""	Status bar text
canClose	Boolean	true	Whether window can be closed
canMaximize	Boolean	true	Whether window can be maximized
canMinimize	Boolean	true	Whether window can be minimized
clsCustomButton	String	""	Additional class for custom buttons
clsCaption	String	""	Additional class for caption
clsContent	String	""	Additional class for content
clsWindow	String	""	Additional class for window
minWidth	Number	0	Minimum window width
minHeight	Number	0	Minimum window height
maxWidth	Number	0	Maximum window width (0 = no limit)
maxHeight	Number	0	Maximum window height (0 = no limit)

Events

Event	Description
onDragStart	Triggered when window dragging starts
onDragStop	Triggered when window dragging stops
onDragMove	Triggered when window is being dragged
onWindowClick	Triggered when window is clicked
onCaptionClick	Triggered when caption is clicked
onCaptionDblClick	Triggered when caption is double-clicked
onCloseClick	Triggered when close button is clicked
onMaxClick	Triggered when maximize button is clicked
onMinClick	Triggered when minimize button is clicked
onResizeStart	Triggered when resizing starts
onResizeStop	Triggered when resizing stops
onResize	Triggered when window is being resized
onWindowCreate	Triggered after window creation
onShow	Triggered when window is shown
onWindowDestroy	Triggered before window is destroyed
onCanClose	Function that determines if window can be closed
onMinimize	Triggered when window is minimized
onMaximize	Triggered when window is maximized
onClose	Triggered when window is closed

API Methods

To access the window component API:

// Get window component
var window = Metro.getPlugin("#my-window", "window");

// Call method
window.setTitle("New Title");

• width(value) - Get or set window width
• height(value) - Get or set window height
• maximize(event) - Maximize the window
• minimize() - Minimize the window
• close() - Close the window
• hide() - Hide the window
• show() - Show the window
• toggle() - Toggle window visibility
• isOpen() - Check if window is visible
• min(toggle) - Set minimized state
• max(toggle) - Set maximized state
• setContent(content) - Set window content
• setTitle(title) - Set window title
• setIcon(icon) - Set window icon
• getIcon() - Get window icon
• getTitle() - Get window title
• toggleDraggable(flag) - Enable/disable dragging
• toggleResizable(flag) - Enable/disable resizing
• pos(top, left) - Set window position
• top(value) - Set window top position
• left(value) - Set window left position

Static Methods

Metro.window provides static methods to control windows:

// Using static methods
Metro.window.min("#my-window", true);
Metro.window.close("#my-window");

• Metro.window.min(el, flag) - Minimize window
• Metro.window.max(el, flag) - Maximize window
• Metro.window.show(el) - Show window
• Metro.window.hide(el) - Hide window
• Metro.window.toggle(el) - Toggle window visibility
• Metro.window.isOpen(el) - Check if window is open
• Metro.window.close(el) - Close window
• Metro.window.pos(el, top, left) - Set window position
• Metro.window.top(el, top) - Set window top position
• Metro.window.left(el, left) - Set window left position
• Metro.window.width(el, width) - Set window width
• Metro.window.height(el, height) - Set window height
• Metro.window.create(options, parent) - Create new window

Styling with CSS Variables

The window component uses the following CSS variables that you can customize:

Variable	Default (Light)	Dark Mode	Description
--window-scrollbar-size	6px	6px	Scrollbar size
--window-scrollbar-track-radius	0	0	Scrollbar track radius
--window-border-size	4px	4px	Window border size
--window-border-radius	6px	6px	Window border radius
--window-border-color	#f3f3f3	#484b4c	Window border color
--window-background	#fff	#1e1f22	Window background color
--window-color	#191919	#dbdfe7	Window text color
--window-caption-color	#191919	#dbdfe7	Caption text color
--window-scrollbar-thumb-color	#a8a8a8	#d1d1d1	Scrollbar thumb color
--window-scrollbar-track-color	#f1f1f1	#2c2c2c	Scrollbar track color
--window-resize-element-color	#a8a8a8	#2c2c2c	Resize handle color
--window-sys-button-color	#191919	#ffffff	System button color
--window-sys-button-backgroud-hover	#d8d8d8	#2c2c2c	System button hover background
--window-close-button-backgroud-hover	#C75050FF	#C75050FF	Close button hover background
--window-close-button-color-hover	#ffffff	#ffffff	Close button hover text color

Example of Custom Styling

#my-window {
    --window-border-radius: 10px;
    --window-border-color: #0078d7;
    --window-caption-color: #ffffff;
}

Available CSS Classes

Base Classes

• .window - Main window container
• .window-caption - Window title bar
• .window-content - Window content area
• .window-status - Window status bar

Modifiers

• .shadowed - Adds shadow to window
• .modal - Modal window style
• .minimized - Minimized window state
• .maximized - Maximized window state
• .resizable - Allows window to be resized
• .info-window - Info-styled window
• .alert-window - Alert-styled window
• .warning-window - Warning-styled window
• .success-window - Success-styled window

Example of Colored Windows

<!-- Info window -->
<div data-role="window" class="info-window">Info window</div>

<!-- Alert window -->
<div data-role="window" class="alert-window">Alert window</div>

<!-- Warning window -->
<div data-role="window" class="warning-window">Warning window</div>

<!-- Success window -->
<div data-role="window" class="success-window">Success window</div>

Global Configuration

You can globally configure the window component using the Metro.windowSetup method:

Metro.windowSetup({
    shadow: true,
    draggable: true,
    resizable: true,
    btnMax: false,
    place: "center"
});