Yahoo! UI Library

Container  2.9.0

Yahoo! UI Library > container > YAHOO.widget.Overlay
Search:
 
Filters

Class YAHOO.widget.Overlay - extends YAHOO.widget.Module

Known Subclasses:
YAHOO.widget.Panel YAHOO.widget.Menu YAHOO.widget.Tooltip
Overlay is a Module that is absolutely positioned above the page flow. It has convenience methods for positioning and sizing, as well as options for controlling zIndex and constraining the Overlay's position to the current visible viewport. Overlay also contains a dynamicly generated IFRAME which is placed beneath it for Internet Explorer 6 and 5.x so that it will be properly rendered above SELECT elements.

Constructor

YAHOO.widget.Overlay ( el , userConfig )
Parameters:
el <String> The element ID representing the Overlay OR
el <HTMLElement> The element representing the Overlay
userConfig <Object> The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

Properties

CONTEXT_TRIGGERS - final Array

Array of default event types which will trigger context alignment for the Overlay class.

The array is empty by default for Overlay, but maybe populated in future releases, so classes extending Overlay which need to define their own set of CONTEXT_TRIGGERS should concatenate their super class's prototype.CONTEXT_TRIGGERS value with their own array of values.

E.g.: CustomOverlay.prototype.CONTEXT_TRIGGERS = YAHOO.widget.Overlay.prototype.CONTEXT_TRIGGERS.concat(["windowScroll"]);

DEFAULT_CONFIG - private final Object

Constant representing the Overlay's configuration properties

EVENT_TYPES - private final Object

Constant representing the name of the Overlay's events

YAHOO.widget.Overlay._initialized - private Boolean

A boolean that indicated whether the window resize and scroll events have already been subscribed to.

YAHOO.widget.Overlay._TRIGGER_MAP - private static Object

Internal map of special event types, which are provided by the instance. It maps the event type to the custom event instance. Contains entries for the "windowScroll", "windowResize" and "textResize" static container events.

YAHOO.widget.Overlay.BOTTOM_LEFT - static final String

Constant representing the top bottom left corner of an element, used for configuring the context element alignment

YAHOO.widget.Overlay.BOTTOM_RIGHT - static final String

Constant representing the bottom right corner of an element, used for configuring the context element alignment

YAHOO.widget.Overlay.CSS_HIDDEN - static final String

Constant representing the default hidden CSS class used for an Overlay. This class is applied to the overlay's outer DIV whenever it's hidden.

YAHOO.widget.Overlay.CSS_IFRAME - static final String

Constant representing the default CSS class used for an Overlay iframe shim.

YAHOO.widget.Overlay.CSS_OVERLAY - static final String

Constant representing the default CSS class used for an Overlay

YAHOO.widget.Overlay.IFRAME_SRC - static final String

The URL that will be placed in the iframe
Default Value: 3

YAHOO.widget.Overlay.STD_MOD_RE - static final RegExp

Constant representing the names of the standard module elements used in the overlay.

YAHOO.widget.Overlay.TOP_LEFT - static final String

Constant representing the top left corner of an element, used for configuring the context element alignment

YAHOO.widget.Overlay.TOP_RIGHT - static final String

Constant representing the top right corner of an element, used for configuring the context element alignment

YAHOO.widget.Overlay.VIEWPORT_OFFSET - static final Number

Number representing the minimum distance an Overlay instance should be positioned relative to the boundaries of the browser's viewport, in pixels.
Default Value: 10

Methods

_alignOnTrigger

protected void _alignOnTrigger ( type , args )
Custom Event handler for context alignment triggers. Invokes the align method
Parameters:
type <String> The event type (not used by the default implementation)
args <Any[]> The array of arguments for the trigger event (not used by the default implementation)

_autoFillOnHeightChange

protected void _autoFillOnHeightChange ( type , args , el )
The default custom event handler executed when the overlay's height is changed, if the autofillheight property has been set.
Parameters:
type <String> The event type
args <Array> The array of arguments passed to event subscribers
el <HTMLElement> The header, body or footer element which is to be resized to fill out the containers height

_findTriggerCE

