jssource/src_files/include/javascript/yui3/build/node/align-plugin.js

   1 /*
   2 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 3.3.0
   6 build: 3167
   7 */
   8 YUI.add('align-plugin', function(Y) {
   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          * @parm region {String || Node || HTMLElement || Object} The node or
  59          * region to align with. Defaults to the viewport region.
  60          * @parm regionPoint {String} The point of the region to align with.
  61          * @parm point {String} The point of the node aligned to the region.
  62          * @parm 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          * @parm 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.3.0' ,{requires:['node-screen']});