Widget-PositionExt.js revision 4d1598c3e0a0b50935d0b39e5d69b68f3fdc41f0
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync/**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Provides extended/advanced XY positioning support for Widgets, through an extension.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * It builds on top of the widget-position module, to provide alignmentment and centering support.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Future releases aim to add constrained and fixed positioning support.
c58f1213e628a545081c70e26c6b67a841cff880vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @module widget-position-ext
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync */
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync var L = Y.Lang,
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync ALIGN = "align",
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync BINDUI = "bindUI",
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync SYNCUI = "syncUI",
82bcaaf8077ba892f39afb721dca149353c63d2cvboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync OFFSET_WIDTH = "offsetWidth",
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync OFFSET_HEIGHT = "offsetHeight",
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync VIEWPORT_REGION = "viewportRegion",
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync REGION = "region",
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
b6cba2c351e97805b97998ebe48e03ecef16b59avboxsync AlignChange = "alignChange";
43747b1f0bc8302a238fb35e55857a5e9aa1933dvboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Widget extension, which can be used to add extended XY positioning support to the base Widget class,
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * through the <a href="Base.html#method_build">Base.build</a> method.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @class WidgetPositionExt
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Object} User configuration object
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync function PositionExt(config) {
3fe24a3690526efc4cceece3819d628caadf3140vboxsync Y.after(this._syncUIPosExtras, this, SYNCUI);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync Y.after(this._bindUIPosExtras, this, BINDUI);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Static property used to define the default attribute
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * configuration introduced by WidgetPositionExt.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @property WidgetPositionExt.ATTRS
8112e0942f1128329b99b22a20b395963d4abceavboxsync * @type Object
8112e0942f1128329b99b22a20b395963d4abceavboxsync * @static
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.ATTRS = {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @attribute align
874be5c5b701726b68fa1391022ae2f5c7768894vboxsync * @type Object
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @default null
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @desciption The align attribute is used to align a reference point on the widget, with the refernce point on another node, or the viewport.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * The object which align expects has the following properties:
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <dl>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <dt>node</dt>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <dd>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * The node to which the Widget is to be aligned. If set to null, or not provided, the Widget is aligned to the viewport
8112e0942f1128329b99b22a20b395963d4abceavboxsync * </dd>
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync * <dt>points</dt>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <dd>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * A two element array, defining the two points on the Widget and node/viewport which are to be aligned. The first element is the point on the Widget, and the second element is the point on the node/viewport.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Supported alignment points are defined as static properties on <code>WidgetPositionExt</code>.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * </p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * e.g. <code>[WidgetPositionExt.TR, WidgetPositionExt.TL]</code> aligns the Top-Right corner of the Widget with the
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Top-Left corner of the node/viewport, and <code>[WidgetPositionExt.CC, WidgetPositionExt.TC]</code> aligns the Center of the
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Widget with the Top-Center edge of the node/viewport.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * </p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * </dd>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * </dl>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync align: {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync value:null
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @attribute centered
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @type {boolean | node}
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @default false
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @description A convenience attribute, which can be used as a shortcut for the align attribute.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * If set to true, the Widget is centered in the viewport. If set to a node reference or valid selector string,
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync * the Widget will be centered within the node. If set the false, no center positioning is applied.
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync */
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync centered: {
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync setter: function(val) {
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync return this._setAlignCenter(val);
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync },
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync value:false
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync }
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync };
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync /**
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync * Constant used to specify the top-left corner for alignment
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync *
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync * @property WidgetPositionExt.TL
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @type String
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @static
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @value "tl"
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.TL = "tl";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Constant used to specify the top-right corner for alignment
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @property WidgetPositionExt.TR
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @type String
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @static
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @value "tr"
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.TR = "tr";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Constant used to specify the bottom-left corner for alignment
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @property WidgetPositionExt.BL
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @type String
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @static
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @value "bl"
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.BL = "bl";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Constant used to specify the bottom-right corner for alignment
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @property WidgetPositionExt.BR
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @type String
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @static
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @value "br"
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.BR = "br";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * Constant used to specify the top edge-center point for alignment
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync *
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @property WidgetPositionExt.TC
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @type String
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @static
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @value "tc"
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync */
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync PositionExt.TC = "tc";
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync /**
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * Constant used to specify the right edge, center point for alignment
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync *
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @property WidgetPositionExt.RC
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @type String
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync * @static
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync * @value "rc"
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.RC = "rc";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * Constant used to specify the bottom edge, center point for alignment
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync *
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @property WidgetPositionExt.BC
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @type String
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @static
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @value "bc"
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync */
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync PositionExt.BC = "bc";
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync /**
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * Constant used to specify the left edge, center point for alignment
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync *
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @property WidgetPositionExt.LC
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @type String
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @static
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @value "lc"
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync */
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync PositionExt.LC = "lc";
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync /**
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * Constant used to specify the center of widget/node/viewport for alignment
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync *
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @property WidgetPositionExt.CC
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * @type String
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @static
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @value "cc"
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.CC = "cc";
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync PositionExt.prototype = {
0cbaa6b7062076428f638cc5afba9d16200c6076vboxsync
0cbaa6b7062076428f638cc5afba9d16200c6076vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Synchronizes the UI to match the Widgets extended positioning state.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * This method in invoked after syncUI is invoked for the Widget class
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * using YUI's aop infrastructure.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method _syncUIPosExtras
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @protected
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync _syncUIPosExtras : function() {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync var align = this.get(ALIGN);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync if (align) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync this._uiSetAlign(align.node, align.points);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Binds event listeners responsible for updating the UI state in response to
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Widget extended positioning related state changes.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * <p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * This method is invoked after bindUI is invoked for the Widget class
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * using YUI's aop infrastructure.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * </p>
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method _bindUIStack
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @protected
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync _bindUIPosExtras : function() {
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync this.after(AlignChange, this._afterAlignChange);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync /**
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync * Default setter for center attribute changes. Sets up the appropriate value, and passes
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync * it through the to the align attribute.
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync *
6cd65034f702d9b4122249011835e9639a7bc660vboxsync * @method _setAlignCenter
6cd65034f702d9b4122249011835e9639a7bc660vboxsync * @protected
6cd65034f702d9b4122249011835e9639a7bc660vboxsync * @param {boolean | node} The attribute value being set.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @return {Number} The attribute value being set.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync _setAlignCenter : function(val) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync if (val) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync this.set(ALIGN, {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync node: val === true ? null : val,
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync points: [PositionExt.CC, PositionExt.CC]
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync });
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync return val;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Default attribute change listener for the align attribute, responsible
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * for updating the UI, in response to attribute changes.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method _afterAlignChange
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @protected
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Event.Facade} e The event facade for the attribute change
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync */
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync _afterAlignChange : function(e) {
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync if (e.newVal) {
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync this._uiSetAlign(e.newVal.node, e.newVal.points);
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync * Updates the UI to reflect the align value passed in (see the align attribute documentation, for the object stucture expected)
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method _uiSetAlign
8112e0942f1128329b99b22a20b395963d4abceavboxsync * @protected
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Node | null} The node to align to, or null to indicate the viewport
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync _uiSetAlign: function (node, points) {
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync if (!L.isArray(points) || points.length != 2) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync Y.error("align: Invalid Points Arguments");
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync return;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
8112e0942f1128329b99b22a20b395963d4abceavboxsync var nodeRegion, widgetPoint, nodePoint, xy;
33f7a1bbfb625f3401368928cd5e9317ca04881dvboxsync
8112e0942f1128329b99b22a20b395963d4abceavboxsync if (!node) {
8112e0942f1128329b99b22a20b395963d4abceavboxsync nodeRegion = this._posNode.get(VIEWPORT_REGION);
8112e0942f1128329b99b22a20b395963d4abceavboxsync } else {
8112e0942f1128329b99b22a20b395963d4abceavboxsync node = Y.Node.get(node);
4fa6d2a2ac7d62a1815bcb6d6565ae7cdf775cdbvboxsync if (node) {
4fa6d2a2ac7d62a1815bcb6d6565ae7cdf775cdbvboxsync nodeRegion = node.get(REGION);
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync }
aa327535f5ce61d8851bf6495ca1b507f013252bvboxsync }
8112e0942f1128329b99b22a20b395963d4abceavboxsync
8112e0942f1128329b99b22a20b395963d4abceavboxsync if (nodeRegion) {
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync // TODO: ViewportRegion doesn't have width/height - Workaround until normalized in Node/Dom
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync nodeRegion.width = nodeRegion.width || nodeRegion.right - nodeRegion.left;
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync nodeRegion.height = nodeRegion.height || nodeRegion.bottom - nodeRegion.top;
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync widgetPoint = points[0];
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync nodePoint = points[1];
bb2f3a7f00e605b890f8a8a74969f551cc9a0477vboxsync
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync // TODO: Optimize KWeight - Would lookup table help?
689866c0e5e611f2db46822ae47724b55a27a1a0vboxsync switch (nodePoint) {
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.TL:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.left, nodeRegion.top];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.TR:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.right, nodeRegion.top];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.BL:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.left, nodeRegion.bottom];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.BR:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.right, nodeRegion.bottom];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.TC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.top];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.BC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.bottom];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync case PositionExt.LC:
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync xy = [nodeRegion.left, nodeRegion.top + Math.floor(nodeRegion.height/2)];
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync break;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync case PositionExt.RC:
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync xy = [nodeRegion.right, nodeRegion.top + Math.floor(nodeRegion.height/2), widgetPoint];
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync break;
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync case PositionExt.CC:
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync xy = [nodeRegion.left + Math.floor(nodeRegion.width/2), nodeRegion.top + Math.floor(nodeRegion.height/2), widgetPoint];
02973eaf12e421595fcc3bbee4dd355d495ecfe6vboxsync break;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync default:
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync Y.log("align: Invalid Points Arguments", "info", "widget-position-extras");
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync break;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync if (xy) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync this._doAlign(widgetPoint, xy[0], xy[1]);
8112e0942f1128329b99b22a20b395963d4abceavboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Helper method, used to align the given point on the widget, with the XY page co-ordinates provided.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method _doAlign
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @private
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {String} widgetPoint Supported point constant (e.g. WidgetPositionExt.TL)
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Number} x X page co-ordinate to align to
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Number} y Y page co-ordinate to align to
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync _doAlign : function(widgetPoint, x, y) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync var widgetNode = this._posNode,
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync xy;
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
8112e0942f1128329b99b22a20b395963d4abceavboxsync switch (widgetPoint) {
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.TL:
8112e0942f1128329b99b22a20b395963d4abceavboxsync xy = [x, y];
8112e0942f1128329b99b22a20b395963d4abceavboxsync break;
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.TR:
8112e0942f1128329b99b22a20b395963d4abceavboxsync xy = [x - widgetNode.get(OFFSET_WIDTH), y];
8112e0942f1128329b99b22a20b395963d4abceavboxsync break;
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.BL:
8112e0942f1128329b99b22a20b395963d4abceavboxsync xy = [x, y - widgetNode.get(OFFSET_HEIGHT)];
8112e0942f1128329b99b22a20b395963d4abceavboxsync break;
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.BR:
8112e0942f1128329b99b22a20b395963d4abceavboxsync xy = [x - widgetNode.get(OFFSET_WIDTH), y - widgetNode.get(OFFSET_HEIGHT)];
8112e0942f1128329b99b22a20b395963d4abceavboxsync break;
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.TC:
8112e0942f1128329b99b22a20b395963d4abceavboxsync xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y];
8112e0942f1128329b99b22a20b395963d4abceavboxsync break;
8112e0942f1128329b99b22a20b395963d4abceavboxsync case PositionExt.BC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y - widgetNode.get(OFFSET_HEIGHT)];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.LC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [x, y - (widgetNode.get(OFFSET_HEIGHT)/2)];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.RC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [(x - widgetNode.get(OFFSET_WIDTH)), y - (widgetNode.get(OFFSET_HEIGHT)/2)];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync case PositionExt.CC:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync xy = [x - (widgetNode.get(OFFSET_WIDTH)/2), y - (widgetNode.get(OFFSET_HEIGHT)/2)];
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync default:
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync Y.log("align: Invalid Points Argument", "info", "widget-position-extras");
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync break;
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync }
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync
c9a52d0e2159c4f4bd272a727406e47562ae82b4vboxsync if (xy) {
8112e0942f1128329b99b22a20b395963d4abceavboxsync this.move(xy);
8112e0942f1128329b99b22a20b395963d4abceavboxsync }
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Aligns the Widget to the provided node (or viewport) using the provided
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * points. The method can be invoked directly, however it will result in
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * the align attribute being out of sync with current position of the of Widget.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method align
500d759609a43a472c7a29b58f3479ed319a5a76vboxsync * @param {Node | String | null} node A reference (or selector string) for the Node which with the Widget is to be aligned.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * If null is passed in, the Widget will be aligned with the viewport.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Array[2]} points A two element array, specifying the points on the Widget and node/viewport which need to be aligned.
500d759609a43a472c7a29b58f3479ed319a5a76vboxsync * The first entry is the point on the Widget, and the second entry is the point on the node/viewport which need to align.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Valid point references are defined as static constants on the WidgetPositionExt class.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * e.g. [WidgetPositionExt.TL, WidgetPositionExt.TR] will align the top-left corner of the Widget with the top-right corner of the node/viewport.
500d759609a43a472c7a29b58f3479ed319a5a76vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync align: function (node, points) {
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync this.set(ALIGN, {node: node, points:points});
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync },
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync /**
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * Centers the container in the viewport, or if a node is passed in,
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * the node.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync *
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @method centered
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * @param {Node | String} node Optional. A node reference or selector string defining the node
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * inside which the Widget is to be centered. If not passed in, the Widget will be centered in the
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync * viewport.
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync */
ae0f2178b9a5aded928e0245cb830ba1d3d04c57vboxsync centered: function (node) {
8112e0942f1128329b99b22a20b395963d4abceavboxsync this.align(node, [PositionExt.CC, PositionExt.CC]);
0e3950d85821ff3f0f9191f7bf0efe7b3510a808vboxsync }
0e3950d85821ff3f0f9191f7bf0efe7b3510a808vboxsync };
0e3950d85821ff3f0f9191f7bf0efe7b3510a808vboxsync
0e3950d85821ff3f0f9191f7bf0efe7b3510a808vboxsync Y.WidgetPositionExt = PositionExt;
0e3950d85821ff3f0f9191f7bf0efe7b3510a808vboxsync