| 1 |
efrain |
1 |
YUI.add('widget-position', function (Y, NAME) {
|
|
|
2 |
|
|
|
3 |
/**
|
|
|
4 |
* Provides basic XY positioning support for Widgets, though an extension
|
|
|
5 |
*
|
|
|
6 |
* @module widget-position
|
|
|
7 |
*/
|
|
|
8 |
var Lang = Y.Lang,
|
|
|
9 |
Widget = Y.Widget,
|
|
|
10 |
|
|
|
11 |
XY_COORD = "xy",
|
|
|
12 |
|
|
|
13 |
POSITION = "position",
|
|
|
14 |
POSITIONED = "positioned",
|
|
|
15 |
BOUNDING_BOX = "boundingBox",
|
|
|
16 |
RELATIVE = "relative",
|
|
|
17 |
|
|
|
18 |
RENDERUI = "renderUI",
|
|
|
19 |
BINDUI = "bindUI",
|
|
|
20 |
SYNCUI = "syncUI",
|
|
|
21 |
|
|
|
22 |
UI = Widget.UI_SRC,
|
|
|
23 |
|
|
|
24 |
XYChange = "xyChange";
|
|
|
25 |
|
|
|
26 |
/**
|
|
|
27 |
* Widget extension, which can be used to add positioning support to the base Widget class,
|
|
|
28 |
* through the <a href="Base.html#method_build">Base.build</a> method.
|
|
|
29 |
*
|
|
|
30 |
* @class WidgetPosition
|
|
|
31 |
* @param {Object} config User configuration object
|
|
|
32 |
*/
|
|
|
33 |
function Position(config) {
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
/**
|
|
|
37 |
* Static property used to define the default attribute
|
|
|
38 |
* configuration introduced by WidgetPosition.
|
|
|
39 |
*
|
|
|
40 |
* @property ATTRS
|
|
|
41 |
* @static
|
|
|
42 |
* @type Object
|
|
|
43 |
*/
|
|
|
44 |
Position.ATTRS = {
|
|
|
45 |
|
|
|
46 |
/**
|
|
|
47 |
* @attribute x
|
|
|
48 |
* @type number
|
|
|
49 |
* @default 0
|
|
|
50 |
*
|
|
|
51 |
* @description Page X co-ordinate for the widget. This attribute acts as a facade for the
|
|
|
52 |
* xy attribute. Changes in position can be monitored by listening for xyChange events.
|
|
|
53 |
*/
|
|
|
54 |
x: {
|
|
|
55 |
setter: function(val) {
|
|
|
56 |
this._setX(val);
|
|
|
57 |
},
|
|
|
58 |
getter: function() {
|
|
|
59 |
return this._getX();
|
|
|
60 |
},
|
|
|
61 |
lazyAdd:false
|
|
|
62 |
},
|
|
|
63 |
|
|
|
64 |
/**
|
|
|
65 |
* @attribute y
|
|
|
66 |
* @type number
|
|
|
67 |
* @default 0
|
|
|
68 |
*
|
|
|
69 |
* @description Page Y co-ordinate for the widget. This attribute acts as a facade for the
|
|
|
70 |
* xy attribute. Changes in position can be monitored by listening for xyChange events.
|
|
|
71 |
*/
|
|
|
72 |
y: {
|
|
|
73 |
setter: function(val) {
|
|
|
74 |
this._setY(val);
|
|
|
75 |
},
|
|
|
76 |
getter: function() {
|
|
|
77 |
return this._getY();
|
|
|
78 |
},
|
|
|
79 |
lazyAdd: false
|
|
|
80 |
},
|
|
|
81 |
|
|
|
82 |
/**
|
|
|
83 |
* @attribute xy
|
|
|
84 |
* @type Array
|
|
|
85 |
* @default [0,0]
|
|
|
86 |
*
|
|
|
87 |
* @description Page XY co-ordinate pair for the widget.
|
|
|
88 |
*/
|
|
|
89 |
xy: {
|
|
|
90 |
value:[0,0],
|
|
|
91 |
validator: function(val) {
|
|
|
92 |
return this._validateXY(val);
|
|
|
93 |
}
|
|
|
94 |
}
|
|
|
95 |
};
|
|
|
96 |
|
|
|
97 |
/**
|
|
|
98 |
* Default class used to mark the boundingBox of a positioned widget.
|
|
|
99 |
*
|
|
|
100 |
* @property POSITIONED_CLASS_NAME
|
|
|
101 |
* @type String
|
|
|
102 |
* @default "yui-widget-positioned"
|
|
|
103 |
* @static
|
|
|
104 |
*/
|
|
|
105 |
Position.POSITIONED_CLASS_NAME = Widget.getClassName(POSITIONED);
|
|
|
106 |
|
|
|
107 |
Position.prototype = {
|
|
|
108 |
|
|
|
109 |
initializer : function() {
|
|
|
110 |
this._posNode = this.get(BOUNDING_BOX);
|
|
|
111 |
|
|
|
112 |
// WIDGET METHOD OVERLAP
|
|
|
113 |
Y.after(this._renderUIPosition, this, RENDERUI);
|
|
|
114 |
Y.after(this._syncUIPosition, this, SYNCUI);
|
|
|
115 |
Y.after(this._bindUIPosition, this, BINDUI);
|
|
|
116 |
},
|
|
|
117 |
|
|
|
118 |
/**
|
|
|
119 |
* Creates/Initializes the DOM to support xy page positioning.
|
|
|
120 |
* <p>
|
|
|
121 |
* This method in invoked after renderUI is invoked for the Widget class
|
|
|
122 |
* using YUI's aop infrastructure.
|
|
|
123 |
* </p>
|
|
|
124 |
* @method _renderUIPosition
|
|
|
125 |
* @protected
|
|
|
126 |
*/
|
|
|
127 |
_renderUIPosition : function() {
|
|
|
128 |
this._posNode.addClass(Position.POSITIONED_CLASS_NAME);
|
|
|
129 |
},
|
|
|
130 |
|
|
|
131 |
/**
|
|
|
132 |
* Synchronizes the UI to match the Widgets xy page position state.
|
|
|
133 |
* <p>
|
|
|
134 |
* This method in invoked after syncUI is invoked for the Widget class
|
|
|
135 |
* using YUI's aop infrastructure.
|
|
|
136 |
* </p>
|
|
|
137 |
* @method _syncUIPosition
|
|
|
138 |
* @protected
|
|
|
139 |
*/
|
|
|
140 |
_syncUIPosition : function() {
|
|
|
141 |
var posNode = this._posNode;
|
|
|
142 |
if (posNode.getStyle(POSITION) === RELATIVE) {
|
|
|
143 |
this.syncXY();
|
|
|
144 |
}
|
|
|
145 |
this._uiSetXY(this.get(XY_COORD));
|
|
|
146 |
},
|
|
|
147 |
|
|
|
148 |
/**
|
|
|
149 |
* Binds event listeners responsible for updating the UI state in response to
|
|
|
150 |
* Widget position related state changes.
|
|
|
151 |
* <p>
|
|
|
152 |
* This method in invoked after bindUI is invoked for the Widget class
|
|
|
153 |
* using YUI's aop infrastructure.
|
|
|
154 |
* </p>
|
|
|
155 |
* @method _bindUIPosition
|
|
|
156 |
* @protected
|
|
|
157 |
*/
|
|
|
158 |
_bindUIPosition :function() {
|
|
|
159 |
this.after(XYChange, this._afterXYChange);
|
|
|
160 |
},
|
|
|
161 |
|
|
|
162 |
/**
|
|
|
163 |
* Moves the Widget to the specified page xy co-ordinate position.
|
|
|
164 |
*
|
|
|
165 |
* @method move
|
|
|
166 |
*
|
|
|
167 |
* @param {Number|Number[]} x The new x position or [x, y] values passed
|
|
|
168 |
* as an array to support simple pass through of Node.getXY results
|
|
|
169 |
* @param {Number} [y] The new y position
|
|
|
170 |
*/
|
|
|
171 |
move: function () {
|
|
|
172 |
var args = arguments,
|
|
|
173 |
coord = (Lang.isArray(args[0])) ? args[0] : [args[0], args[1]];
|
|
|
174 |
this.set(XY_COORD, coord);
|
|
|
175 |
},
|
|
|
176 |
|
|
|
177 |
/**
|
|
|
178 |
* Synchronizes the Panel's "xy", "x", and "y" properties with the
|
|
|
179 |
* Widget's position in the DOM.
|
|
|
180 |
*
|
|
|
181 |
* @method syncXY
|
|
|
182 |
*/
|
|
|
183 |
syncXY : function () {
|
|
|
184 |
this.set(XY_COORD, this._posNode.getXY(), {src: UI});
|
|
|
185 |
},
|
|
|
186 |
|
|
|
187 |
/**
|
|
|
188 |
* Default validator for the XY attribute
|
|
|
189 |
*
|
|
|
190 |
* @method _validateXY
|
|
|
191 |
* @protected
|
|
|
192 |
* @param {Array} val The XY page co-ordinate value which is being set.
|
|
|
193 |
* @return {boolean} true if valid, false if not.
|
|
|
194 |
*/
|
|
|
195 |
_validateXY : function(val) {
|
|
|
196 |
return (Lang.isArray(val) && Lang.isNumber(val[0]) && Lang.isNumber(val[1]));
|
|
|
197 |
},
|
|
|
198 |
|
|
|
199 |
/**
|
|
|
200 |
* Default setter for the X attribute. The setter passes the X value through
|
|
|
201 |
* to the XY attribute, which is the sole store for the XY state.
|
|
|
202 |
*
|
|
|
203 |
* @method _setX
|
|
|
204 |
* @protected
|
|
|
205 |
* @param {Number} val The X page co-ordinate value
|
|
|
206 |
*/
|
|
|
207 |
_setX : function(val) {
|
|
|
208 |
this.set(XY_COORD, [val, this.get(XY_COORD)[1]]);
|
|
|
209 |
},
|
|
|
210 |
|
|
|
211 |
/**
|
|
|
212 |
* Default setter for the Y attribute. The setter passes the Y value through
|
|
|
213 |
* to the XY attribute, which is the sole store for the XY state.
|
|
|
214 |
*
|
|
|
215 |
* @method _setY
|
|
|
216 |
* @protected
|
|
|
217 |
* @param {Number} val The Y page co-ordinate value
|
|
|
218 |
*/
|
|
|
219 |
_setY : function(val) {
|
|
|
220 |
this.set(XY_COORD, [this.get(XY_COORD)[0], val]);
|
|
|
221 |
},
|
|
|
222 |
|
|
|
223 |
/**
|
|
|
224 |
* Default getter for the X attribute. The value is retrieved from
|
|
|
225 |
* the XY attribute, which is the sole store for the XY state.
|
|
|
226 |
*
|
|
|
227 |
* @method _getX
|
|
|
228 |
* @protected
|
|
|
229 |
* @return {Number} The X page co-ordinate value
|
|
|
230 |
*/
|
|
|
231 |
_getX : function() {
|
|
|
232 |
return this.get(XY_COORD)[0];
|
|
|
233 |
},
|
|
|
234 |
|
|
|
235 |
/**
|
|
|
236 |
* Default getter for the Y attribute. The value is retrieved from
|
|
|
237 |
* the XY attribute, which is the sole store for the XY state.
|
|
|
238 |
*
|
|
|
239 |
* @method _getY
|
|
|
240 |
* @protected
|
|
|
241 |
* @return {Number} The Y page co-ordinate value
|
|
|
242 |
*/
|
|
|
243 |
_getY : function() {
|
|
|
244 |
return this.get(XY_COORD)[1];
|
|
|
245 |
},
|
|
|
246 |
|
|
|
247 |
/**
|
|
|
248 |
* Default attribute change listener for the xy attribute, responsible
|
|
|
249 |
* for updating the UI, in response to attribute changes.
|
|
|
250 |
*
|
|
|
251 |
* @method _afterXYChange
|
|
|
252 |
* @protected
|
|
|
253 |
* @param {EventFacade} e The event facade for the attribute change
|
|
|
254 |
*/
|
|
|
255 |
_afterXYChange : function(e) {
|
|
|
256 |
if (e.src != UI) {
|
|
|
257 |
this._uiSetXY(e.newVal);
|
|
|
258 |
}
|
|
|
259 |
},
|
|
|
260 |
|
|
|
261 |
/**
|
|
|
262 |
* Updates the UI to reflect the XY page co-ordinates passed in.
|
|
|
263 |
*
|
|
|
264 |
* @method _uiSetXY
|
|
|
265 |
* @protected
|
|
|
266 |
* @param {String} val The XY page co-ordinates value to be reflected in the UI
|
|
|
267 |
*/
|
|
|
268 |
_uiSetXY : function(val) {
|
|
|
269 |
this._posNode.setXY(val);
|
|
|
270 |
}
|
|
|
271 |
};
|
|
|
272 |
|
|
|
273 |
Y.WidgetPosition = Position;
|
|
|
274 |
|
|
|
275 |
|
|
|
276 |
}, '3.18.1', {"requires": ["base-build", "node-screen", "widget"]});
|