Javascript Library

Modification Status

The ModificationStatus is a global object with a field isModified indicating if some saveable information has been changed on the page.

The isModified field can be set by client code (see example: if the user clicks on the div with the blue background color isModified is set to true), or alternatively elements that fire change events can be registered for being monitored using watchElements (the following example adds listeners to all input fields).watchElements takes a jquery selector string to specify the elements to be watched.

Example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" /> <script src="/scripts/modification-status.js" type="text/javascript" /> <script type="text/javascript"> ModificationStatus.watchElements("input"); </script> <title>Simple</title> </head> <body> <div> <div>click to modify: <div style="background-color: blue" onclick="this.style.backgroundColor = 'red'; ModificationStatus.isModified = true"> </div> </div> <a href="http://clerezza.org/">clerezza.org</a> <a href="http://clerezza.org/">clerezza.org</a> <input type="text" / > </body> </html>

Status Message

StatusMessage allows to add/remove status messages (e.g. saving) to an overlay (absolut positioned div) which follows the mouse pointer. During a ajax request a status message can be added and after the response the message can be removed. Each message is added to an array.

Example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link type="text/css" href="/style/style.css" rel="stylesheet" /> <script src="/jquery/jquery-1.3.2.min.js" type="text/javascript" /> <script src="/scripts/status-message.js" type="text/javascript" /> <title>Simple</title> </head> <body> <div> <a href="#" onclick="statusMessage.add('id-of-message', 'text to display');">click here to add the message </a> <br/> <a href="#" onclick="statusMessage.remove('id-of-message');">click here to remove the message </a> </div> </body> </html>

Alert Message

AlertMessage shows a dialog box on top of a page. AlertMessage has a method show, which creates and renders a dialog box. This method takes as argument a callback function, which is executed when the "accept"-button is pressed, message, a header message, text for the "accept"-button and text for the "decline"-button. The message, header message, text for "accept"-button, text for the "decline"-button are optional. The default values are shown in the following example.

AlertMessage needs the following css and javascript:

AlertMessage.show(function(){alert("done");}, "Are you sure you want to lose the unsaved changes", "Unsaved changes", "Yes", "No");

Overlay

The Overlay behave similarly to an OS window. Unlike true browser popup windows, the overlay is floating DHTML elements embedded directly within the page context. The Overlay is positioned above the flow of a page and is draggable, resizable and has a close button. The Overlay has a method show with arguments body, header, width and height, which renders the overlay. The body and the header can be html elements or text. The width (default value: 46em) and height (default value: 37em) can be defined absolutely or relatively.

The following css and scripts have to be included:

Example;:

... <body> <div style="display: none"> <div id="myOverlayBody">body</div> </div> <div> <a href="#" onclick="Overlay.show($('#myOverlayBody').html(),'header', '20em', '10em');">click here to add the overlay </a> <br/> </div> </body> ...