WidgetPositionAlign Class
Widget extension, which can be used to add extended XY positioning support to
the base Widget class, through the Base.create method.
Note: 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).
Constructor
Item Index
Methods
Properties
Methods
_afterAlignChange
-
e
Handles alignChange events by updating the UI in response to align
Attribute changes.
Parameters:
_afterAlignOnChange
-
e
Handles alignOnChange events by updating the alignment-syncing event
handlers.
Parameters:
_attachPosAlignUIHandles
()
protected
Attaches the alignment-syncing event handlers.
_bindUIPosAlign
()
protected
Bind event listeners responsible for updating the UI state in response to the widget's position-align related state changes.
This method is invoked after bindUI has been invoked for the Widget
class using the AOP infrastructure.
_detachPosAlignUIHandles
()
protected
Detaches the alignment-syncing event handlers.
_doAlign
-
widgetPoint -
x -
y
Helper method, used to align the given point on the widget, with the XY page coordinates provided.
_getRegion
-
[node]
Returns the region of the passed-in Node, or the viewport region if
calling with passing in a Node.
Parameters:
-
[node]Node optionalThe node to get the region of.
Returns:
_setAlignCenter
-
val
Default setter for center Attribute changes. Sets up the appropriate
value, and passes it through the to the align attribute.
_syncUIPosAlign
()
protected
Synchronizes the current align Attribute value to the DOM.
This method is invoked after syncUI has been invoked for the Widget
class using the AOP infrastructure.
_uiSetAlign
-
[node] -
points
Updates the UI to reflect the align value passed in.
Note: See the align Attribute documentation, for the Object structure
expected.
_uiSetVisiblePosAlign
-
visible
Attaches or detaches alignment-syncing event handlers based on the widget's
visible Attribute state.
Parameters:
-
visibleBooleanThe current value of the widget's
visibleAttribute.
align
-
[node] -
[points]
Aligns this widget to the provided Node (or viewport) using the provided
points. This method can be invoked with no arguments which will cause the
widget's current align Attribute value to be synced to the DOM.
Parameters:
-
[node]Node | String | Null optionalA reference (or selector String) for the
Nodewhich with the widget is to be aligned. If null is passed in, the widget will be aligned with the viewport. -
[points]Array2 optionalA two item array specifying the points on the widget and
Node/viewport which will to be aligned. The first entry is the point on the widget, and the second entry is the point on theNode/viewport. Valid point references are defined as static constants on theWidgetPositionAlignextension.
Example:
Aligning to the top-left corner of the <body>:
myWidget.align('body',
[Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.TR]);
centered
-
[node]
Centers the widget in the viewport, or if a Node is passed in, it will
be centered to that Node.
Properties
Attributes
align
Object
The alignment configuration for this widget.
The align attribute is used to align a reference point on the widget, with
the reference point on another Node, or the viewport. The object which
align expects has the following properties:
node: TheNodeto which the widget is to be aligned. If set tonull, or not provided, the widget is aligned to the viewport.points: A two element Array, defining the two points on the widget andNode/viewport which are to be aligned. The first element is the point on the widget, and the second element is the point on theNode/viewport. Supported alignment points are defined as static properties onWidgetPositionAlign.
Default: null
Fires event alignChange
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:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Example:
Aligns the top-right corner of the widget with the top-left corner of the viewport:
myWidget.set('align', {
points: [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TL]
});
alignOn
Array
An Array of Objects corresponding to the Nodes and events that will cause
the alignment of this widget to be synced to the DOM.
The alignOn Attribute is expected to be an Array of Objects with the
following properties:
eventName: The String event name to listen for.node: The optionalNodethat will fire the event, it can be aNodereference or a selector String. This will default to the widget'sboundingBox.
Default: []
Fires event alignOnChange
Fires when the value for the configuration attribute alignOn 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:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Example:
Sync this widget's alignment on window resize:
myWidget.set('alignOn', [
{
node : Y.one('win'),
eventName: 'resize'
}
]);
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 to false, no center positioning is applied.
Default: false
Fires event centeredChange
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:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added: