Overview
Window Class
Main class to handle windows
Window.keepMultiModalWindow Constant
for multi modal window behavior.
By default (Window.keepMultiModalWindow=false),
a new modal window will hide the previous one. if Window.keepMultiModalWindow=true,
a new modal window will move the previous one under the overlay.
initialize(id, options) Window constructor used when creating new window (new Window(id, options))
id DOM id of the window must be unique
options
Hash map of window options, here is the key list:
Key
Default
Description
id
generated
window DOM id. Must be unique
className
dialog
Class name prefix
title
none
Window's title
url
none
URL of window content (use an iframe)
parent
body
Parent node of the window
top | bottom
top:0
Top or bottom position of the window in
pixels
right | left
left:0
Right or left position of the window in
pixels
width / height
100
width and height of the window
maxWidth / maxHeight
none
Maximum width and height of the window
minWidth / minHeight
100/20
Minimum width and height of the window
resizable
true
Specify if the window can be resized
closable
true
Specify if the window can be closed
minimizable
true
Specify if the window can be minimized
maximizable
true
Specify if the window can be maximized
draggable
true
Specify if the window can be moved
showEffect
Effect.Appear or
Element.showShow effect function. The default value
depends if effect.js of script.aculo.us is included
hideEffect
Effect.Fade or
Element.hideHide effect function. The default value
depends if effect.js of script.aculo.us is included
showEffectOptions
none
Show effect options (see script.aculo.us
documentation).
hideEffectOptions
none
Hid effect options (see script.aculo.us
documentation).
effectOptions
none
Show and hide effect options (see
script.aculo.us documentation).
onload
none
Onload function of the main window div
or iframe
opacity
1
Window opacity
recenterAuto
true
Recenter modal window when browser size
has changed
gridX
1
Move and resize will snap on a grid
gridY
1
Move and resize will snap on a grid
recenterAuto
true
Recenter modal window when browser size
has changed
wiredDrag
false
Move/Resize will be done with a wired
frame (customizable in CSS, class <className>_wired_frame.
Look in alphacube.css for an example)
destroyOnClose
false
Destroy window when closing window. By
default, the window is just hidden
all callbacks
none
All callback used in observer. Callbacks
override observer callbacks:
onDestroy
onStartResize onStartMove onResize onMove onEndResize
onEndMove onFocus onBlur onBeforeShow onShow onHide onMinimize
onMaximize onClose
setCloseCallback(function) Sets close callback function
function Close callback function, return true if the window can be closed, else return false
setContent(id, autoresize, autoposition) Sets window content using an existing element (does not work with url/iframe)
id Element id to insert in the window
autoresize (default false) Resizes the window to fit with its content
autoposition (default false) Sets the current window position to the specified input element
setURL(url) Sets window content using an URL.
url URL for content (content will be shown using an iframe)
setAjaxContent(url, options, showCentered, showModal) Sets window content using an Ajax request. The request must return HTML code. See script.aculo.us Ajax.request documentation for details. When the response is received, the window is shown.
url Ajax request URL
options Ajax request options
showCentered (default false) Displays window centered when response is received
showModal (default false) Displays window in modal mode when response is received
setCookie(name, expires, path, domain, secure) Sets cookie informations to store window size and position
name (default window's id) Cookie name
expires, path, domain, secure Cookie attributes
setLocation(top, left) Sets window top-left position
top Top position in pixels
bottom Bottom position in pixels
updateWidth() Recompute window width, useful when you change window content and do not want scrolling
updateHeight() Recompute window height, useful when you change window content and do not want scrolling
showCenter(modal, top, left) Shows window in page's center. You can set top (or left) if you want to center only left (or top) value
modal (default false) top (default null) left (default null) Modal mode
Dialog module
Dialog factory to open alert/confirm/info modal panelsconfirm(content, options) Opens a modal dialog with two buttons (ok/cancel for example)
content
- If the content is a string, it will be the message displayed in
the dialog (HTML code)
- If the content is an hash map,
it will be used for setting content with an AJAX request. The
hashmap must have url key and an optional options key (ajax
options request)
options
Hash map of dialog options, here is the key list:
Key
Default
Description
top
null
Top position
left
null
Left position
okLabel
Ok
Ok button label
cancelLabel
Cancel
Cancel button label
onOk
none
Ok callback function called on ok button
onCancel
none
Cancel callback function called on ok
button
buttonClass
none
Ok/Cancel button css class name
All window parameters
none
Add all window constructor options
alert(content, options) Opens a modal alert with one button (ok for example)
content
- If the content is a string, it will be the message displayed in
the dialog (HTML code)
- If the content is an hash map,
it will be used for setting content with an AJAX request. The
hashmap must have url key and an optional options key (ajax
options request)
options
Hash map of dialog options, here is the key list:
Key
Default
Description
top
null
Top position
left
null
Left position
okLabel
Ok
Ok button label
onOk
none
Ok callback function called on ok button
buttonClass
none
Ok/Cancel button css class name
All window parameters
none
Add all window constructor options
info(content, options) Opens a modal info panel without any button. It can have a progress image (Used to display submit waiting message for example)
content
- If the content is a string, it will be the message displayed in
the dialog (HTML code)
- If the content is an hash map,
it will be used for setting content with an AJAX request. The
hashmap must have url key and an optional options key (ajax
options request)
options
Hash map of dialog options, here is the key list:
Key
Default
Description
top
null
Top position
left
null
Left position
showProgress
false
Add a progress image (info found in the
css file)
All window parameters
none
Add all window constructor options
setInfoMessage(message) Sets info message (Used to display waiting information like 32% done for example)
message New info message
Windows
Windows factory. Handles created windows, and windows observers
overlayShowEffectOptions Overlay show
effect options.
By default it's {duration:
0.5}. If you set it to null, no effects will be applied
overlayHideEffectOptions Overlay hide
effect options.
By default it's {duration:
0.5}. If you set it to null, no effects will be applied.
addObserver(observer) Registers a new
windows observer. Should be able to respond to
onDestroy
onStartResize onStartMove onResize onMove onEndResize onEndMove
onFocus onBlur onBeforeShow onShow onHide onMinimize onMaximize
onClose
observer Observer object
Add-ons
Add-on behaviors to PWCWindowsStore.init(cookieName, expired) Save automatically show/hide window status. Just add WindowsStore.init() at the end of you HTML file.
cookieName Cookie name used to store window information (default: __window_store__)
expired Cookie expiration date (default: In 3 years!!)
WindowCloseKey.init(keyCode) Handle key to close windows or dialogs. Just add WindowsStore.init() at the end of you HTML file.
keyCode Key used to close windows (default: Event.KEY_ESC)
TooltipManager Singleton to handle tooltips using PWC.
Tooltips are not "regular"
tooltips that show/hide on specific areas. Those tooltips are PWC
windows that keeps alive in you move the mouse over it. Like this,
you can have forms, links are anything you want in your tooltips.
Tooltips content can be set by giving a html element
already present in the page (usually hidden), by ajax using an url
or by url. It works in two modes:
Check sample code in samples/tooltips/tooltip.html to see how it
works.