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 }, '@VERSION@', {"requires": ["base-build", "node-screen", "widget"]});