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
19 </span><span class="jsdoc-var">Roo.util.CSS </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
20 </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">;
21 </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">;
23 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">camelRe </span><span class="jsdoc-syntax">= /(-[a-z])/gi;
24 </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">(); };
26 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
27 </span><span class="jsdoc-comment">/**
28 * Very simple dynamic creation of stylesheets from a text blob of rules. The text will wrapped in a style
29 * tag and appended to the HEAD of the document.
30 * @param {String|Object} cssText The text containing the css rules
31 * @param {String} id An id to add to the stylesheet for later removal
32 * @return {StyleSheet}
34 </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">){
35 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">;
36 </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];
37 </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">);
38 </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">);
39 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">){
40 </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">);
42 </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">) {
43 </span><span class="jsdoc-comment">// support object maps..
44 // not sure if this a good idea..
45 // perhaps it should be merged with the general css handling
46 // and handle js style props.
47 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cssTextNew </span><span class="jsdoc-syntax">= [];
48 </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">) {
49 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">citems </span><span class="jsdoc-syntax">= [];
50 </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">]) {
51 </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">);
53 </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">);
56 </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">);
61 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
62 </span><span class="jsdoc-var">head.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nrules</span><span class="jsdoc-syntax">);
63 </span><span class="jsdoc-var">ss </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nrules.styleSheet</span><span class="jsdoc-syntax">;
64 </span><span class="jsdoc-var">ss.cssText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">;
65 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
66 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
67 </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">));
68 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
69 </span><span class="jsdoc-var">nrules.cssText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cssText</span><span class="jsdoc-syntax">;
71 </span><span class="jsdoc-var">head.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nrules</span><span class="jsdoc-syntax">);
72 </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]);
74 </span><span class="jsdoc-var">this.cacheStyleSheet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">);
75 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ss</span><span class="jsdoc-syntax">;
78 </span><span class="jsdoc-comment">/**
79 * Removes a style or link tag by id
80 * @param {String} id The id of the tag
82 </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">){
83 </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">);
84 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existing</span><span class="jsdoc-syntax">){
85 </span><span class="jsdoc-var">existing.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">existing</span><span class="jsdoc-syntax">);
89 </span><span class="jsdoc-comment">/**
90 * Dynamically swaps an existing stylesheet reference for a new one
91 * @param {String} id The id of an existing link tag to remove
92 * @param {String} url The href of the new stylesheet to include
94 </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">){
95 </span><span class="jsdoc-var">this.removeStyleSheet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">);
96 </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">);
97 </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">);
98 </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">);
99 </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">);
100 </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">);
101 </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">);
104 </span><span class="jsdoc-comment">/**
105 * Refresh the rule cache if you have dynamically added stylesheets
106 * @return {Object} An object (hash) of rules indexed by selector
108 </span><span class="jsdoc-var">refreshCache </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
109 </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">);
112 </span><span class="jsdoc-comment">// private
113 </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">){
114 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">rules</span><span class="jsdoc-syntax">){
115 </span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">= {};
117 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{</span><span class="jsdoc-comment">// try catch for cross domain access issue
118 </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">;
119 </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">){
120 </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">];
122 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
125 </span><span class="jsdoc-comment">/**
126 * Gets all css rules for the document
127 * @param {Boolean} refreshCache true to refresh the internal cache
128 * @return {Object} An object (hash) of rules indexed by selector
130 </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">){
131 </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">){
132 </span><span class="jsdoc-var">rules </span><span class="jsdoc-syntax">= {};
133 </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">;
134 </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">++){
135 </span><span class="jsdoc-keyword">try</span><span class="jsdoc-syntax">{
136 </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">]);
137 }</span><span class="jsdoc-keyword">catch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){}
140 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rules</span><span class="jsdoc-syntax">;
143 </span><span class="jsdoc-comment">/**
144 * Gets an an individual CSS rule by selector(s)
145 * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
146 * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
147 * @return {CSSRule} The CSS rule or null if one is not found
149 </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">){
150 </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">);
151 </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">)){
152 </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">];
154 </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">++){
155 </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">]]){
156 </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">]];
159 </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
163 </span><span class="jsdoc-comment">/**
164 * Updates a rule property
165 * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
166 * @param {String} property The css property
167 * @param {String} value The new value for the property
168 * @return {Boolean} true If a rule was found and updated
170 </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">){
171 </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">)){
172 </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">);
173 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rule</span><span class="jsdoc-syntax">){
174 </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">;
175 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
177 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
178 </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">++){
179 </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">)){
180 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
184 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
187 }();</span></code></body></html>