1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.Element |
---|
9 | */ |
---|
10 | (function(){ |
---|
11 | var D = Ext.lib.Dom, |
---|
12 | LEFT = "left", |
---|
13 | RIGHT = "right", |
---|
14 | TOP = "top", |
---|
15 | BOTTOM = "bottom", |
---|
16 | POSITION = "position", |
---|
17 | STATIC = "static", |
---|
18 | RELATIVE = "relative", |
---|
19 | AUTO = "auto", |
---|
20 | ZINDEX = "z-index"; |
---|
21 | |
---|
22 | function animTest(args, animate, i) { |
---|
23 | return this.preanim && !!animate ? this.preanim(args, i) : false |
---|
24 | } |
---|
25 | |
---|
26 | Ext.Element.addMethods({ |
---|
27 | /** |
---|
28 | * Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
29 | * @return {Number} The X position of the element |
---|
30 | */ |
---|
31 | getX : function(){ |
---|
32 | return D.getX(this.dom); |
---|
33 | }, |
---|
34 | |
---|
35 | /** |
---|
36 | * Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
37 | * @return {Number} The Y position of the element |
---|
38 | */ |
---|
39 | getY : function(){ |
---|
40 | return D.getY(this.dom); |
---|
41 | }, |
---|
42 | |
---|
43 | /** |
---|
44 | * Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
45 | * @return {Array} The XY position of the element |
---|
46 | */ |
---|
47 | getXY : function(){ |
---|
48 | return D.getXY(this.dom); |
---|
49 | }, |
---|
50 | |
---|
51 | /** |
---|
52 | * Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates. |
---|
53 | * @param {Mixed} element The element to get the offsets from. |
---|
54 | * @return {Array} The XY page offsets (e.g. [100, -200]) |
---|
55 | */ |
---|
56 | getOffsetsTo : function(el){ |
---|
57 | var o = this.getXY(), |
---|
58 | e = Ext.fly(el, '_internal').getXY(); |
---|
59 | return [o[0]-e[0],o[1]-e[1]]; |
---|
60 | }, |
---|
61 | |
---|
62 | /** |
---|
63 | * Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
64 | * @param {Number} The X position of the element |
---|
65 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
66 | * @return {Ext.Element} this |
---|
67 | */ |
---|
68 | setX : function(x, animate){ |
---|
69 | return this.setXY([x, this.getY()], animTest.call(this, arguments, animate, 1)); |
---|
70 | }, |
---|
71 | |
---|
72 | /** |
---|
73 | * Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
74 | * @param {Number} The Y position of the element |
---|
75 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
76 | * @return {Ext.Element} this |
---|
77 | */ |
---|
78 | setY : function(y, animate){ |
---|
79 | return this.setXY([this.getX(), y], animTest.call(this, arguments, animate, 1)); |
---|
80 | }, |
---|
81 | |
---|
82 | /** |
---|
83 | * Sets the element's left position directly using CSS style (instead of {@link #setX}). |
---|
84 | * @param {String} left The left CSS property value |
---|
85 | * @return {Ext.Element} this |
---|
86 | */ |
---|
87 | setLeft : function(left){ |
---|
88 | this.setStyle(LEFT, this.addUnits(left)); |
---|
89 | return this; |
---|
90 | }, |
---|
91 | |
---|
92 | /** |
---|
93 | * Sets the element's top position directly using CSS style (instead of {@link #setY}). |
---|
94 | * @param {String} top The top CSS property value |
---|
95 | * @return {Ext.Element} this |
---|
96 | */ |
---|
97 | setTop : function(top){ |
---|
98 | this.setStyle(TOP, this.addUnits(top)); |
---|
99 | return this; |
---|
100 | }, |
---|
101 | |
---|
102 | /** |
---|
103 | * Sets the element's CSS right style. |
---|
104 | * @param {String} right The right CSS property value |
---|
105 | * @return {Ext.Element} this |
---|
106 | */ |
---|
107 | setRight : function(right){ |
---|
108 | this.setStyle(RIGHT, this.addUnits(right)); |
---|
109 | return this; |
---|
110 | }, |
---|
111 | |
---|
112 | /** |
---|
113 | * Sets the element's CSS bottom style. |
---|
114 | * @param {String} bottom The bottom CSS property value |
---|
115 | * @return {Ext.Element} this |
---|
116 | */ |
---|
117 | setBottom : function(bottom){ |
---|
118 | this.setStyle(BOTTOM, this.addUnits(bottom)); |
---|
119 | return this; |
---|
120 | }, |
---|
121 | |
---|
122 | /** |
---|
123 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
124 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
125 | * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based) |
---|
126 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
127 | * @return {Ext.Element} this |
---|
128 | */ |
---|
129 | setXY : function(pos, animate){ |
---|
130 | var me = this; |
---|
131 | if(!animate || !me.anim){ |
---|
132 | D.setXY(me.dom, pos); |
---|
133 | }else{ |
---|
134 | me.anim({points: {to: pos}}, me.preanim(arguments, 1), 'motion'); |
---|
135 | } |
---|
136 | return me; |
---|
137 | }, |
---|
138 | |
---|
139 | /** |
---|
140 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
141 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
142 | * @param {Number} x X value for new position (coordinates are page-based) |
---|
143 | * @param {Number} y Y value for new position (coordinates are page-based) |
---|
144 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
145 | * @return {Ext.Element} this |
---|
146 | */ |
---|
147 | setLocation : function(x, y, animate){ |
---|
148 | return this.setXY([x, y], animTest.call(this, arguments, animate, 2)); |
---|
149 | }, |
---|
150 | |
---|
151 | /** |
---|
152 | * Sets the position of the element in page coordinates, regardless of how the element is positioned. |
---|
153 | * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). |
---|
154 | * @param {Number} x X value for new position (coordinates are page-based) |
---|
155 | * @param {Number} y Y value for new position (coordinates are page-based) |
---|
156 | * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object |
---|
157 | * @return {Ext.Element} this |
---|
158 | */ |
---|
159 | moveTo : function(x, y, animate){ |
---|
160 | return this.setXY([x, y], animTest.call(this, arguments, animate, 2)); |
---|
161 | }, |
---|
162 | |
---|
163 | /** |
---|
164 | * Gets the left X coordinate |
---|
165 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
166 | * @return {Number} |
---|
167 | */ |
---|
168 | getLeft : function(local){ |
---|
169 | return !local ? this.getX() : parseInt(this.getStyle(LEFT), 10) || 0; |
---|
170 | }, |
---|
171 | |
---|
172 | /** |
---|
173 | * Gets the right X coordinate of the element (element X position + element width) |
---|
174 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
175 | * @return {Number} |
---|
176 | */ |
---|
177 | getRight : function(local){ |
---|
178 | var me = this; |
---|
179 | return !local ? me.getX() + me.getWidth() : (me.getLeft(true) + me.getWidth()) || 0; |
---|
180 | }, |
---|
181 | |
---|
182 | /** |
---|
183 | * Gets the top Y coordinate |
---|
184 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
185 | * @return {Number} |
---|
186 | */ |
---|
187 | getTop : function(local) { |
---|
188 | return !local ? this.getY() : parseInt(this.getStyle(TOP), 10) || 0; |
---|
189 | }, |
---|
190 | |
---|
191 | /** |
---|
192 | * Gets the bottom Y coordinate of the element (element Y position + element height) |
---|
193 | * @param {Boolean} local True to get the local css position instead of page coordinate |
---|
194 | * @return {Number} |
---|
195 | */ |
---|
196 | getBottom : function(local){ |
---|
197 | var me = this; |
---|
198 | return !local ? me.getY() + me.getHeight() : (me.getTop(true) + me.getHeight()) || 0; |
---|
199 | }, |
---|
200 | |
---|
201 | /** |
---|
202 | * Initializes positioning on this element. If a desired position is not passed, it will make the |
---|
203 | * the element positioned relative IF it is not already positioned. |
---|
204 | * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed" |
---|
205 | * @param {Number} zIndex (optional) The zIndex to apply |
---|
206 | * @param {Number} x (optional) Set the page X position |
---|
207 | * @param {Number} y (optional) Set the page Y position |
---|
208 | */ |
---|
209 | position : function(pos, zIndex, x, y){ |
---|
210 | var me = this; |
---|
211 | |
---|
212 | if(!pos && me.isStyle(POSITION, STATIC)){ |
---|
213 | me.setStyle(POSITION, RELATIVE); |
---|
214 | } else if(pos) { |
---|
215 | me.setStyle(POSITION, pos); |
---|
216 | } |
---|
217 | if(zIndex){ |
---|
218 | me.setStyle(ZINDEX, zIndex); |
---|
219 | } |
---|
220 | if(x || y) me.setXY([x || false, y || false]); |
---|
221 | }, |
---|
222 | |
---|
223 | /** |
---|
224 | * Clear positioning back to the default when the document was loaded |
---|
225 | * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'. |
---|
226 | * @return {Ext.Element} this |
---|
227 | */ |
---|
228 | clearPositioning : function(value){ |
---|
229 | value = value || ''; |
---|
230 | this.setStyle({ |
---|
231 | left : value, |
---|
232 | right : value, |
---|
233 | top : value, |
---|
234 | bottom : value, |
---|
235 | "z-index" : "", |
---|
236 | position : STATIC |
---|
237 | }); |
---|
238 | return this; |
---|
239 | }, |
---|
240 | |
---|
241 | /** |
---|
242 | * Gets an object with all CSS positioning properties. Useful along with setPostioning to get |
---|
243 | * snapshot before performing an update and then restoring the element. |
---|
244 | * @return {Object} |
---|
245 | */ |
---|
246 | getPositioning : function(){ |
---|
247 | var l = this.getStyle(LEFT); |
---|
248 | var t = this.getStyle(TOP); |
---|
249 | return { |
---|
250 | "position" : this.getStyle(POSITION), |
---|
251 | "left" : l, |
---|
252 | "right" : l ? "" : this.getStyle(RIGHT), |
---|
253 | "top" : t, |
---|
254 | "bottom" : t ? "" : this.getStyle(BOTTOM), |
---|
255 | "z-index" : this.getStyle(ZINDEX) |
---|
256 | }; |
---|
257 | }, |
---|
258 | |
---|
259 | /** |
---|
260 | * Set positioning with an object returned by getPositioning(). |
---|
261 | * @param {Object} posCfg |
---|
262 | * @return {Ext.Element} this |
---|
263 | */ |
---|
264 | setPositioning : function(pc){ |
---|
265 | var me = this, |
---|
266 | style = me.dom.style; |
---|
267 | |
---|
268 | me.setStyle(pc); |
---|
269 | |
---|
270 | if(pc.right == AUTO){ |
---|
271 | style.right = ""; |
---|
272 | } |
---|
273 | if(pc.bottom == AUTO){ |
---|
274 | style.bottom = ""; |
---|
275 | } |
---|
276 | |
---|
277 | return me; |
---|
278 | }, |
---|
279 | |
---|
280 | /** |
---|
281 | * Translates the passed page coordinates into left/top css values for this element |
---|
282 | * @param {Number/Array} x The page x or an array containing [x, y] |
---|
283 | * @param {Number} y (optional) The page y, required if x is not an array |
---|
284 | * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)} |
---|
285 | */ |
---|
286 | translatePoints : function(x, y){ |
---|
287 | y = isNaN(x[1]) ? y : x[1]; |
---|
288 | x = isNaN(x[0]) ? x : x[0]; |
---|
289 | var me = this, |
---|
290 | relative = me.isStyle(POSITION, RELATIVE), |
---|
291 | o = me.getXY(), |
---|
292 | l = parseInt(me.getStyle(LEFT), 10), |
---|
293 | t = parseInt(me.getStyle(TOP), 10); |
---|
294 | |
---|
295 | l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft); |
---|
296 | t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop); |
---|
297 | |
---|
298 | return {left: (x - o[0] + l), top: (y - o[1] + t)}; |
---|
299 | }, |
---|
300 | |
---|
301 | animTest : animTest |
---|
302 | }); |
---|
303 | })(); |
---|