Class adf.Callout

Extends adf.PageElement.

Defined in: Callout.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	adf.Callout(calloutId, args) A widget used to highlight a point on a given HTML element by drawing a "call-out" or "bubble" and displaying relevant information within it.

Field Summary
Field Attributes	Field Name and Description
	dontAnimate turns off transition animations when set to true
	fadeDuration the duration (in milliseconds) of fade transition animations used during .show() and .hide()
	height the fixed height body content
	layoutClass the CSS class name for the core layout elements of this widget
	maxHeight the maximum height to allow for the body content
	maxWidth the maximum width to allow for the body content
	sizeDuration the duration (in milliseconds) of transition animations for expanding and collapsing the callout
	themeClass themeClass the CSS class name for the visual styling components of this widget
	width the fixed width body content
	zIndex the CSS z-index property for this widget

Fields borrowed from class adf.PageElement:: bounds, divId, divObject, id

Method Summary
Method Attributes	Method Name and Description
	collapse() Sets the content and footer sections of the content to not be visible.
	createDom(container) Constructs the HTML DOM for this callout.
	expand() Sets the content and footer sections of the callout to visible.
	fit(sizes) Resizes the callout body to fit to the current contents if no arguments are passed.
	getAnchorPosition() Returns a String describing how the callout is currently anchord in its container.
	getCalloutPosition() Returns the absolute position coordinates for the callout DOM node (this.divObject) with respect to its containing element in the form of {l: pixelsLeft, t: pixelsTop}
	getContainerDimensions() Returns the dimensions of the containing element in the form of {h: heightInPixels, w: heightInPixels}.
	getContent() The callout content just as it was passed to setContent().
	hide() Hides the entire callout display.
	init(container)
	isCollapsed() Returns true if the callout is in the collapsed state, regardless if it is visible
	isVisible() Returns true if the the callouts .divObject element has its style.display property set to "block".
	loadSpriteOffsets(props) Resets the sprite image position information for the "arrow" section of the callout
	moveTo(left, top) Moves the anchor point of the callout to the coordinates specified (with respect to its containing element).
	setContent(content) Sets the callout content to be displayed.
	setThemeClass(className) Apply your custom theme CSS classes to the callout.
	show(content) Shows the entire callout display.
	toggle() Toggles between the collapsed/expanded states of the callout.

Methods borrowed from class adf.PageElement:: resize

Event Summary
Event Attributes	Event Name and Description
	afterMove() This event is fired after adf.Callout.moveTo operation has been completed.
	beforeMove() THis event is fired just before adf.Callout.moveTo is called
	onCollapse() This event is fired after adf.Callout.collapse operation has been completed.
	onContentChange() Event fired when content has changed in the callout display by way of adf.Callout.setContent.
	onDismiss() onDismiss occurs when the user explicitly closes the callout by clicking on the dismiss image/button.
	onExpand() This event is fired after adf.Callout.expand operation has been completed.
	onHide() This event is fired after adf.Callout.hide operation has been completed.
	onShow() This event is fired after adf.Callout.show operation has been completed.
	onThemeChange() Event fired when adf.Callout.themeClass property has been changed by way of adf.Callout.setThemeClass.

Class Detail

adf.Callout(calloutId, args)

A widget used to highlight a point on a given HTML element by drawing a "call-out" or "bubble" and displaying relevant information within it. The callout has two visual states: expanded and collapsed. When in the collapsed state, only a header or title element is visible. In the expanded state, the both the header/title section and the body section are visible.

Parameters:
{String} calloutId: {String} the id of the callout
{Object} args: {Object} should contain each property found in this object that you want to initialize

Field Detail

{Boolean} dontAnimate

turns off transition animations when set to true

Default Value:: false

{Integer} fadeDuration

the duration (in milliseconds) of fade transition animations used during .show() and .hide()

Default Value:: 100

{Number} height

the fixed height body content

Default Value:: null

{String} layoutClass

the CSS class name for the core layout elements of this widget

Default Value:: "callout"

{Number} maxHeight

the maximum height to allow for the body content

Default Value:: null

{Number} maxWidth

the maximum width to allow for the body content

Default Value:: null

{Number} sizeDuration

the duration (in milliseconds) of transition animations for expanding and collapsing the callout

Default Value:: 300

{String} themeClass

themeClass the CSS class name for the visual styling components of this widget

Default Value:: "callout-theme"

{Number} width

the fixed width body content

Default Value:: null

{Integer} zIndex

the CSS z-index property for this widget

Default Value:: 1

Method Detail

collapse()

Sets the content and footer sections of the content to not be visible. This does not hide the entire callout, it just put it in a "collapsed" state. To reverse this effect, call adf.Callout#expand

createDom(container)

Constructs the HTML DOM for this callout. Override this function if you need to customize the look and feel and you require more than just custom CSS rules.

To override this function using the Dojo Toolkit...

