Overview
Window Class
Main class to handle windowsWindow.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 observersoverlayShowEffectOptions 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.