UI.Window - keep the popups inside the document

Synopsis

<!-- Plain old HTML -->
<div id="myWindow" class="uiwindow"
     style="height:400px; width:400px; left: 0px; top: 0px; position: absolute;">
    <h1>My first window <img align="right" src="close.gif" onclick="w$('myWindow').close()"></h1>
    <div class="uicontent">
        Window content goes here.
    </div>
</div>


// Windows can be created and manipulated by Javascript too
var win = new UI.Window('myDOMElement');
win.setTitleBar(UI.Window.standardTitleBar('UI.Window Demo'));
win.include('window-content.html');

Description

UI.Window is a simple container, draggable by the title bar.

By the way. the titlebar is just another div element. It can contain whatever elements you want.

TODO: Specialized Window, having a standar title bar with close, minimize and restore button at least.

Dependencies

Overview

UI.Window is a very simple convenience widget, as almost all the features provided are provided with the DOM or on MochiKit.

The more prominent feature is the XMLHTTP inclusion of other html fragments, enabling you to make includes without server-side support. But be careful: as stated in the API Reference, by now this don't work for any HTML fragment.

API Reference

Class UI.Window

Inherits from UI.Widget.

UI.Window(element):

Constructs a window wrapping the element DOM node.

If the element has no child with the CSS class uititlebar, a default titlebar is created

If the element has no child with the CSS class 'uicontent', that child is created, and the element children is moved to that child. [TODO: clarify this]

Properties

UI.Window.prototype.element:

The div element wrapped by the Window. Read-Only.

UI.Window.prototype.titleBar:

The div element containing the title bar. Read-Only, use setTitleBar(titleBarElement).

UI.Window.prototype.content

The div element containing the main window area. Read-Only, use setContent(contentElement).

UI.Window.prototype.visible:

True is the Window is visible. Read-Only.

UI.Window.draggableTitle:

The UI.Draggable wrapping the titlebar. Read-Only.

Signals

hidden:

Fired when the window is hidden.

show:

Fired when the window is shown.

closed:

Fired when the window is closed. Note that the window element doesn't exists anymore when the signal is fired.

moved:

Fired when the window is moved.

Methods

UI.Window.prototype.show(coords=null)

Makes the window visible. if coords is not null, the window element position will be (coords.x, coords.y).

Emits the shown signal.

UI.Window.prototype.hide()

Makes the window invisible.

Emits the hidden signal.

UI.Window.prototype.close()

Destroys the Window.

Emit the closed signal.

UI.Window.prototype.moveTo(coords):

Sets the window element position to (coords.x, coords.y).

UI.Window.prototype.resize(dimensions):

Sets the window element dimensions to dimensions.h`x`dimensions.w.

UI.Window.prototype.include(url)

Asynchronously loads the url and includes the content inside the window.

The url contents are expected to be an HTML fragment. (No <html>, <head>, <body> tags).

Note: As innerHTML is used to insert the content inside the window, any <script> tags present on the content will not work. Other elements or attributes may or may not work so use this with caution.

Returns the Deferred returned by doSimpleXMLHttpRequest.

Automatic widget construction details

Declaration of windows on HTML is straightforward:

<div class="uiwindow style="position:relative; height:<number>px; width:<number>px"
     ui:draggable="true|false">
    <h1>Window Title</h1>
    <div class="uicontent">Window Content</div>
</div>

The position, height and width are not required, as they can be specified in other ways (such a CSS stylesheet).

The ui:draggable special attribute is optional, default to true. If explicitly set to false the window would not be draggable by the user. As this is done disabling the draggable contained on the property UI.Window.prototype.draggableTitle, you can re-enable it with javascript.

Authors

Copyright

Copyright 2005-2006 Leonardo Soto M. <leo.soto@gmail.com> and Imagemaker IT <http://www.imagemaker.cl>.

This program is licensed under the CDDL v1.0 license, see http://www.sun.com/cddl/cddl.html.