Prototype-UI
Release Candidate 0
Utilities
Carousel
Shadow
Window
WindowManager
Index

UI. Window

Main class to handle windows inside a web page.

Example

new UI.Window({ theme: 'bluglighting' }).show()
Summary
UI. Window
Main class to handle windows inside a web page.
Options
theme
window theme, uses the window manager theme as default
shadowTheme
window shadow theme, uses the window manager one as default Only useful if shadow options is true, see UI.Shadow for details
id
id ot the window, generated by default
windowManager
window manager that manages this window, uses UI.defaultWM as default
resizable
true by default
draggable
true by default
wired
draw wires around window when dragged, false by default
show
Function used to show the window, default is Element.show
hide
Function used to hide the window, default is Element.hide.
superflousEffects
uses superflous effects when resizing or moving window.
shadow
draw shadow around the window, default is false
activeOnClick
When set to true, a click on an blurred window content activates it, default is true
close
Window method name as string, or false to disable close button Default is ‘destroy’
minimize
Window method name as string, or false to disable minimize button Default is ‘toggleFold’
maximize
Window method name as string, or false to disable maximize button Default is ‘toggleMaximize’
Attributes
id
DOM id of the window’s element
element
DOM element containing the window
windowManager
Window manager that manages the window
content
Window content element
header
Window header element
footer
Window footer element
visible
true if window is visible
focused
true if window is focused
folded
true if window is folded
maximized
true if window is maximized
Events
List of events fired by a window
created
Fired after creating the window
destroyed
Fired after destroying the window
showing
Fired when showing a window
shown
Fired after showing effect
hiding
Fired when hiding a window
hidden
Fired after hiding effect
focused
Fired after focusing the window
blurred
Fired after bluring the window
maximized
Fired after maximizing the window
restored
Fired after restoring the window from its maximized state
fold
Fired after unfolding the window
unfold
Fired after folding the window
altitude: changed
Fired when window altitude has changed (z-index)
size: changed
Fired when window size has changed
position: changed
Fired when window position has changed
move: started
Fired when user has started a moving a window, position:changed are then fired continously
move: ended
Fired when user has finished moving a window
resize: started
Fired when user has started resizing window, size:changed are then fired continuously
resize: ended
Fired when user has finished resizing window
Contructor
initialize
Constructor, should not be called directly, it’s called by new operator (new Window()) The window is not open and nothing has been added to the DOM yet
destroy
Destructor, closes window, cleans up DOM and memory
Event handling
fire
Fires a window custom event automatically namespaced in “window:” (see Prototype custom events).
observe
Observe a window event with a handler function automatically bound to the window
Actions
show
Opens the window (appends it to the DOM)
hide
Hides the window, (removes it from the DOM)
activate
Brings window to the front and sets focus on it
bringToFront
Brings window to the front (but does not set focus on it)
sendToBack
Sends window to the back (without changing its focus)
focus
Focuses the window (without bringing window to the front)
blur
Blurs the window (without changing windows order)
maximize
Maximizes window inside its viewport (managed by WindowManager) Makes window take full size of its viewport
restore
Restores a maximized window to its initial size
toggleMaximize
Maximizes/Restores window inside it’s viewport (managed by WindowManager)
adapt
Adapts window size to fit its content
fold
Folds window content
unfold
Unfolds window content
toggleFold
Folds/Unfolds window content
setHeader
Sets window header, equivalent to this.header.update(...)
setContent
Sets window content, equivalent to this.content.update(...)
setFooter
Sets window footer, equivalent to this.footer.update(...)
setAjaxContent
Sets window content using Ajax request
Size and Position
getPosition
Returns top/left position of a window (in pixels)
setPosition
Sets top/left position of a window (in pixels)
center
Centers the window within its viewport
getSize
Returns window width/height dimensions (in pixels)
setSize
Sets window width/height dimensions (in pixels), fires size:changed
getBounds
Returns window bounds (in pixels)
setBounds
Sets window bounds (in pixels), fires position:changed and size:changed
getAltitude
Returns window altitude, an integer between 0 and the number of windows, the higher the altitude number - the higher the window position.
setAltitude
Sets window altitude, fires ‘altitude:changed’ if altitude was changed
setResizable
TODO
setDraggable
TODO
Theme
getTheme
Returns window theme name
setTheme
Sets window theme
getShadowTheme
Returns shadow theme name

Options

theme

window theme, uses the window manager theme as default

shadowTheme

window shadow theme, uses the window manager one as default Only useful if shadow options is true, see UI.Shadow for details

id

id ot the window, generated by default

windowManager

