3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
17 * Utility class for manipulating CSS rules
20 Ext.define('Ext.util.CSS', function() {
24 var camelRe = /(-[a-z])/gi;
25 var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
31 constructor: function() {
33 this.initialized = false;
37 * Creates a stylesheet from a text blob of rules.
38 * These rules will be wrapped in a STYLE tag and appended to the HEAD of the document.
39 * @param {String} cssText The text containing the css rules
40 * @param {String} id An id to add to the stylesheet for later removal
41 * @return {CSSStyleSheet}
43 createStyleSheet : function(cssText, id) {
45 head = doc.getElementsByTagName("head")[0],
46 styleEl = doc.createElement("style");
48 styleEl.setAttribute("type", "text/css");
50 styleEl.setAttribute("id", id);
54 head.appendChild(styleEl);
55 ss = styleEl.styleSheet;
59 styleEl.appendChild(doc.createTextNode(cssText));
61 styleEl.cssText = cssText;
63 head.appendChild(styleEl);
64 ss = styleEl.styleSheet ? styleEl.styleSheet : (styleEl.sheet || doc.styleSheets[doc.styleSheets.length-1]);
66 this.cacheStyleSheet(ss);
71 * Removes a style or link tag by id
72 * @param {String} id The id of the tag
74 removeStyleSheet : function(id) {
75 var existing = document.getElementById(id);
77 existing.parentNode.removeChild(existing);
82 * Dynamically swaps an existing stylesheet reference for a new one
83 * @param {String} id The id of an existing link tag to remove
84 * @param {String} url The href of the new stylesheet to include
86 swapStyleSheet : function(id, url) {
88 this.removeStyleSheet(id);
89 var ss = doc.createElement("link");
90 ss.setAttribute("rel", "stylesheet");
91 ss.setAttribute("type", "text/css");
92 ss.setAttribute("id", id);
93 ss.setAttribute("href", url);
94 doc.getElementsByTagName("head")[0].appendChild(ss);
98 * Refresh the rule cache if you have dynamically added stylesheets
99 * @return {Object} An object (hash) of rules indexed by selector
101 refreshCache : function() {
102 return this.getRules(true);
106 cacheStyleSheet : function(ss) {
110 try {// try catch for cross domain access issue
111 var ssRules = ss.cssRules || ss.rules,
113 i = ssRules.length - 1,
117 for (; i >= 0; --i) {
118 selectorText = ssRules[i].selectorText;
121 // Split in case there are multiple, comma-delimited selectors
122 selectorText = selectorText.split(',');
123 selectors = selectorText.length;
124 for (j = 0; j < selectors; j++) {
125 rules[Ext.String.trim(selectorText[j]).toLowerCase()] = ssRules[i];
133 * Gets all css rules for the document
134 * @param {Boolean} refreshCache true to refresh the internal cache
135 * @return {Object} An object (hash) of rules indexed by selector
137 getRules : function(refreshCache) {
138 if (rules === null || refreshCache) {
140 var ds = doc.styleSheets,
144 for (; i < len; i++) {
146 if (!ds[i].disabled) {
147 this.cacheStyleSheet(ds[i]);
156 * Gets an an individual CSS rule by selector(s)
157 * @param {String/String[]} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
158 * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
159 * @return {CSSStyleRule} The CSS rule or null if one is not found
161 getRule: function(selector, refreshCache) {
162 var rs = this.getRules(refreshCache);
163 if (!Ext.isArray(selector)) {
164 return rs[selector.toLowerCase()];
166 for (var i = 0; i < selector.length; i++) {
167 if (rs[selector[i]]) {
168 return rs[selector[i].toLowerCase()];
175 * Updates a rule property
176 * @param {String/String[]} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
177 * @param {String} property The css property
178 * @param {String} value The new value for the property
179 * @return {Boolean} true If a rule was found and updated
181 updateRule : function(selector, property, value){
182 if (!Ext.isArray(selector)) {
183 var rule = this.getRule(selector);
185 rule.style[property.replace(camelRe, camelFn)] = value;
189 for (var i = 0; i < selector.length; i++) {
190 if (this.updateRule(selector[i], property, value)) {