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