window manager that manages this window, uses UI.defaultWM as default

resizable

true by default

draggable

true by default

wired

draw wires around window when dragged, false by default

show

Function used to show the window, default is Element.show

hide

Function used to hide the window, default is Element.hide.

superflousEffects

uses superflous effects when resizing or moving window. it’s true if Scriptaculous’ Effect is defined, false otherwise

shadow

draw shadow around the window, default is false

activeOnClick

When set to true, a click on an blurred window content activates it, default is true

close

Window method name as string, or false to disable close button Default is ‘destroy’

minimize

Window method name as string, or false to disable minimize button Default is ‘toggleFold’

maximize

Window method name as string, or false to disable maximize button Default is ‘toggleMaximize’

Attributes

id

DOM id of the window’s element

element

DOM element containing the window

windowManager

Window manager that manages the window

content

Window content element

header

Window header element

footer

Window footer element

visible

true if window is visible

focused

true if window is focused

folded

true if window is folded

maximized

true if window is maximized

Events

List of events fired by a window

created

Fired after creating the window

destroyed

Fired after destroying the window

showing

Fired when showing a window

shown

Fired after showing effect

hiding

Fired when hiding a window

hidden

Fired after hiding effect

focused

Fired after focusing the window

blurred

Fired after bluring the window

maximized

Fired after maximizing the window

restored

Fired after restoring the window from its maximized state

fold

Fired after unfolding the window

unfold

Fired after folding the window

altitude: changed

Fired when window altitude has changed (z-index)

size: changed

Fired when window size has changed

position: changed

Fired when window position has changed

move: started

Fired when user has started a moving a window, position:changed are then fired continously

move: ended

Fired when user has finished moving a window

resize: started

Fired when user has started resizing window, size:changed are then fired continuously

resize: ended

Fired when user has finished resizing window

Contructor

initialize

initialize: function(options)

Constructor, should not be called directly, it’s called by new operator (new Window()) The window is not open and nothing has been added to the DOM yet

Parameters

options(Hash) list of optional parameters

Returns

this

destroy

destroy: function($super)

Destructor, closes window, cleans up DOM and memory

Event handling

fire

fire: function(eventName,
memo)

Fires a window custom event automatically namespaced in “window:” (see Prototype custom events).  The memo object contains a “window” property referring to the window.

Example

UI.Window.addMethods({
  iconify: function() {
    // ... your iconifying code here ...
    this.fire('iconified');
    // chain friendly
    return this;
  }
});

document.observe('window:iconified', function(event) {
  alert("Window with id " + event.memo.window.id + " has just been iconified");
});

Parameters

eventNamean event name
memoa memo object

Returns

fired event

observe

observe: function(eventName,
handler)

Observe a window event with a handler function automatically bound to the window

Parameters

eventNamean event name
handlera handler function

Returns

this

Actions

show

show: function(modal)

Opens the window (appends it to the DOM)

Parameters

modalopen the window in a modal mode (default false)

Returns

this

hide

hide: function()

Hides the window, (removes it from the DOM)

Returns

this

activate

activate: function()

Brings window to the front and sets focus on it

Returns

this

bringToFront

bringToFront: function()

Brings window to the front (but does not set focus on it)

Returns

this

sendToBack

sendToBack: function()

Sends window to the back (without changing its focus)

Returns

this

focus

focus: function()

Focuses the window (without bringing window to the front)

Returns

this

blur

blur: function()

Blurs the window (without changing windows order)

Returns

this

maximize

maximize: function()

Maximizes window inside its viewport (managed by WindowManager) Makes window take full size of its viewport

Returns

this

restore

restore: function()

Restores a maximized window to its initial size

Returns

this

toggleMaximize

toggleMaximize: function()

Maximizes/Restores window inside it’s viewport (managed by WindowManager)

Returns

this

adapt

adapt: function()

Adapts window size to fit its content

Returns

this

fold

fold: function()

Folds window content

Returns

this

unfold

unfold: function()

Unfolds window content

Returns

this

toggleFold

toggleFold: function()

Folds/Unfolds window content

Returns

this

setHeader

setHeader: function(header)

Sets window header, equivalent to this.header.update(...) but allows chaining

Returns

this

setContent

setContent: function(content)

Sets window content, equivalent to this.content.update(...) but allows chaining

Returns

this

setFooter

setFooter: function(footer)

Sets window footer, equivalent to this.footer.update(...) but allows chaining

Returns

this

setAjaxContent

setAjaxContent: function(url,
options)

Sets window content using Ajax request

Parameters

