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