File: widget-position/js/Widget-Position.js
/**
* Provides basic XY positioning support for Widgets, though an extension
*
* @module widget-position
*/
var Lang = Y.Lang,
Widget = Y.Widget,
XY_COORD = "xy",
POSITION = "position",
POSITIONED = "positioned",
BOUNDING_BOX = "boundingBox",
RELATIVE = "relative",
RENDERUI = "renderUI",
BINDUI = "bindUI",
SYNCUI = "syncUI",
UI = Widget.UI_SRC,
XYChange = "xyChange";
/**
* Widget extension, which can be used to add positioning support to the base Widget class,
* through the <a href="Base.html#method_build">Base.build</a> method.
*
* @class WidgetPosition
* @param {Object} config User configuration object
*/
function Position(config) {
}
/**
* Static property used to define the default attribute
* configuration introduced by WidgetPosition.
*
* @property ATTRS
* @static
* @type Object
*/
Position.ATTRS = {
/**
* @attribute x
* @type number
* @default 0
*
* @description Page X co-ordinate for the widget. This attribute acts as a facade for the
* xy attribute. Changes in position can be monitored by listening for xyChange events.
*/
x: {
setter: function(val) {
this._setX(val);
},
getter: function() {
return this._getX();
},
lazyAdd:false
},
/**
* @attribute y
* @type number
* @default 0
*
* @description Page Y co-ordinate for the widget. This attribute acts as a facade for the
* xy attribute. Changes in position can be monitored by listening for xyChange events.
*/
y: {
setter: function(val) {
this._setY(val);
},
getter: function() {
return this._getY();
},
lazyAdd: false
},
/**
* @attribute xy
* @type Array
* @default [0,0]
*
* @description Page XY co-ordinate pair for the widget.
*/
xy: {
value:[0,0],
validator: function(val) {
return this._validateXY(val);
}
}
};
/**
* Default class used to mark the boundingBox of a positioned widget.
*
* @property POSITIONED_CLASS_NAME
* @type String
* @default "yui-widget-positioned"
* @static
*/
Position.POSITIONED_CLASS_NAME = Widget.getClassName(POSITIONED);
Position.prototype = {
initializer : function() {
this._posNode = this.get(BOUNDING_BOX);
// WIDGET METHOD OVERLAP
Y.after(this._renderUIPosition, this, RENDERUI);
Y.after(this._syncUIPosition, this, SYNCUI);
Y.after(this._bindUIPosition, this, BINDUI);
},
/**
* Creates/Initializes the DOM to support xy page positioning.
* <p>
* This method in invoked after renderUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _renderUIPosition
* @protected
*/
_renderUIPosition : function() {
this._posNode.addClass(Position.POSITIONED_CLASS_NAME);
},
/**
* Synchronizes the UI to match the Widgets xy page position state.
* <p>
* This method in invoked after syncUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _syncUIPosition
* @protected
*/
_syncUIPosition : function() {
var posNode = this._posNode;
if (posNode.getStyle(POSITION) === RELATIVE) {
this.syncXY();
}
this._uiSetXY(this.get(XY_COORD));
},
/**
* Binds event listeners responsible for updating the UI state in response to
* Widget position related state changes.
* <p>
* This method in invoked after bindUI is invoked for the Widget class
* using YUI's aop infrastructure.
* </p>
* @method _bindUIPosition
* @protected
*/
_bindUIPosition :function() {
this.after(XYChange, this._afterXYChange);
},
/**
* Moves the Widget to the specified page xy co-ordinate position.
*
* @method move
*
* @param {Number|Number[]} x The new x position or [x, y] values passed
* as an array to support simple pass through of Node.getXY results
* @param {Number} [y] The new y position
*/
move: function () {
var args = arguments,
coord = (Lang.isArray(args[0])) ? args[0] : [args[0], args[1]];
this.set(XY_COORD, coord);
},
/**
* Synchronizes the Panel's "xy", "x", and "y" properties with the
* Widget's position in the DOM.
*
* @method syncXY
*/
syncXY : function () {
this.set(XY_COORD, this._posNode.getXY(), {src: UI});
},
/**
* Default validator for the XY attribute
*
* @method _validateXY
* @protected
* @param {Array} val The XY page co-ordinate value which is being set.
* @return {boolean} true if valid, false if not.
*/
_validateXY : function(val) {
return (Lang.isArray(val) && Lang.isNumber(val[0]) && Lang.isNumber(val[1]));
},
/**
* Default setter for the X attribute. The setter passes the X value through
* to the XY attribute, which is the sole store for the XY state.
*
* @method _setX
* @protected
* @param {Number} val The X page co-ordinate value
*/
_setX : function(val) {
this.set(XY_COORD, [val, this.get(XY_COORD)[1]]);
},
/**
* Default setter for the Y attribute. The setter passes the Y value through
* to the XY attribute, which is the sole store for the XY state.
*
* @method _setY
* @protected
* @param {Number} val The Y page co-ordinate value
*/
_setY : function(val) {
this.set(XY_COORD, [this.get(XY_COORD)[0], val]);
},
/**
* Default getter for the X attribute. The value is retrieved from
* the XY attribute, which is the sole store for the XY state.
*
* @method _getX
* @protected
* @return {Number} The X page co-ordinate value
*/
_getX : function() {
return this.get(XY_COORD)[0];
},
/**
* Default getter for the Y attribute. The value is retrieved from
* the XY attribute, which is the sole store for the XY state.
*
* @method _getY
* @protected
* @return {Number} The Y page co-ordinate value
*/
_getY : function() {
return this.get(XY_COORD)[1];
},
/**
* Default attribute change listener for the xy attribute, responsible
* for updating the UI, in response to attribute changes.
*
* @method _afterXYChange
* @protected
* @param {EventFacade} e The event facade for the attribute change
*/
_afterXYChange : function(e) {
if (e.src != UI) {
this._uiSetXY(e.newVal);
}
},
/**
* Updates the UI to reflect the XY page co-ordinates passed in.
*
* @method _uiSetXY
* @protected
* @param {String} val The XY page co-ordinates value to be reflected in the UI
*/
_uiSetXY : function(val) {
this._posNode.setXY(val);
}
};
Y.WidgetPosition = Position;