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
+WidgetPositionAlign
+
+
+ -
+
+
-
+
+
config+ +
+
+
Parameters:
+ +-
+
+
-
+
+
config+ Object + + + + +++ + +User configuration object.
+
+
+
-
+
- Index + + +
- Methods + + +
- Properties + + +
- Attributes + + +
Item Index
+ + +Methods
+ +-
+
+
- + _afterAlignChange + + + + + +
- + _afterAlignOnChange + + + + + +
- + _attachPosAlignUIHandles + + + + + +
- + _bindUIPosAlign + + + + + +
- + _detachPosAlignUIHandles + + + + + +
- + _doAlign + + + + + +
- + _getRegion + + + + + +
- + _setAlignCenter + + + + + +
- + _syncUIPosAlign + + + + + +
- + _uiSetAlign + + + + + +
- + _uiSetVisiblePosAlign + + + + + +
- + align + + + + + +
- + centered + + + + + +
Properties
+ + +Methods
+ + +_afterAlignChange
+
+
+ -
+
+
-
+
+
e+ +
+
+
Handles alignChange events by updating the UI in response to align
+Attribute changes.
Parameters:
+ +-
+
+
-
+
+
e+ EventFacade + + + + ++ ++ + +
+
+
_afterAlignOnChange
+
+
+ -
+
+
-
+
+
e+ +
+
+
Handles alignOnChange events by updating the alignment-syncing event
+handlers.
Parameters:
+ +-
+
+
-
+
+
e+ EventFacade + + + + ++ ++ + +
+
+
_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 + optional + + + + +++ + +The 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.
Parameters:
+ + +_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:
+ +-
+
+
-
+
+
visible+ Boolean + + + + +++ + +The current value of the widget's
+visible+ Attribute.
+
+
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 + optional + + + + +++ + +A 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 + optional + + + + +++ + +A 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 the +Node/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
+ + +_posAlignUIHandles
+ Array
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+ Holds the alignment-syncing event handles.
+Default: null
+ + + + + +BC
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the bottom edge, center point for alignment
+BL
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the bottom-left corner for alignment
+BR
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the bottom-right corner for alignment
+CC
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the center of widget/node/viewport for alignment
+LC
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the left edge, center point for alignment
+RC
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the right edge, center point for alignment
+TC
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the top edge-center point for alignment
+TL
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the top-left corner for alignment
+TR
+ String
+
+
+
+
+
+
+
+
+ static
+
+
+
+
+ Constant used to specify the top-right corner for alignment
+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 to +null, 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 the +Node/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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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 a +Nodereference or a selector String. This will default to the widget's +boundingBox.
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+