[Summary view] [Print] [Text view]

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