← Back to branch summary

~launchpad-pqm/lazr-js/toolchain

« back to all changes in this revision

Viewing changes to src-js/lazrjs/yui/node/align-plugin.js

  • Committer: Sidnei da Silva
  • Date: 2009-11-16 00:51:29 UTC
  • mto: This revision was merged to the branch mainline in revision 154.
  • Revision ID: sidnei.da.silva@canonical.com-20091116005129-8ibwjlboa38glaw5
- Improved generation of skin modules and revamped combo service to make it more twisty.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src-js/lazrjs/yui/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.2.0
6
 
build: 2676
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.2.0' ,{requires:['node-region']});