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 | Ext.Element.addMethods(function(){ |
---|
11 | // local style camelizing for speed |
---|
12 | var propCache = {}, |
---|
13 | camelRe = /(-[a-z])/gi, |
---|
14 | classReCache = {}, |
---|
15 | view = document.defaultView, |
---|
16 | propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat', |
---|
17 | opacityRe = /alpha\(opacity=(.*)\)/i, |
---|
18 | trimRe = /^\s+|\s+$/g, |
---|
19 | EL = Ext.Element, |
---|
20 | PADDING = "padding", |
---|
21 | MARGIN = "margin", |
---|
22 | BORDER = "border", |
---|
23 | LEFT = "-left", |
---|
24 | RIGHT = "-right", |
---|
25 | TOP = "-top", |
---|
26 | BOTTOM = "-bottom", |
---|
27 | WIDTH = "-width", |
---|
28 | MATH = Math, |
---|
29 | HIDDEN = 'hidden', |
---|
30 | ISCLIPPED = 'isClipped', |
---|
31 | OVERFLOW = 'overflow', |
---|
32 | OVERFLOWX = 'overflow-x', |
---|
33 | OVERFLOWY = 'overflow-y', |
---|
34 | ORIGINALCLIP = 'originalClip', |
---|
35 | // special markup used throughout Ext when box wrapping elements |
---|
36 | borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH}, |
---|
37 | paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM}, |
---|
38 | margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM}, |
---|
39 | data = Ext.Element.data; |
---|
40 | |
---|
41 | |
---|
42 | // private |
---|
43 | function camelFn(m, a) { |
---|
44 | return a.charAt(1).toUpperCase(); |
---|
45 | } |
---|
46 | |
---|
47 | // private (needs to be called => addStyles.call(this, sides, styles)) |
---|
48 | function addStyles(sides, styles){ |
---|
49 | var val = 0; |
---|
50 | |
---|
51 | Ext.each(sides.match(/\w/g), function(s) { |
---|
52 | if (s = parseInt(this.getStyle(styles[s]), 10)) { |
---|
53 | val += MATH.abs(s); |
---|
54 | } |
---|
55 | }, |
---|
56 | this); |
---|
57 | return val; |
---|
58 | } |
---|
59 | |
---|
60 | function chkCache(prop) { |
---|
61 | return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn)); |
---|
62 | |
---|
63 | } |
---|
64 | |
---|
65 | return { |
---|
66 | // private ==> used by Fx |
---|
67 | adjustWidth : function(width) { |
---|
68 | var me = this; |
---|
69 | var isNum = (typeof width == "number"); |
---|
70 | if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ |
---|
71 | width -= (me.getBorderWidth("lr") + me.getPadding("lr")); |
---|
72 | } |
---|
73 | return (isNum && width < 0) ? 0 : width; |
---|
74 | }, |
---|
75 | |
---|
76 | // private ==> used by Fx |
---|
77 | adjustHeight : function(height) { |
---|
78 | var me = this; |
---|
79 | var isNum = (typeof height == "number"); |
---|
80 | if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ |
---|
81 | height -= (me.getBorderWidth("tb") + me.getPadding("tb")); |
---|
82 | } |
---|
83 | return (isNum && height < 0) ? 0 : height; |
---|
84 | }, |
---|
85 | |
---|
86 | |
---|
87 | /** |
---|
88 | * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. |
---|
89 | * @param {String/Array} className The CSS class to add, or an array of classes |
---|
90 | * @return {Ext.Element} this |
---|
91 | */ |
---|
92 | addClass : function(className){ |
---|
93 | var me = this; |
---|
94 | Ext.each(className, function(v) { |
---|
95 | me.dom.className += (!me.hasClass(v) && v ? " " + v : ""); |
---|
96 | }); |
---|
97 | return me; |
---|
98 | }, |
---|
99 | |
---|
100 | /** |
---|
101 | * Adds one or more CSS classes to this element and removes the same class(es) from all siblings. |
---|
102 | * @param {String/Array} className The CSS class to add, or an array of classes |
---|
103 | * @return {Ext.Element} this |
---|
104 | */ |
---|
105 | radioClass : function(className){ |
---|
106 | Ext.each(this.dom.parentNode.childNodes, function(v) { |
---|
107 | if(v.nodeType == 1) { |
---|
108 | Ext.fly(v, '_internal').removeClass(className); |
---|
109 | } |
---|
110 | }); |
---|
111 | return this.addClass(className); |
---|
112 | }, |
---|
113 | |
---|
114 | /** |
---|
115 | * Removes one or more CSS classes from the element. |
---|
116 | * @param {String/Array} className The CSS class to remove, or an array of classes |
---|
117 | * @return {Ext.Element} this |
---|
118 | */ |
---|
119 | removeClass : function(className){ |
---|
120 | var me = this; |
---|
121 | if (me.dom.className) { |
---|
122 | Ext.each(className, function(v) { |
---|
123 | me.dom.className = me.dom.className.replace( |
---|
124 | classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), |
---|
125 | " "); |
---|
126 | }); |
---|
127 | } |
---|
128 | return me; |
---|
129 | }, |
---|
130 | |
---|
131 | /** |
---|
132 | * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). |
---|
133 | * @param {String} className The CSS class to toggle |
---|
134 | * @return {Ext.Element} this |
---|
135 | */ |
---|
136 | toggleClass : function(className){ |
---|
137 | return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); |
---|
138 | }, |
---|
139 | |
---|
140 | /** |
---|
141 | * Checks if the specified CSS class exists on this element's DOM node. |
---|
142 | * @param {String} className The CSS class to check for |
---|
143 | * @return {Boolean} True if the class exists, else false |
---|
144 | */ |
---|
145 | hasClass : function(className){ |
---|
146 | return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; |
---|
147 | }, |
---|
148 | |
---|
149 | /** |
---|
150 | * Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added. |
---|
151 | * @param {String} oldClassName The CSS class to replace |
---|
152 | * @param {String} newClassName The replacement CSS class |
---|
153 | * @return {Ext.Element} this |
---|
154 | */ |
---|
155 | replaceClass : function(oldClassName, newClassName){ |
---|
156 | return this.removeClass(oldClassName).addClass(newClassName); |
---|
157 | }, |
---|
158 | |
---|
159 | isStyle : function(style, val) { |
---|
160 | return this.getStyle(style) == val; |
---|
161 | }, |
---|
162 | |
---|
163 | /** |
---|
164 | * Normalizes currentStyle and computedStyle. |
---|
165 | * @param {String} property The style property whose value is returned. |
---|
166 | * @return {String} The current value of the style property for this element. |
---|
167 | */ |
---|
168 | getStyle : function(){ |
---|
169 | return view && view.getComputedStyle ? |
---|
170 | function(prop){ |
---|
171 | var el = this.dom, |
---|
172 | v, |
---|
173 | cs; |
---|
174 | if(el == document) return null; |
---|
175 | prop = chkCache(prop); |
---|
176 | return (v = el.style[prop]) ? v : |
---|
177 | (cs = view.getComputedStyle(el, "")) ? cs[prop] : null; |
---|
178 | } : |
---|
179 | function(prop){ |
---|
180 | var el = this.dom, |
---|
181 | m, |
---|
182 | cs; |
---|
183 | |
---|
184 | if(el == document) return null; |
---|
185 | if (prop == 'opacity') { |
---|
186 | if (el.style.filter.match) { |
---|
187 | if(m = el.style.filter.match(opacityRe)){ |
---|
188 | var fv = parseFloat(m[1]); |
---|
189 | if(!isNaN(fv)){ |
---|
190 | return fv ? fv / 100 : 0; |
---|
191 | } |
---|
192 | } |
---|
193 | } |
---|
194 | return 1; |
---|
195 | } |
---|
196 | prop = chkCache(prop); |
---|
197 | return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null); |
---|
198 | }; |
---|
199 | }(), |
---|
200 | |
---|
201 | /** |
---|
202 | * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values |
---|
203 | * are convert to standard 6 digit hex color. |
---|
204 | * @param {String} attr The css attribute |
---|
205 | * @param {String} defaultValue The default value to use when a valid color isn't found |
---|
206 | * @param {String} prefix (optional) defaults to #. Use an empty string when working with |
---|
207 | * color anims. |
---|
208 | */ |
---|
209 | getColor : function(attr, defaultValue, prefix){ |
---|
210 | var v = this.getStyle(attr), |
---|
211 | color = prefix || '#', |
---|
212 | h; |
---|
213 | |
---|
214 | if(!v || /transparent|inherit/.test(v)){ |
---|
215 | return defaultValue; |
---|
216 | } |
---|
217 | if(/^r/.test(v)){ |
---|
218 | Ext.each(v.slice(4, v.length -1).split(','), function(s){ |
---|
219 | h = parseInt(s, 10); |
---|
220 | color += (h < 16 ? '0' : '') + h.toString(16); |
---|
221 | }); |
---|
222 | }else{ |
---|
223 | v = v.replace('#', ''); |
---|
224 | color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v; |
---|
225 | } |
---|
226 | return(color.length > 5 ? color.toLowerCase() : defaultValue); |
---|
227 | }, |
---|
228 | |
---|
229 | /** |
---|
230 | * Wrapper for setting style properties, also takes single object parameter of multiple styles. |
---|
231 | * @param {String/Object} property The style property to be set, or an object of multiple styles. |
---|
232 | * @param {String} value (optional) The value to apply to the given property, or null if an object was passed. |
---|
233 | * @return {Ext.Element} this |
---|
234 | */ |
---|
235 | setStyle : function(prop, value){ |
---|
236 | var tmp, |
---|
237 | style, |
---|
238 | camel; |
---|
239 | if (!Ext.isObject(prop)) { |
---|
240 | tmp = {}; |
---|
241 | tmp[prop] = value; |
---|
242 | prop = tmp; |
---|
243 | } |
---|
244 | for (style in prop) { |
---|
245 | value = prop[style]; |
---|
246 | style == 'opacity' ? |
---|
247 | this.setOpacity(value) : |
---|
248 | this.dom.style[chkCache(style)] = value; |
---|
249 | } |
---|
250 | return this; |
---|
251 | }, |
---|
252 | |
---|
253 | /** |
---|
254 | * Set the opacity of the element |
---|
255 | * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc |
---|
256 | * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for |
---|
257 | * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>) |
---|
258 | * @return {Ext.Element} this |
---|
259 | */ |
---|
260 | setOpacity : function(opacity, animate){ |
---|
261 | var me = this, |
---|
262 | s = me.dom.style; |
---|
263 | |
---|
264 | if(!animate || !me.anim){ |
---|
265 | if(Ext.isIE){ |
---|
266 | var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', |
---|
267 | val = s.filter.replace(opacityRe, '').replace(trimRe, ''); |
---|
268 | |
---|
269 | s.zoom = 1; |
---|
270 | s.filter = val + (val.length > 0 ? ' ' : '') + opac; |
---|
271 | }else{ |
---|
272 | s.opacity = opacity; |
---|
273 | } |
---|
274 | }else{ |
---|
275 | me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn'); |
---|
276 | } |
---|
277 | return me; |
---|
278 | }, |
---|
279 | |
---|
280 | /** |
---|
281 | * Clears any opacity settings from this element. Required in some cases for IE. |
---|
282 | * @return {Ext.Element} this |
---|
283 | */ |
---|
284 | clearOpacity : function(){ |
---|
285 | var style = this.dom.style; |
---|
286 | if(Ext.isIE){ |
---|
287 | if(!Ext.isEmpty(style.filter)){ |
---|
288 | style.filter = style.filter.replace(opacityRe, '').replace(trimRe, ''); |
---|
289 | } |
---|
290 | }else{ |
---|
291 | style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = ''; |
---|
292 | } |
---|
293 | return this; |
---|
294 | }, |
---|
295 | |
---|
296 | /** |
---|
297 | * Returns the offset height of the element |
---|
298 | * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding |
---|
299 | * @return {Number} The element's height |
---|
300 | */ |
---|
301 | getHeight : function(contentHeight){ |
---|
302 | var me = this, |
---|
303 | dom = me.dom, |
---|
304 | h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0; |
---|
305 | h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb"); |
---|
306 | return h < 0 ? 0 : h; |
---|
307 | }, |
---|
308 | |
---|
309 | /** |
---|
310 | * Returns the offset width of the element |
---|
311 | * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding |
---|
312 | * @return {Number} The element's width |
---|
313 | */ |
---|
314 | getWidth : function(contentWidth){ |
---|
315 | var me = this, |
---|
316 | dom = me.dom, |
---|
317 | w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0; |
---|
318 | w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr"); |
---|
319 | return w < 0 ? 0 : w; |
---|
320 | }, |
---|
321 | |
---|
322 | /** |
---|
323 | * Set the width of this Element. |
---|
324 | * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul> |
---|
325 | * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li> |
---|
326 | * <li>A String used to set the CSS width style. Animation may <b>not</b> be used. |
---|
327 | * </ul></div> |
---|
328 | * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object |
---|
329 | * @return {Ext.Element} this |
---|
330 | */ |
---|
331 | setWidth : function(width, animate){ |
---|
332 | var me = this; |
---|
333 | width = me.adjustWidth(width); |
---|
334 | !animate || !me.anim ? |
---|
335 | me.dom.style.width = me.addUnits(width) : |
---|
336 | me.anim({width : {to : width}}, me.preanim(arguments, 1)); |
---|
337 | return me; |
---|
338 | }, |
---|
339 | |
---|
340 | /** |
---|
341 | * Set the height of this Element. |
---|
342 | * <pre><code> |
---|
343 | // change the height to 200px and animate with default configuration |
---|
344 | Ext.fly('elementId').setHeight(200, true); |
---|
345 | |
---|
346 | // change the height to 150px and animate with a custom configuration |
---|
347 | Ext.fly('elId').setHeight(150, { |
---|
348 | duration : .5, // animation will have a duration of .5 seconds |
---|
349 | // will change the content to "finished" |
---|
350 | callback: function(){ this.{@link #update}("finished"); } |
---|
351 | }); |
---|
352 | * </code></pre> |
---|
353 | * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul> |
---|
354 | * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li> |
---|
355 | * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li> |
---|
356 | * </ul></div> |
---|
357 | * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object |
---|
358 | * @return {Ext.Element} this |
---|
359 | */ |
---|
360 | setHeight : function(height, animate){ |
---|
361 | var me = this; |
---|
362 | height = me.adjustHeight(height); |
---|
363 | !animate || !me.anim ? |
---|
364 | me.dom.style.height = me.addUnits(height) : |
---|
365 | me.anim({height : {to : height}}, me.preanim(arguments, 1)); |
---|
366 | return me; |
---|
367 | }, |
---|
368 | |
---|
369 | /** |
---|
370 | * Gets the width of the border(s) for the specified side(s) |
---|
371 | * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, |
---|
372 | * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width. |
---|
373 | * @return {Number} The width of the sides passed added together |
---|
374 | */ |
---|
375 | getBorderWidth : function(side){ |
---|
376 | return addStyles.call(this, side, borders); |
---|
377 | }, |
---|
378 | |
---|
379 | /** |
---|
380 | * Gets the width of the padding(s) for the specified side(s) |
---|
381 | * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example, |
---|
382 | * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight. |
---|
383 | * @return {Number} The padding of the sides passed added together |
---|
384 | */ |
---|
385 | getPadding : function(side){ |
---|
386 | return addStyles.call(this, side, paddings); |
---|
387 | }, |
---|
388 | |
---|
389 | /** |
---|
390 | * Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove |
---|
391 | * @return {Ext.Element} this |
---|
392 | */ |
---|
393 | clip : function(){ |
---|
394 | var me = this, |
---|
395 | dom = me.dom; |
---|
396 | |
---|
397 | if(!data(dom, ISCLIPPED)){ |
---|
398 | data(dom, ISCLIPPED, true); |
---|
399 | data(dom, ORIGINALCLIP, { |
---|
400 | o: me.getStyle(OVERFLOW), |
---|
401 | x: me.getStyle(OVERFLOWX), |
---|
402 | y: me.getStyle(OVERFLOWY) |
---|
403 | }); |
---|
404 | me.setStyle(OVERFLOW, HIDDEN); |
---|
405 | me.setStyle(OVERFLOWX, HIDDEN); |
---|
406 | me.setStyle(OVERFLOWY, HIDDEN); |
---|
407 | } |
---|
408 | return me; |
---|
409 | }, |
---|
410 | |
---|
411 | /** |
---|
412 | * Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called |
---|
413 | * @return {Ext.Element} this |
---|
414 | */ |
---|
415 | unclip : function(){ |
---|
416 | var me = this, |
---|
417 | dom = me.dom; |
---|
418 | |
---|
419 | if(data(dom, ISCLIPPED)){ |
---|
420 | data(dom, ISCLIPPED, false); |
---|
421 | var o = data(dom, ORIGINALCLIP); |
---|
422 | if(o.o){ |
---|
423 | me.setStyle(OVERFLOW, o.o); |
---|
424 | } |
---|
425 | if(o.x){ |
---|
426 | me.setStyle(OVERFLOWX, o.x); |
---|
427 | } |
---|
428 | if(o.y){ |
---|
429 | me.setStyle(OVERFLOWY, o.y); |
---|
430 | } |
---|
431 | } |
---|
432 | return me; |
---|
433 | }, |
---|
434 | |
---|
435 | addStyles : addStyles, |
---|
436 | margins : margins |
---|
437 | } |
---|
438 | }() |
---|
439 | ); |
---|