adfdojo.extend(adf.Callout, {
  createDom: function(containingElement) {
    // create an element for this.domNode
    this.domNode = adfdojo.create("div", { attribute: value });
    // ... get creative
    adfdojo.place(this.divObject, containingElement);
  }
});

Parameters:
{Node} container: {Element} the element to append the DOM layout elements to

expand()

Sets the content and footer sections of the callout to visible. This does not show the entire callout if it has been hidden.

fit(sizes)

Resizes the callout body to fit to the current contents if no arguments are passed. If sizes is passed as an object literal (where sizes.h is the height, and sizes.w is the width), that is assumed desired content size.

Parameters:
{Object} sizes Optional: {Object} an object literal with properties dictating the size to fit the callout body to
sizes.h: {Integer} height
sizes.w: {Integer} width

{String} getAnchorPosition()

Returns a String describing how the callout is currently anchord in its container. "nw" for the north-west quardrant (or top left), "sw", "ne" or "se" for their respective quadrants.

Returns:: {String}

{Object} getCalloutPosition()

Returns the absolute position coordinates for the callout DOM node (this.divObject) with respect to its containing element in the form of {l: pixelsLeft, t: pixelsTop}

Returns:: {Object}

{Object} getContainerDimensions()

Returns the dimensions of the containing element in the form of {h: heightInPixels, w: heightInPixels}. This information is used to determine the orientation of the callout arrow

Returns:: {Object}

{Object} getContent()

The callout content just as it was passed to setContent(). adf.Callout#setContent

Returns:: {Object}

hide()

Hides the entire callout display.

init(container)

Parameters:
{Element} container

{Boolean} isCollapsed()

Returns true if the callout is in the collapsed state, regardless if it is visible

Returns:: {Boolean}

{Boolean} isVisible()

Returns true if the the callouts .divObject element has its style.display property set to "block". This means that callout might not be visible within its containing element due to the fact that its position is outisde of the visible area.

Returns:: {Boolean}

loadSpriteOffsets(props)

Resets the sprite image position information for the "arrow" section of the callout

Parameters:
{Object} props

moveTo(left, top)

Moves the anchor point of the callout to the coordinates specified (with respect to its containing element). The orientation/layout of the anchor point will be adjusted as needed.

Parameters:
{Number} left: {Number}
{Number} top: {Number}

setContent(content)

Sets the callout content to be displayed. Content should be passed in the form of an object literal { title: titleContent, content: mainContent }. Both properties (titleContent and mainContent) can be either Strings of HTML elements. If either property is omitted (undefined), the respective content section will not be modified. If either content has been modified, the adf.Callout#onContentChange event will be fired afterwards.

Parameters:
{Object | String} content Optional: {Object}
content.title Optional: {String|Element} the content to display in the title section
content.header Optional: {String|Element} An alias for content.title, if both title and header are present, title content is displayed
content.content Optional: {String|Element} the content to display in the body section
content.footer Optional: {String|Element} the content to display in the footer section

setThemeClass(className)

Apply your custom theme CSS classes to the callout. Pass true for setAsDefault if you want to use this as the default from now on. If both parameters are undefined, this.themeClass will be applied.

Parameters:
{String} className: {String} the CSS class name

show(content)

Shows the entire callout display. Optionally sets the content (by directly calling adf.Callout#setContent) before showing the callout. When content is passed, each of the properties within the content object are optional.

Parameters:
{Object} content Optional: {Object} The object containing content to display in this callout. See adf.Callout#setContent for details on how to format the content parameter.

toggle()

Toggles between the collapsed/expanded states of the callout. In other words it shows and hides the content and footer sections of the callout.

Event Detail

afterMove()

This event is fired after adf.Callout.moveTo operation has been completed. If the move transition is animated, the event will be fired after the animation has finished (see dojo._Animation onEnd).

beforeMove()

THis event is fired just before adf.Callout.moveTo is called

onCollapse()

This event is fired after adf.Callout.collapse operation has been completed. If the collapse transition is animated, the event will be fired after the animation has finished (see dojo._Animation onEnd).

onContentChange()

Event fired when content has changed in the callout display by way of adf.Callout.setContent.

onDismiss()

onDismiss occurs when the user explicitly closes the callout by clicking on the dismiss image/button. This is different than the adf.Callout.onHide event since that may be triggered programmatically.

onExpand()

This event is fired after adf.Callout.expand operation has been completed. If the expand transition is animated, the event will be fired after the animation has finished (see dojo._Animation onEnd).

onHide()

This event is fired after adf.Callout.hide operation has been completed. If the hide transition is animated, the event will be fired after the animation has finished (see dojo._Animation onEnd).

onShow()

This event is fired after adf.Callout.show operation has been completed. If the show transition is animated, the event will be fired after the animation has finished (see dojo._Animation onEnd).

onThemeChange()

Event fired when adf.Callout.themeClass property has been changed by way of adf.Callout.setThemeClass.

Classes

Class adf.Callout