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