Yahoo! UI Library

widget-position-align  3.3.0pr1

Yahoo! UI Library > widget-position-align > WidgetPositionAlign
Search:
 
Filters

Class WidgetPositionAlign

Widget extension, which can be used to add extended XY positioning support to the base Widget class, through the Base.build method. This extension requires that the WidgetPosition extension be added to the Widget (before WidgetPositionAlign, if part of the same extension list passed to Base.build).

Properties

WidgetPositionAlign.ATTRS - static Object

Static property used to define the default attribute configuration introduced by WidgetPositionAlign.

WidgetPositionAlign.BC - static String

Constant used to specify the bottom edge, center point for alignment

WidgetPositionAlign.BL - static String

Constant used to specify the bottom-left corner for alignment

WidgetPositionAlign.BR - static String

Constant used to specify the bottom-right corner for alignment

WidgetPositionAlign.CC - static String

Constant used to specify the center of widget/node/viewport for alignment

WidgetPositionAlign.LC - static String

Constant used to specify the left edge, center point for alignment

WidgetPositionAlign.RC - static String

Constant used to specify the right edge, center point for alignment

WidgetPositionAlign.TC - static String

Constant used to specify the top edge-center point for alignment

WidgetPositionAlign.TL - static String

Constant used to specify the top-left corner for alignment

WidgetPositionAlign.TR - static String

Constant used to specify the top-right corner for alignment

Methods

_afterAlignChange

protected void _afterAlignChange ( e )
Default attribute change listener for the align attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
e <EventFacade> The event facade for the attribute change

_bindUIStack

protected void _bindUIStack ( )
Binds event listeners responsible for updating the UI state in response to Widget extended positioning related state changes.

This method is invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure.

_doAlign

private void _doAlign ( widgetPoint , x , y )
Helper method, used to align the given point on the widget, with the XY page co-ordinates provided.
Parameters:
widgetPoint <String> Supported point constant (e.g. WidgetPositionAlign.TL)
x <Number> X page co-ordinate to align to
y <Number> Y page co-ordinate to align to

_setAlignCenter

protected Number _setAlignCenter ( The )
Default setter for center attribute changes. Sets up the appropriate value, and passes it through the to the align attribute.
Parameters:
The <boolean | node> attribute value being set.
Returns: Number
The attribute value being set.

_syncUIPosAlign

protected void _syncUIPosAlign ( )
Synchronizes the UI to match the Widgets align configuration. This method in invoked after syncUI is invoked for the Widget class using YUI's aop infrastructure.

_uiSetAlign

protected void _uiSetAlign ( The )
Updates the UI to reflect the align value passed in (see the align attribute documentation, for the object stucture expected)
Parameters:
The <Node | null> node to align to, or null to indicate the viewport

align

void align ( node , points )
Aligns the Widget to the provided node (or viewport) using the provided points. The method can be invoked directly, however it will result in the align attribute being out of sync with current position of the of Widget.
Parameters:
node <Node | String | null> A reference (or selector string) for the Node which with the Widget is to be aligned. If null is passed in, the Widget will be aligned with the viewport.
points <Array[2]> A two element array, specifying the points on the Widget and node/viewport which need to be aligned. The first entry is the point on the Widget, and the second entry is the point on the node/viewport which need to align. Valid point references are defined as static constants on the WidgetPositionAlign class. e.g. [WidgetPositionAlign.TL, WidgetPositionAlign.TR] will align the top-left corner of the Widget with the top-right corner of the node/viewport.

centered

void centered ( node )
Centers the container in the viewport, or if a node is passed in, the node.
Parameters:
node <Node | String> Optional. A node reference or selector string defining the node inside which the Widget is to be centered. If not passed in, the Widget will be centered in the viewport.

Events

alignChange

alignChange ( event )
Fires when the value for the configuration attribute 'align' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

centeredChange

centeredChange ( event )
Fires when the value for the configuration attribute 'centered' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Configuration Attributes

align - Object

Default Value: null

centered - {boolean | node}

A convenience attribute, which can be used as a shortcut for the align attribute. If set to true, the Widget is centered in the viewport. If set to a node reference or valid selector string, the Widget will be centered within the node. If set the false, no center positioning is applied.
Default Value: false

Configuration Attributes

Copyright © 2010 Yahoo! Inc. All rights reserved.