2
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
7
YUI.add('widget-position-ext', function(Y) {
10
* Provides extended/advanced XY positioning support for Widgets, through an extension.
12
* It builds on top of the widget-position module, to provide alignmentment and centering support.
13
* Future releases aim to add constrained and fixed positioning support.
15
* @module widget-position-ext
23
OFFSET_WIDTH = "offsetWidth",
24
OFFSET_HEIGHT = "offsetHeight",
25
VIEWPORT_REGION = "viewportRegion",
28
AlignChange = "alignChange";
31
* Widget extension, which can be used to add extended XY positioning support to the base Widget class,
32
* through the <a href="Base.html#method_build">Base.build</a> method.
34
* @class WidgetPositionExt
35
* @param {Object} User configuration object
37
function PositionExt(config) {
38
Y.after(this._syncUIPosExtras, this, SYNCUI);
39
Y.after(this._bindUIPosExtras, this, BINDUI);
43
* Static property used to define the default attribute
44
* configuration introduced by WidgetPositionExt.
46
* @property WidgetPositionExt.ATTRS
56
* @desciption The align attribute is used to align a reference point on the widget, with the refernce point on another node, or the viewport.
57
* The object which align expects has the following properties:
61
* The node to which the Widget is to be aligned. If set to null, or not provided, the Widget is aligned to the viewport
66
* A two element array, defining the two points on the Widget and node/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.
67
* Supported alignment points are defined as static properties on <code>WidgetPositionExt</code>.
70
* e.g. <code>[WidgetPositionExt.TR, WidgetPositionExt.TL]</code> aligns the Top-Right corner of the Widget with the
71
* Top-Left corner of the node/viewport, and <code>[WidgetPositionExt.CC, WidgetPositionExt.TC]</code> aligns the Center of the
72
* Widget with the Top-Center edge of the node/viewport.
83
* @type {boolean | node}
85
* @description A convenience attribute, which can be used as a shortcut for the align attribute.
86
* If set to true, the Widget is centered in the viewport. If set to a node reference or valid selector string,
87
* the Widget will be centered within the node. If set the false, no center positioning is applied.
91
return this._setAlignCenter(val);
98
* Constant used to specify the top-left corner for alignment
100
* @property WidgetPositionExt.TL
105
PositionExt.TL = "tl";
107
* Constant used to specify the top-right corner for alignment
109
* @property WidgetPositionExt.TR
114
PositionExt.TR = "tr";
116
* Constant used to specify the bottom-left corner for alignment
118
* @property WidgetPositionExt.BL
123
PositionExt.BL = "bl";
125
* Constant used to specify the bottom-right corner for alignment
127
* @property WidgetPositionExt.BR
132
PositionExt.BR = "br";
134
* Constant used to specify the top edge-center point for alignment
136
* @property WidgetPositionExt.TC
141
PositionExt.TC = "tc";
143
* Constant used to specify the right edge, center point for alignment
145
* @property WidgetPositionExt.RC
150
PositionExt.RC = "rc";
152
* Constant used to specify the bottom edge, center point for alignment
154
* @property WidgetPositionExt.BC
159
PositionExt.BC = "bc";
161
* Constant used to specify the left edge, center point for alignment
163
* @property WidgetPositionExt.LC
168
PositionExt.LC = "lc";
170
* Constant used to specify the center of widget/node/viewport for alignment
172
* @property WidgetPositionExt.CC
177
PositionExt.CC = "cc";
179
PositionExt.prototype = {
182
* Synchronizes the UI to match the Widgets extended positioning state.
183
* This method in invoked after syncUI is invoked for the Widget class
184
* using YUI's aop infrastructure.
186
* @method _syncUIPosExtras
189
_syncUIPosExtras : function() {
190
var align = this.get(ALIGN);
192
this._uiSetAlign(align.node, align.points);
197
* Binds event listeners responsible for updating the UI state in response to
198
* Widget extended positioning related state changes.
200
* This method is invoked after bindUI is invoked for the Widget class
201
* using YUI's aop infrastructure.
203
* @method _bindUIStack
206
_bindUIPosExtras : function() {
207
this.after(AlignChange, this._afterAlignChange);
211
* Default setter for center attribute changes. Sets up the appropriate value, and passes
212
* it through the to the align attribute.
214
* @method _setAlignCenter
216
* @param {boolean | node} The attribute value being set.
217
* @return {Number} The attribute value being set.
219
_setAlignCenter : function(val) {
222
node: val === true ? null : val,
223
points: [PositionExt.CC, PositionExt.CC]
230
* Default attribute change listener for the align attribute, responsible
231
* for updating the UI, in response to attribute changes.
233
* @method _afterAlignChange
235
* @param {Event.Facade} e The event facade for the attribute change
237
_afterAlignChange : function(e) {
239
this._uiSetAlign(e.newVal.node, e.newVal.points);
244
* Updates the UI to reflect the align value passed in (see the align attribute documentation, for the object stucture expected)
245
* @method _uiSetAlign
247
* @param {Node | null} The node to align to, or null to indicate the viewport
249
_uiSetAlign: function (node, points) {
251
if (!L.isArray(points) || points.length != 2) {
252
Y.fail("align: Invalid Points Arguments");
256
var nodeRegion, widgetPoint, nodePoint, xy;
259
nodeRegion = this._posNode.get(VIEWPORT_REGION);
261
node = Y.Node.get(node);
263
nodeRegion = node.get(REGION);
269
// TODO: ViewportRegion doesn't have width/height - Workaround until normalized in Node/Dom
270
nodeRegion.width = nodeRegion.width || nodeRegion.right - nodeRegion.left;
271
nodeRegion.height = nodeRegion.height || nodeRegion.bottom - nodeRegion.top;
273
widgetPoint = points[0];
274
nodePoint = points[1];
276
// TODO: Optimize KWeight - Would lookup table help?
279
xy = [nodeRegion.left, nodeRegion.top];
282
xy = [nodeRegion.right, nodeRegion.top];
285
xy = [nodeRegion.left, nodeRegion.bottom];
288
xy = [nodeRegion.right, nodeRegion.bottom];
291
xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.top];
294
xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.bottom];
297
xy = [nodeRegion.left, nodeRegion.top + Math.floor(nodeRegion.height/2)];
300
xy = [nodeRegion.right, nodeRegion.top + Math.floor(nodeRegion.height/2), widgetPoint];
303
xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.top + Math.floor(nodeRegion.height/2), widgetPoint];
306
Y.log("align: Invalid Points Arguments", "info", "widget-position-extras");
311
this._doAlign(widgetPoint, xy[0], xy[1]);
317
* Helper method, used to align the given point on the widget, with the XY page co-ordinates provided.
321
* @param {String} widgetPoint Supported point constant (e.g. WidgetPositionExt.TL)
322
* @param {Number} x X page co-ordinate to align to
323
* @param {Number} y Y page co-ordinate to align to
325
_doAlign : function(widgetPoint, x, y) {
326
var widgetNode = this._posNode,
329
switch (widgetPoint) {
334
xy = [x - widgetNode.get(OFFSET_WIDTH), y];
337
xy = [x, y - widgetNode.get(OFFSET_HEIGHT)];
340
xy = [x - widgetNode.get(OFFSET_WIDTH), y - widgetNode.get(OFFSET_HEIGHT)];
343
xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y];
346
xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y - widgetNode.get(OFFSET_HEIGHT)];
349
xy = [x, y - (widgetNode.get(OFFSET_HEIGHT)/2)];
352
xy = [(x - widgetNode.get(OFFSET_WIDTH)), y - (widgetNode.get(OFFSET_HEIGHT)/2)];
355
xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y - (widgetNode.get(OFFSET_HEIGHT)/2)];
358
Y.log("align: Invalid Points Argument", "info", "widget-position-extras");
368
* Aligns the Widget to the provided node (or viewport) using the provided
369
* points. The method can be invoked directly, however it will result in
370
* the align attribute being out of sync with current position of the of Widget.
373
* @param {Node | String | null} node A reference (or selector string) for the Node which with the Widget is to be aligned.
374
* If null is passed in, the Widget will be aligned with the viewport.
375
* @param {Array[2]} points A two element array, specifying the points on the Widget and node/viewport which need to be aligned.
376
* The first entry is the point on the Widget, and the second entry is the point on the node/viewport which need to align.
377
* Valid point references are defined as static constants on the WidgetPositionExt class.
379
* e.g. [WidgetPositionExt.TL, WidgetPositionExt.TR] will align the top-left corner of the Widget with the top-right corner of the node/viewport.
381
align: function (node, points) {
382
this.set(ALIGN, {node: node, points:points});
386
* Centers the container in the viewport, or if a node is passed in,
390
* @param {Node | String} node Optional. A node reference or selector string defining the node
391
* inside which the Widget is to be centered. If not passed in, the Widget will be centered in the
394
centered: function (node) {
395
this.align(node, [PositionExt.CC, PositionExt.CC]);
399
Y.WidgetPositionExt = PositionExt;
403
}, '3.0.0pr2' ,{requires:['widget', 'widget-position']});
added
removed
loggerhead/static/javascript/yui/build/widget/widget-position-ext-debug.js
