Javascript

Description

Specify the Javascript to compute the clipping rectangle.

Discussion

When the disclosure Display type is set to 'explicit', a clipping rectangle must be defined. The clipping rectangle defines where and how the disclosure is shown. JavaScript can be used to dynamically compute the clipping rectangle.

The Javascript property is available when the Method for specifying property is set to 'Javascript'. The JavaScript to compute the clipping rectangle must create and return an object with the following properties:

Properties

edgestring

The edge from which the disclosure is shown. Can be 'top', 'bottom', 'left', or 'right'.

fillstring

Defines how the disclosure fills the clipping rectangle. Can be 'width', 'height', or 'both'.

leftnumber

The distance in pixels from the left edge of the screen.

rightnumber

The distance in pixels from the right edge of the screen.

topnumber

The distance in pixels from the top edge of the screen.

bottomnumber

The distance in pixels from the bottom edge of the screen.

For example, the JavaScript below defines a clipping rectangle that has 100 pixels of space between the edge of the screen and the edge of the rectangle, displaying the disclosure from the top and filling the width of the rectangle:

return {left: 100, top: 100, bottom: 100, right : 100, edge: 'top', fill: 'width'};

In this next example, the clipping rectangle is calculated to be a maximum width of 500 pixels. This is accomplished by dynamically computing the number of pixels between the left and right edge of the clipping rectangle based on the screen size of the device:

var s = {dialog.object}.getSize();
var w = s.width
var padding = 10;
var dialogWidth = (w - (padding*2));
var maxDialogWidth = 500;
if(dialogWidth > maxDialogWidth) { 
    var paddingTotal = (s.width - maxDialogWidth);
    padding = paddingTotal/2;
}
return {left: padding, top: 100, bottom: 10, right : padding, edge: 'top', fill: 'width'};