← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/docs/source/Element.style.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

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