Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / CSS.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.1
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.util.CSS"></div>/**
16  * @class Ext.util.CSS
17  * Utility class for manipulating CSS rules
18  * @singleton
19  */
20 Ext.util.CSS = function(){
21         var rules = null;
22         var doc = document;
23
24     var camelRe = /(-[a-z])/gi;
25     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
26
27    return {
28    <div id="method-Ext.util.CSS-createStyleSheet"></div>/**
29     * Creates a stylesheet from a text blob of rules.
30     * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
31     * @param {String} cssText The text containing the css rules
32     * @param {String} id An id to add to the stylesheet for later removal
33     * @return {StyleSheet}
34     */
35    createStyleSheet : function(cssText, id){
36        var ss;
37        var head = doc.getElementsByTagName("head")[0];
38        var rules = doc.createElement("style");
39        rules.setAttribute("type", "text/css");
40        if(id){
41            rules.setAttribute("id", id);
42        }
43        if(Ext.isIE){
44            head.appendChild(rules);
45            ss = rules.styleSheet;
46            ss.cssText = cssText;
47        }else{
48            try{
49                 rules.appendChild(doc.createTextNode(cssText));
50            }catch(e){
51                rules.cssText = cssText;
52            }
53            head.appendChild(rules);
54            ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
55        }
56        this.cacheStyleSheet(ss);
57        return ss;
58    },
59
60    <div id="method-Ext.util.CSS-removeStyleSheet"></div>/**
61     * Removes a style or link tag by id
62     * @param {String} id The id of the tag
63     */
64    removeStyleSheet : function(id){
65        var existing = doc.getElementById(id);
66        if(existing){
67            existing.parentNode.removeChild(existing);
68        }
69    },
70
71    <div id="method-Ext.util.CSS-swapStyleSheet"></div>/**
72     * Dynamically swaps an existing stylesheet reference for a new one
73     * @param {String} id The id of an existing link tag to remove
74     * @param {String} url The href of the new stylesheet to include
75     */
76    swapStyleSheet : function(id, url){
77        this.removeStyleSheet(id);
78        var ss = doc.createElement("link");
79        ss.setAttribute("rel", "stylesheet");
80        ss.setAttribute("type", "text/css");
81        ss.setAttribute("id", id);
82        ss.setAttribute("href", url);
83        doc.getElementsByTagName("head")[0].appendChild(ss);
84    },
85    
86    <div id="method-Ext.util.CSS-refreshCache"></div>/**
87     * Refresh the rule cache if you have dynamically added stylesheets
88     * @return {Object} An object (hash) of rules indexed by selector
89     */
90    refreshCache : function(){
91        return this.getRules(true);
92    },
93
94    // private
95    cacheStyleSheet : function(ss){
96        if(!rules){
97            rules = {};
98        }
99        try{// try catch for cross domain access issue
100            var ssRules = ss.cssRules || ss.rules;
101            for(var j = ssRules.length-1; j >= 0; --j){
102                rules[ssRules[j].selectorText.toLowerCase()] = ssRules[j];
103            }
104        }catch(e){}
105    },
106    
107    <div id="method-Ext.util.CSS-getRules"></div>/**
108     * Gets all css rules for the document
109     * @param {Boolean} refreshCache true to refresh the internal cache
110     * @return {Object} An object (hash) of rules indexed by selector
111     */
112    getRules : function(refreshCache){
113                 if(rules === null || refreshCache){
114                         rules = {};
115                         var ds = doc.styleSheets;
116                         for(var i =0, len = ds.length; i < len; i++){
117                             try{
118                         this.cacheStyleSheet(ds[i]);
119                     }catch(e){} 
120                 }
121                 }
122                 return rules;
123         },
124         
125         <div id="method-Ext.util.CSS-getRule"></div>/**
126     * Gets an an individual CSS rule by selector(s)
127     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
128     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
129     * @return {CSSRule} The CSS rule or null if one is not found
130     */
131    getRule : function(selector, refreshCache){
132                 var rs = this.getRules(refreshCache);
133                 if(!Ext.isArray(selector)){
134                     return rs[selector.toLowerCase()];
135                 }
136                 for(var i = 0; i < selector.length; i++){
137                         if(rs[selector[i]]){
138                                 return rs[selector[i].toLowerCase()];
139                         }
140                 }
141                 return null;
142         },
143         
144         
145         <div id="method-Ext.util.CSS-updateRule"></div>/**
146     * Updates a rule property
147     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
148     * @param {String} property The css property
149     * @param {String} value The new value for the property
150     * @return {Boolean} true If a rule was found and updated
151     */
152    updateRule : function(selector, property, value){
153                 if(!Ext.isArray(selector)){
154                         var rule = this.getRule(selector);
155                         if(rule){
156                                 rule.style[property.replace(camelRe, camelFn)] = value;
157                                 return true;
158                         }
159                 }else{
160                         for(var i = 0; i < selector.length; i++){
161                                 if(this.updateRule(selector[i], property, value)){
162                                         return true;
163                                 }
164                         }
165                 }
166                 return false;
167         }
168    };   
169 }();</pre>    
170 </body>
171 </html>