urlAjax URL
optionsAjax Updater options (see http://prototypejs.org/api/ajax/options and http://prototypejs.org/api/ajax/updater)

Returns

this

Size and Position

getPosition

getPosition: function()

Returns top/left position of a window (in pixels)

Returns

an Hash {top:, left:}

setPosition

setPosition: function(top,
left)

Sets top/left position of a window (in pixels)

Parameters top: top position in pixel left: left position in pixel

Returns

this

center

center: function(options)

Centers the window within its viewport

Returns

this

getSize

getSize: function(innerSize)

Returns window width/height dimensions (in pixels)

Parameters innerSize: returns content size if true, window size if false (defaults to false)

Returns

Hash {width:, height:}

setSize

setSize: function(width,
height,
innerSize)

Sets window width/height dimensions (in pixels), fires size:changed

Parameters width: width (in pixels) height: height (in pixels) innerSize: if true change set content size, else set window size (defaults to false)

Returns

this

getBounds

getBounds: function(innerSize)

Returns window bounds (in pixels)

Parameters innerSize: returns content size if true, window size otherwise

Returns

an Hash {top:, left:, width:, height:}

setBounds

setBounds: function(bounds,
innerSize)

Sets window bounds (in pixels), fires position:changed and size:changed

Parameters bounds: Hash {top:, left:, width:, height:} where all values are optional innerSize: sets content size if true, window size otherwise

Returns

Hash {top:, left:, width:, height:}

getAltitude

getAltitude: function()

Returns window altitude, an integer between 0 and the number of windows, the higher the altitude number - the higher the window position.

setAltitude

setAltitude: function(altitude)

Sets window altitude, fires ‘altitude:changed’ if altitude was changed

setResizable

setResizable: function(resizable)

TODO

setDraggable

setDraggable: function(draggable)

TODO

Theme

getTheme

getTheme: function()

Returns window theme name

setTheme

setTheme: function(theme,
windowManagerTheme)

Sets window theme

getShadowTheme

getShadowTheme: function()

Returns shadow theme name
Generated by Natural Docs
draw shadow around the window, default is false
Add shadow around a DOM element.
initialize: function(options)
Constructor, should not be called directly, it’s called by new operator (new Window()) The window is not open and nothing has been added to the DOM yet
destroy: function($super)
Destructor, closes window, cleans up DOM and memory
fire: function(eventName,
memo)
Fires a window custom event automatically namespaced in “window:” (see Prototype custom events).
observe: function(eventName,
handler)
Observe a window event with a handler function automatically bound to the window
show: function(modal)
Opens the window (appends it to the DOM)
hide: function()
Hides the window, (removes it from the DOM)
activate: function()
Brings window to the front and sets focus on it
bringToFront: function()
Brings window to the front (but does not set focus on it)
sendToBack: function()
Sends window to the back (without changing its focus)
focus: function()
Focuses the window (without bringing window to the front)
blur: function()
Blurs the window (without changing windows order)
maximize: function()
Maximizes window inside its viewport (managed by WindowManager) Makes window take full size of its viewport
restore: function()
Restores a maximized window to its initial size
toggleMaximize: function()
Maximizes/Restores window inside it’s viewport (managed by WindowManager)
adapt: function()
Adapts window size to fit its content
fold: function()
Folds window content
unfold: function()
Unfolds window content
toggleFold: function()
Folds/Unfolds window content
setHeader: function(header)
Sets window header, equivalent to this.header.update(...)
setContent: function(content)
Sets window content, equivalent to this.content.update(...)
setFooter: function(footer)
Sets window footer, equivalent to this.footer.update(...)
setAjaxContent: function(url,
options)
Sets window content using Ajax request
getPosition: function()
Returns top/left position of a window (in pixels)
setPosition: function(top,
left)
Sets top/left position of a window (in pixels)
center: function(options)
Centers the window within its viewport
getSize: function(innerSize)
Returns window width/height dimensions (in pixels)
setSize: function(width,
height,
innerSize)
Sets window width/height dimensions (in pixels), fires size:changed
getBounds: function(innerSize)
Returns window bounds (in pixels)
setBounds: function(bounds,
innerSize)
Sets window bounds (in pixels), fires position:changed and size:changed
getAltitude: function()
Returns window altitude, an integer between 0 and the number of windows, the higher the altitude number - the higher the window position.
setAltitude: function(altitude)
Sets window altitude, fires ‘altitude:changed’ if altitude was changed
setResizable: function(resizable)
TODO
setDraggable: function(draggable)
TODO
getTheme: function()
Returns window theme name
setTheme: function(theme,
windowManagerTheme)
Sets window theme
getShadowTheme: function()
Returns shadow theme name