private void _findTriggerCE ( t )
Helper method to locate the custom event instance for the event name string passed in. As a convenience measure, any custom events passed in are returned.
Parameters:
t <String|CustomEvent> Either a CustomEvent, or event type (e.g. "windowScroll") for which a custom event instance needs to be looked up from the Overlay._TRIGGER_MAP.

_getComputedHeight

private Number _getComputedHeight ( el )
Determines the content box height of the given element (height of the element, without padding or borders) in pixels.
Parameters:
el <HTMLElement> The element for which the content height needs to be determined
Returns: Number
The content box height of the given element, or null if it could not be determined.

_getConstrainedPos

protected Number _getConstrainedPos ( pos , The )
Shared implementation method for getConstrainedX and getConstrainedY.

Given a coordinate value, returns the calculated coordinate required to position the Overlay if it is to be constrained to the viewport, based on the current element size, viewport dimensions, scroll values and preventoverlap settings

Parameters:
pos <String> The coordinate which needs to be constrained, either "x" or "y"
The <Number> coordinate value which needs to be constrained
Returns: Number
The constrained coordinate value

_getPreciseHeight

private Float _getPreciseHeight ( el )
Returns the sub-pixel height of the el, using getBoundingClientRect, if available, otherwise returns the offsetHeight
Parameters:
el <HTMLElement>
Returns: Float
The sub-pixel height if supported by the browser, else the rounded height.

_preventOverlap

protected Number _preventOverlap ( pos , contextEl , overlaySize , viewportSize , docScroll )
Helper method, used to position the Overlap to prevent overlap with the context element (used when preventcontextoverlap is enabled)
Parameters:
pos <String> The coordinate to prevent overlap for, either "x" or "y".
contextEl <HTMLElement> The context element
overlaySize <Number> The related overlay dimension value (for "x", the width, for "y", the height)
viewportSize <Number> The related viewport dimension value (for "x", the width, for "y", the height)
docScroll <Object> The related document scroll value (for "x", the scrollLeft, for "y", the scrollTop)
Returns: Number
The new coordinate value which was set to prevent overlap

_primeXYFromDOM

protected void _primeXYFromDOM ( )
Set's the container's XY value from DOM if not already set. Differs from syncPosition, in that the XY value is only sync'd with DOM if not already set. The method also refire's the XY config property event, so any beforeMove, Move event listeners are invoked.

_processTriggers

protected void _processTriggers ( triggers , mode , fn )
Utility method that subscribes or unsubscribes the given function from the list of trigger events provided.
Parameters:
triggers <Array[String|CustomEvent]> An array of either CustomEvents, event type strings (e.g. "beforeShow", "windowScroll") to/from which the provided function should be subscribed/unsubscribed respectively.
mode <String> Either "subscribe" or "unsubscribe", specifying whether or not we are subscribing or unsubscribing trigger listeners
fn <Function> The function to be subscribed/unsubscribed to/from the trigger event. Context is always set to the overlay instance, and no additional object argument get passed to the subscribed function.

_setDomVisibility

protected void _setDomVisibility ( visible )
Internal implementation to set the visibility of the overlay in the DOM.
Parameters:
visible <boolean> Whether to show or hide the Overlay's outer element

_validateAutoFillHeight

protected _validateAutoFillHeight ( val )
autofillheight validator. Verifies that the autofill value is either null or one of the strings : "body", "header" or "footer".
Parameters:
val <String>
Returns:
true, if valid, false otherwise

align

