3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('widget-position', function(Y) {
10
* Provides basic XY positioning support for Widgets, though an extension
12
* @module widget-position
19
POSITION = "position",
20
POSITIONED = "positioned",
21
BOUNDING_BOX = "boundingBox",
22
RELATIVE = "relative",
24
RENDERUI = "renderUI",
30
XYChange = "xyChange";
33
* Widget extension, which can be used to add positioning support to the base Widget class,
34
* through the <a href="Base.html#method_build">Base.build</a> method.
36
* @class WidgetPosition
37
* @param {Object} config User configuration object
39
function Position(config) {
40
this._posNode = this.get(BOUNDING_BOX);
42
// WIDGET METHOD OVERLAP
43
Y.after(this._renderUIPosition, this, RENDERUI);
44
Y.after(this._syncUIPosition, this, SYNCUI);
45
Y.after(this._bindUIPosition, this, BINDUI);
49
* Static property used to define the default attribute
50
* configuration introduced by WidgetPosition.
63
* @description Page X co-ordinate for the widget. This attribute acts as a facade for the
64
* xy attribute. Changes in position can be monitored by listening for xyChange events.
67
setter: function(val) {
81
* @description Page Y co-ordinate for the widget. This attribute acts as a facade for the
82
* xy attribute. Changes in position can be monitored by listening for xyChange events.
85
setter: function(val) {
99
* @description Page XY co-ordinate pair for the widget.
103
validator: function(val) {
104
return this._validateXY(val);
110
* Default class used to mark the boundingBox of a positioned widget.
112
* @property POSITIONED_CLASS_NAME
114
* @default "yui-widget-positioned"
117
Position.POSITIONED_CLASS_NAME = Widget.getClassName(POSITIONED);
119
Position.prototype = {
122
* Creates/Initializes the DOM to support xy page positioning.
124
* This method in invoked after renderUI is invoked for the Widget class
125
* using YUI's aop infrastructure.
127
* @method _renderUIPosition
130
_renderUIPosition : function() {
131
this._posNode.addClass(Position.POSITIONED_CLASS_NAME);
135
* Synchronizes the UI to match the Widgets xy page position state.
137
* This method in invoked after syncUI is invoked for the Widget class
138
* using YUI's aop infrastructure.
140
* @method _syncUIPosition
143
_syncUIPosition : function() {
144
var posNode = this._posNode;
145
if (posNode.getStyle(POSITION) === RELATIVE) {
148
this._uiSetXY(this.get(XY_COORD));
152
* Binds event listeners responsible for updating the UI state in response to
153
* Widget position related state changes.
155
* This method in invoked after bindUI is invoked for the Widget class
156
* using YUI's aop infrastructure.
158
* @method _bindUIPosition
161
_bindUIPosition :function() {
162
this.after(XYChange, this._afterXYChange);
166
* Moves the Widget to the specified page xy co-ordinate position.
170
* @param {Number} x The new x position
171
* @param {Number} y The new y position
173
* @param {Array} x, y values passed as an array ([x, y]), to support
174
* simple pass through of Node.getXY results
177
var args = arguments,
178
coord = (Lang.isArray(args[0])) ? args[0] : [args[0], args[1]];
179
this.set(XY_COORD, coord);
183
* Synchronizes the Panel's "xy", "x", and "y" properties with the
184
* Widget's position in the DOM.
188
syncXY : function () {
189
this.set(XY_COORD, this._posNode.getXY(), {src: UI});
193
* Default validator for the XY attribute
195
* @method _validateXY
197
* @param {Array} val The XY page co-ordinate value which is being set.
198
* @return {boolean} true if valid, false if not.
200
_validateXY : function(val) {
201
return (Lang.isArray(val) && Lang.isNumber(val[0]) && Lang.isNumber(val[1]));
205
* Default setter for the X attribute. The setter passes the X value through
206
* to the XY attribute, which is the sole store for the XY state.
210
* @param {Number} val The X page co-ordinate value
212
_setX : function(val) {
213
this.set(XY_COORD, [val, this.get(XY_COORD)[1]]);
217
* Default setter for the Y attribute. The setter passes the Y value through
218
* to the XY attribute, which is the sole store for the XY state.
222
* @param {Number} val The Y page co-ordinate value
224
_setY : function(val) {
225
this.set(XY_COORD, [this.get(XY_COORD)[0], val]);
229
* Default getter for the X attribute. The value is retrieved from
230
* the XY attribute, which is the sole store for the XY state.
234
* @return {Number} The X page co-ordinate value
237
return this.get(XY_COORD)[0];
241
* Default getter for the Y attribute. The value is retrieved from
242
* the XY attribute, which is the sole store for the XY state.
246
* @return {Number} The Y page co-ordinate value
249
return this.get(XY_COORD)[1];
253
* Default attribute change listener for the xy attribute, responsible
254
* for updating the UI, in response to attribute changes.
256
* @method _afterXYChange
258
* @param {EventFacade} e The event facade for the attribute change
260
_afterXYChange : function(e) {
262
this._uiSetXY(e.newVal);
267
* Updates the UI to reflect the XY page co-ordinates passed in.
271
* @param {String} val The XY page co-ordinates value to be reflected in the UI
273
_uiSetXY : function(val) {
274
this._posNode.setXY(val);
278
Y.WidgetPosition = Position;
281
}, '3.4.1' ,{requires:['base-build', 'node-screen', 'widget']});