[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('align-plugin', function (Y, NAME) {
   9  
  10      /**
  11       * Provides advanced positioning support for Node via a Plugin
  12       * for centering and alignment.
  13       * @module align-plugin
  14       */
  15  
  16      var OFFSET_WIDTH = 'offsetWidth',
  17          OFFSET_HEIGHT = 'offsetHeight',
  18          undefined = undefined;
  19  
  20      /**
  21       * Node plugin which can be used to align a node with another node,
  22       * region, or the viewport.
  23       *
  24       * @class Plugin.Align
  25       * @param {Object} User configuration object
  26       */
  27      function Align(config) {
  28          if (config.host) {
  29              this._host = config.host;
  30          }
  31      }
  32  
  33      Align.prototype = {
  34          /**
  35           * Aligns node with a point on another node or region.
  36           * Possible alignment points are:
  37           * <dl>
  38           *      <dt>tl</dt>
  39           *      <dd>top left</dd>
  40           *      <dt>tr</dt>
  41           *      <dd>top right</dd>
  42           *      <dt>bl</dt>
  43           *      <dd>bottom left</dd>
  44           *      <dt>br</dt>
  45           *      <dd>bottom right</dd>
  46           *      <dt>tc</dt>
  47           *      <dd>top center</dd>
  48           *      <dt>bc</dt>
  49           *      <dd>bottom center</dd>
  50           *      <dt>rc</dt>
  51           *      <dd>right center</dd>
  52           *      <dt>lc</dt>
  53           *      <dd>left center</dd>
  54           *      <dt>cc</dt>
  55           *      <dd>center center</dd>
  56           * </dl>
  57           * @method to
  58           * @param region {String|Node|HTMLElement|Object} The node or
  59           * region to align with. Defaults to the viewport region.
  60           * @param regionPoint {String} The point of the region to align with.
  61           * @param point {String} The point of the node aligned to the region.
  62           * @param resize {Boolean} Whether or not the node should re-align when
  63           * the window is resized. Defaults to false.
  64           */
  65          to: function(region, regionPoint, point, syncOnResize) {
  66              // cache original args for syncing
  67              this._syncArgs = Y.Array(arguments);
  68  
  69              if (region.top === undefined) {
  70                  region = Y.one(region).get('region');
  71              }
  72  
  73              if (region) {
  74                  var xy = [region.left, region.top],
  75                      offxy = [region.width, region.height],
  76                      points = Align.points,
  77                      node = this._host,
  78                      NULL = null,
  79                      size = node.getAttrs([OFFSET_HEIGHT, OFFSET_WIDTH]),
  80                      nodeoff = [0 - size[OFFSET_WIDTH], 0 - size[OFFSET_HEIGHT]], // reverse offsets
  81                      regionFn0 = regionPoint ? points[regionPoint.charAt(0)]: NULL,
  82                      regionFn1 = (regionPoint && regionPoint !== 'cc') ? points[regionPoint.charAt(1)] : NULL,
  83                      nodeFn0 = point ? points[point.charAt(0)] : NULL,
  84                      nodeFn1 = (point && point !== 'cc') ? points[point.charAt(1)] : NULL;
  85  
  86                  if (regionFn0) {
  87                      xy = regionFn0(xy, offxy, regionPoint);
  88                  }
  89                  if (regionFn1) {
  90                      xy = regionFn1(xy, offxy, regionPoint);
  91                  }
  92  
  93                  if (nodeFn0) {
  94                      xy = nodeFn0(xy, nodeoff, point);
  95                  }
  96                  if (nodeFn1) {
  97                      xy = nodeFn1(xy, nodeoff, point);
  98                  }
  99  
 100                  if (xy && node) {
 101                      node.setXY(xy);
 102                  }
 103  
 104                  this._resize(syncOnResize);
 105  
 106              }
 107              return this;
 108          },
 109  
 110          sync: function() {
 111              this.to.apply(this, this._syncArgs);
 112              return this;
 113          },
 114  
 115          _resize: function(add) {
 116              var handle = this._handle;
 117              if (add && !handle) {
 118                  this._handle = Y.on('resize', this._onresize, window, this);
 119              } else if (!add && handle) {
 120                  handle.detach();
 121              }
 122  
 123          },
 124  
 125          _onresize: function() {
 126              var self = this;
 127              setTimeout(function() { // for performance
 128                  self.sync();
 129              });
 130          },
 131  
 132          /**
 133           * Aligns the center of a node to the center of another node or region.
 134           * @method center
 135           * @param region {Node|HTMLElement|Object} optional The node or
 136           * region to align with. Defaults to the viewport region.
 137           * the window is resized. If centering to viewport, this defaults
 138           * to true, otherwise default is false.
 139           */
 140          center: function(region, resize) {
 141              this.to(region, 'cc', 'cc', resize);
 142              return this;
 143          },
 144  
 145          /**
 146           * Removes the resize handler, if any. This is called automatically
 147           * when unplugged from the host node.
 148           * @method destroy
 149           */
 150          destroy: function() {
 151              var handle = this._handle;
 152              if (handle) {
 153                  handle.detach();
 154              }
 155          }
 156      };
 157  
 158      Align.points = {
 159          't': function(xy, off) {
 160              return xy;
 161          },
 162  
 163          'r': function(xy, off) {
 164              return [xy[0] + off[0], xy[1]];
 165          },
 166  
 167          'b': function(xy, off) {
 168              return [xy[0], xy[1] + off[1]];
 169          },
 170  
 171          'l': function(xy, off) {
 172              return xy;
 173          },
 174  
 175          'c': function(xy, off, point) {
 176              var axis = (point[0] === 't' || point[0] === 'b') ?  0 : 1,
 177                  ret, val;
 178  
 179              if (point === 'cc') {
 180                  ret = [xy[0] + off[0] / 2, xy[1] + off[1] / 2];
 181              } else {
 182                  val = xy[axis] + off[axis] / 2;
 183                  ret = (axis) ? [xy[0], val] : [val, xy[1]];
 184              }
 185  
 186               return ret;
 187          }
 188      };
 189  
 190      Align.NAME = 'Align';
 191      Align.NS = 'align';
 192  
 193      Align.prototype.constructor = Align;
 194  
 195      Y.namespace('Plugin');
 196      Y.Plugin.Align = Align;
 197  
 198  
 199  
 200  }, '3.17.2', {"requires": ["node-screen", "node-pluginhost"]});