void align ( elementAlign , contextAlign , xyOffset )
Aligns the Overlay to its context element using the specified corner points (represented by the constants TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, and BOTTOM_RIGHT.
Parameters:
elementAlign <String> The String representing the corner of the Overlay that should be aligned to the context element
contextAlign <String> The corner of the context element that the elementAlign corner should stick to.
xyOffset <Number[]> Optional. A 2 element array specifying the x and y pixel offsets which should be applied after aligning the element and context corners. For example, passing in [5, -10] for this value, would offset the Overlay by 5 pixels along the X axis (horizontally) and -10 pixels along the Y axis (vertically) after aligning the specified corners.

bringToTop

void bringToTop ( )
Places the Overlay on top of all other instances of YAHOO.widget.Overlay.

center

void center ( )
Centers the container in the viewport.

configAutoFillHeight

void configAutoFillHeight ( type , args , obj )
The default event handler fired when the "autofillheight" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configConstrainToViewport

void configConstrainToViewport ( type , args , obj )
The default event handler fired when the "constraintoviewport" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configContext

void configContext ( type , args , obj )
The default event handler fired when the "context" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configFixedCenter

void configFixedCenter ( type , args , obj )
The default event handler fired when the "fixedcenter" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configHeight

void configHeight ( type , args , obj )
The default event handler fired when the "height" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configIframe

void configIframe ( type , args , obj )
The default event handler fired when the "iframe" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configVisible

void configVisible ( type , args , obj )
The default event handler fired when the "visible" property is changed. This method is responsible for firing showEvent and hideEvent.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configWidth

void configWidth ( type , args , obj )
The default event handler fired when the "width" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configX

void configX ( type , args , obj )
The default event handler fired when the "x" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configXY

void configXY ( type , args , obj )
The default event handler fired when the "xy" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configY

void configY ( type , args , obj )
The default event handler fired when the "y" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

configzIndex

void configzIndex ( type , args , obj )
The default event handler fired when the "zIndex" property is changed.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

destroy

void destroy ( shallowPurge )
Removes the Overlay element from the DOM and sets all child elements to null.
Parameters:
shallowPurge <boolean> If true, only the parent element's DOM event listeners are purged. If false, or not provided, all children are also purged of DOM event listeners. NOTE: The flag is a "shallowPurge" flag, as opposed to what may be a more intuitive "purgeChildren" flag to maintain backwards compatibility with behavior prior to 2.9.0.

doCenterOnDOMEvent

void doCenterOnDOMEvent ( )
Fixed center event handler used for centering on scroll/resize, but only if the overlay is visible and, if "fixedcenter" is set to "contained", only if the overlay fits within the viewport.

enforceConstraints

void enforceConstraints ( type , args , obj )
The default event handler executed when the moveEvent is fired, if the "constraintoviewport" is set to true.
Parameters:
type <String> The CustomEvent type (usually the property name)
args <Object[]> The CustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
obj <Object> The scope object. For configuration handlers, this will usually equal the owner.

fillHeight

void fillHeight ( el )

Sets the height on the provided header, body or footer element to fill out the height of the container. It determines the height of the containers content box, based on it's configured height value, and sets the height of the autofillheight element to fill out any space remaining after the other standard module element heights have been accounted for.

NOTE: This method is not designed to work if an explicit height has not been set on the container, since for an "auto" height container, the heights of the header/body/footer will drive the height of the container.

Parameters:
el <HTMLElement> The element which should be resized to fill out the height of the container element.

fitsInViewport

fitsInViewport ( )
Determines if the Overlay (including the offset value defined by Overlay.VIEWPORT_OFFSET) will fit entirely inside the viewport, in both dimensions - width and height.
Returns:
boolean true if the Overlay will fit, false if not

forceContainerRedraw

void forceContainerRedraw ( )
Can be used to force the container to repaint/redraw it's contents.

By default applies and then removes a 1px bottom margin through the application/removal of a "yui-force-redraw" class.

It is currently used by Overlay to force a repaint for webkit browsers, when centering.

getConstrainedX

Number getConstrainedX ( x )
Given x coordinate value, returns the calculated x coordinate required to position the Overlay if it is to be constrained to the viewport, based on the current element size, viewport dimensions and scroll values.
Parameters:
x <Number> The X coordinate value to be constrained
Returns: Number
The constrained x coordinate

getConstrainedXY

Array getConstrainedXY ( x , y )
Given x, y coordinate values, returns the calculated coordinates required to position the Overlay if it is to be constrained to the viewport, based on the current element size, viewport dimensions and scroll values.
Parameters:
x <Number> The X coordinate value to be constrained
y <Number> The Y coordinate value to be constrained
Returns: Array
The constrained x and y coordinates at index 0 and 1 respectively;

getConstrainedY

Number getConstrainedY ( y )
Given y coordinate value, returns the calculated y coordinate required to position the Overlay if it is to be constrained to the viewport, based on the current element size, viewport dimensions and scroll values.
Parameters:
y <Number> The Y coordinate value to be constrained
Returns: Number
The constrained y coordinate

hideIframe

void hideIframe ( )
Hides the iframe shim, if it has been enabled.

hideMacGeckoScrollbars

void hideMacGeckoScrollbars ( )
Adds a CSS class ("hide-scrollbars") and removes a CSS class ("show-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)

init

void init ( el , userConfig )
The Overlay initialization method, which is executed for Overlay and all of its subclasses. This method is automatically called by the constructor, and sets up all DOM references for pre-existing markup, and creates required markup if it is not already present.
Parameters:
el <String> The element ID representing the Overlay OR
el <HTMLElement> The element representing the Overlay
userConfig <Object> The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.

initDefaultConfig

void initDefaultConfig ( )
Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).

initEvents

void initEvents ( )
Initializes the custom events for Overlay which are fired automatically at appropriate times by the Overlay class.

moveTo

void moveTo ( x , y )
Moves the Overlay to the specified position. This function is identical to calling this.cfg.setProperty("xy", [x,y]);
Parameters:
x <Number> The Overlay's new x position
y <Number> The Overlay's new y position

onDomResize

void onDomResize ( e , obj )
Event handler fired when the resize monitor element is resized.
Parameters:
e <DOMEvent> The resize DOM event
obj <Object> The scope object

showIframe

void showIframe ( )
Shows the iframe shim, if it has been enabled.

showMacGeckoScrollbars

void showMacGeckoScrollbars ( )
Adds a CSS class ("show-scrollbars") and removes a CSS class ("hide-scrollbars") to the Overlay to fix a bug in Gecko on Mac OS X (https://bugzilla.mozilla.org/show_bug.cgi?id=187435)

stackIframe

void stackIframe ( )
Sets the zindex of the iframe shim, if it exists, based on the zindex of the Overlay element. The zindex of the iframe is set to be one less than the Overlay element's zindex.

NOTE: This method will not bump up the zindex of the Overlay element to ensure that the iframe shim has a non-negative zindex. If you require the iframe zindex to be 0 or higher, the zindex of the Overlay element should be set to a value greater than 0, before this method is called.

syncIframe

void syncIframe ( )
Syncronizes the size and position of iframe shim to that of its corresponding Overlay instance.

syncPosition

void syncPosition ( )
Synchronizes the Panel's "xy", "x", and "y" properties with the Panel's position in the DOM. This is primarily used to update position information during drag & drop.

toString

String toString ( )
Returns a String representation of the object.
Returns: String
The string representation of the Overlay.

YAHOO.widget.Overlay.windowResizeHandler

static void YAHOO.widget.Overlay.windowResizeHandler ( e )
The DOM event handler used to fire the CustomEvent for window resize
Parameters:
e <DOMEvent> The DOM resize event

YAHOO.widget.Overlay.windowScrollHandler

static void YAHOO.widget.Overlay.windowScrollHandler ( e )
The DOM event handler used to fire the CustomEvent for window scroll
Parameters:
e <DOMEvent> The DOM scroll event

Events

beforeMoveEvent

beforeMoveEvent ( x , y )
CustomEvent fired before the Overlay is moved.
Parameters:
x <Number> x coordinate
y <Number> y coordinate

moveEvent

moveEvent ( x , y )
CustomEvent fired after the Overlay is moved.
Parameters:
x <Number> x coordinate
y <Number> y coordinate

YAHOO.widget.Overlay.windowResizeEvent

YAHOO.widget.Overlay.windowResizeEvent ( )
A singleton CustomEvent used for reacting to the DOM event for window resize

YAHOO.widget.Overlay.windowScrollEvent

YAHOO.widget.Overlay.windowScrollEvent ( )
A singleton CustomEvent used for reacting to the DOM event for window scroll

Configuration Attributes

autofillheight - String

Standard module element which should auto fill out the height of the Overlay if the height config property is set. Supported values are "header", "body", "footer".
Default Value: null

constraintoviewport - Boolean

True if the Overlay should be prevented from being positioned out of the viewport.
Default Value: false

context - Array

The array of context arguments for context-sensitive positioning.

The format of the array is: [contextElementOrId, overlayCorner, contextCorner, arrayOfTriggerEvents (optional), xyOffset (optional)], the the 5 array elements described in detail below:

contextElementOrId <String|HTMLElement>
A reference to the context element to which the overlay should be aligned (or it's id).
overlayCorner <String>
The corner of the overlay which is to be used for alignment. This corner will be aligned to the corner of the context element defined by the "contextCorner" entry which follows. Supported string values are: "tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left).
contextCorner <String>
The corner of the context element which is to be used for alignment. Supported string values are the same ones listed for the "overlayCorner" entry above.
arrayOfTriggerEvents (optional) <Array[String|CustomEvent]>

By default, context alignment is a one time operation, aligning the Overlay to the context element when context configuration property is set, or when the align method is invoked. However, you can use the optional "arrayOfTriggerEvents" entry to define the list of events which should force the overlay to re-align itself with the context element. This is useful in situations where the layout of the document may change, resulting in the context element's position being modified.

The array can contain either event type strings for events the instance publishes (e.g. "beforeShow") or CustomEvent instances. Additionally the following 3 static container event types are also currently supported : "windowResize", "windowScroll", "textResize" (defined in _TRIGGER_MAP private property).

xyOffset <Number[]>
A 2 element Array specifying the X and Y pixel amounts by which the Overlay should be offset from the aligned corner. e.g. [5,0] offsets the Overlay 5 pixels to the left, after aligning the given context corners. NOTE: If using this property and no triggers need to be defined, the arrayOfTriggerEvents property should be set to null to maintain correct array positions for the arguments.

For example, setting this property to ["img1", "tl", "bl"] will align the Overlay's top left corner to the bottom left corner of the context element with id "img1".

Setting this property to ["img1", "tl", "bl", null, [0,5] will align the Overlay's top left corner to the bottom left corner of the context element with id "img1", and then offset it by 5 pixels on the Y axis (providing a 5 pixel gap between the bottom of the context element and top of the overlay).

Adding the optional trigger values: ["img1", "tl", "bl", ["beforeShow", "windowResize"], [0,5]], will re-align the overlay position, whenever the "beforeShow" or "windowResize" events are fired.

Default Value: null

fixedcenter - Boolean | String

Determines whether or not the Overlay should be anchored to the center of the viewport.

This property can be set to:

true
To enable fixed center positioning

When enabled, the overlay will be positioned in the center of viewport when initially displayed, and will remain in the center of the viewport whenever the window is scrolled or resized.

If the overlay is too big for the viewport, it's top left corner will be aligned with the top left corner of the viewport.

false
To disable fixed center positioning.

In this case the overlay can still be centered as a one-off operation, by invoking the center() method, however it will not remain centered when the window is scrolled/resized.

"contained"
To enable fixed center positioning, as with the true option.

However, unlike setting the property to true, when the property is set to "contained", if the overlay is too big for the viewport, it will not get automatically centered when the user scrolls or resizes the window (until the window is large enough to contain the overlay). This is useful in cases where the Overlay has both header and footer UI controls which the user may need to access.

Default Value: false

height - String

CSS height of the Overlay.
Default Value: null

iframe - Boolean

Boolean indicating whether or not the Overlay should have an IFRAME shim; used to prevent SELECT elements from poking through an Overlay instance in IE6. When set to "true", the iframe shim is created when the Overlay instance is intially made visible.
Default Value: true for IE6 and below, false for all other browsers.

preventcontextoverlap - Boolean

Boolean indicating whether or not the Overlay should overlap its context element (defined using the "context" configuration property) when the "constraintoviewport" configuration property is set to "true".
Default Value: false

width - String

CSS width of the Overlay.
Default Value: null

x - Number

The absolute x-coordinate position of the Overlay
Default Value: null

xy - Number[]

An array with the absolute x and y positions of the Overlay
Default Value: null

y - Number

The absolute y-coordinate position of the Overlay
Default Value: null

zIndex - Number

CSS z-index of the Overlay.
Default Value: null

Configuration attributes inherited from YAHOO.widget.Module:

appendtodocumentbody, effect monitorresize visible
Copyright © 2011 Yahoo! Inc. All rights reserved.