1 <html><head><title>Roo/util/CSS.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 * Utility class for manipulating CSS rules
18 </span><span class="jsdoc-var">Roo.util.CSS </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
19 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
20 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">;
22 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camelRe </span><span class="jsdoc-syntax">= /(-[a-z])/gi;
23 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camelFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">a.charAt</span><span class="jsdoc-syntax">(1)</span><span class="jsdoc-var">.toUpperCase</span><span class="jsdoc-syntax">(); };
25 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
26 </span><span class="jsdoc-comment">/**
27 * Very simple dynamic creation of stylesheets from a text blob of rules. The text will wrapped in a style
28 * tag and appended to the HEAD of the document.
29 * @param {String|Object} cssText The text containing the css rules
30 * @param {String} id An id to add to the stylesheet for later removal
31 * @return {StyleSheet}
33 </span><span class="jsdoc-var">createStyleSheet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
34 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">;
35 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">head </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"head"</span><span class="jsdoc-syntax">)[0];
36 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nrules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"style"</span><span class="jsdoc-syntax">);
37 </span><span class="jsdoc-var">nrules.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"type"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"text/css"</span><span class="jsdoc-syntax">);
38 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
39 </span><span class="jsdoc-var">nrules.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"id"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
41 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
42 </span><span class="jsdoc-comment">// support object maps..
43 // not sure if this a good idea..
44 // perhaps it should be merged with the general css handling
45 // and handle js style props.
46 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cssTextNew </span><span class="jsdoc-syntax">= [];
47 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">) {
48 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">citems </span><span class="jsdoc-syntax">= [];
49 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">]) {
50 </span><span class="jsdoc-var">citems.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' : ' </span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">';' </span><span class="jsdoc-syntax">);
52 </span><span class="jsdoc-var">cssTextNew.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' { ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">citems.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">'} '</span><span class="jsdoc-syntax">);
55 </span><span class="jsdoc-var">cssText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssTextNew.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"\n"</span><span class="jsdoc-syntax">);
60 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
61 </span><span class="jsdoc-var">head.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nrules</span><span class="jsdoc-syntax">);
62 </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nrules.styleSheet</span><span class="jsdoc-syntax">;
63 </span><span class="jsdoc-var">ss.cssText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">;
64 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
65 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
66 </span><span class="jsdoc-var">nrules.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">doc.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">));
67 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
68 </span><span class="jsdoc-var">nrules.cssText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">;
70 </span><span class="jsdoc-var">head.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nrules</span><span class="jsdoc-syntax">);
71 </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nrules.styleSheet </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">nrules.styleSheet </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">nrules.sheet </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">doc.styleSheets</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">doc.styleSheets.length</span><span class="jsdoc-syntax">-1]);
73 </span><span class="jsdoc-var">this.cacheStyleSheet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">);
74 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">;
77 </span><span class="jsdoc-comment">/**
78 * Removes a style or link tag by id
79 * @param {String} id The id of the tag
81 </span><span class="jsdoc-var">removeStyleSheet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
82 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">existing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.getElementById</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
83 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existing</span><span class="jsdoc-syntax">){
84 </span><span class="jsdoc-var">existing.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existing</span><span class="jsdoc-syntax">);
88 </span><span class="jsdoc-comment">/**
89 * Dynamically swaps an existing stylesheet reference for a new one
90 * @param {String} id The id of an existing link tag to remove
91 * @param {String} url The href of the new stylesheet to include
93 </span><span class="jsdoc-var">swapStyleSheet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">){
94 </span><span class="jsdoc-var">this.removeStyleSheet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
95 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"link"</span><span class="jsdoc-syntax">);
96 </span><span class="jsdoc-var">ss.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"rel"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"stylesheet"</span><span class="jsdoc-syntax">);
97 </span><span class="jsdoc-var">ss.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"type"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"text/css"</span><span class="jsdoc-syntax">);
98 </span><span class="jsdoc-var">ss.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"id"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
99 </span><span class="jsdoc-var">ss.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"href"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">url</span><span class="jsdoc-syntax">);
100 </span><span class="jsdoc-var">doc.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"head"</span><span class="jsdoc-syntax">)[0]</span><span class="jsdoc-var">.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">);
103 </span><span class="jsdoc-comment">/**
104 * Refresh the rule cache if you have dynamically added stylesheets
105 * @return {Object} An object (hash) of rules indexed by selector
107 </span><span class="jsdoc-var">refreshCache </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
108 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getRules</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
111 </span><span class="jsdoc-comment">// private
112 </span><span class="jsdoc-var">cacheStyleSheet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stylesheet</span><span class="jsdoc-syntax">){
113 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">rules</span><span class="jsdoc-syntax">){
114 </span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">= {};
116 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-comment">// try catch for cross domain access issue
117 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ssRules </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">stylesheet.cssRules </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">stylesheet.rules</span><span class="jsdoc-syntax">;
118 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ssRules.length</span><span class="jsdoc-syntax">-1; </span><span class="jsdoc-var">j </span><span class="jsdoc-syntax">>= 0; --</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">){
119 </span><span class="jsdoc-var">rules</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">ssRules</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.selectorText</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">ssRules</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">j</span><span class="jsdoc-syntax">];
121 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
124 </span><span class="jsdoc-comment">/**
125 * Gets all css rules for the document
126 * @param {Boolean} refreshCache true to refresh the internal cache
127 * @return {Object} An object (hash) of rules indexed by selector
129 </span><span class="jsdoc-var">getRules </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">refreshCache</span><span class="jsdoc-syntax">){
130 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">null </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">refreshCache</span><span class="jsdoc-syntax">){
131 </span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">= {};
132 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.styleSheets</span><span class="jsdoc-syntax">;
133 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ds.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
134 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
135 </span><span class="jsdoc-var">this.cacheStyleSheet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ds</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
136 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
139 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rules</span><span class="jsdoc-syntax">;
142 </span><span class="jsdoc-comment">/**
143 * Gets an an individual CSS rule by selector(s)
144 * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
145 * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
146 * @return {CSSRule} The CSS rule or null if one is not found
148 </span><span class="jsdoc-var">getRule </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">refreshCache</span><span class="jsdoc-syntax">){
149 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRules</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">refreshCache</span><span class="jsdoc-syntax">);
150 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">selector </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">)){
151 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">];
153 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">selector.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
154 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]]){
155 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]];
158 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
162 </span><span class="jsdoc-comment">/**
163 * Updates a rule property
164 * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
165 * @param {String} property The css property
166 * @param {String} value The new value for the property
167 * @return {Boolean} true If a rule was found and updated
169 </span><span class="jsdoc-var">updateRule </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
170 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">selector </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">)){
171 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rule </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getRule</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">);
172 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rule</span><span class="jsdoc-syntax">){
173 </span><span class="jsdoc-var">rule.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">property.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">camelRe</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">camelFn</span><span class="jsdoc-syntax">)] = </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
174 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
176 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
177 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">< </span><span class="jsdoc-var">selector.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
178 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.updateRule</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">selector</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">property</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)){
179 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
183 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
186 }();</span></code></body></html>