151 lines
No EOL
5.6 KiB
HTML
151 lines
No EOL
5.6 KiB
HTML
<html><head><title>CSS.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>CSS.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.util.CSS
|
|
* Utility class <b>for</b> manipulating CSS rules
|
|
* @singleton
|
|
*/</i>
|
|
Ext.util.CSS = <b>function</b>(){
|
|
<b>var</b> rules = null;
|
|
<b>var</b> doc = document;
|
|
|
|
<b>var</b> camelRe = /(-[a-z])/gi;
|
|
<b>var</b> camelFn = <b>function</b>(m, a){ <b>return</b> a.charAt(1).toUpperCase(); };
|
|
|
|
<b>return</b> {
|
|
<i>/**
|
|
* Very simple dynamic creation of stylesheets from a text blob of rules. The text will wrapped <b>in</b> a style
|
|
* tag and appended to the HEAD of the document.
|
|
* @param {String} cssText The text containing the css rules
|
|
* @<b>return</b> {StyleSheet}
|
|
*/</i>
|
|
createStyleSheet : <b>function</b>(cssText){
|
|
<b>var</b> ss;
|
|
<b>if</b>(Ext.isIE){
|
|
ss = doc.createStyleSheet();
|
|
ss.cssText = cssText;
|
|
}<b>else</b>{
|
|
<b>var</b> head = doc.getElementsByTagName("head")[0];
|
|
<b>var</b> rules = doc.createElement("style");
|
|
rules.setAttribute("type", "text/css");
|
|
try{
|
|
rules.appendChild(doc.createTextNode(cssText));
|
|
}catch(e){
|
|
rules.cssText = cssText;
|
|
}
|
|
head.appendChild(rules);
|
|
ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
|
|
}
|
|
<b>this</b>.cacheStyleSheet(ss);
|
|
<b>return</b> ss;
|
|
},
|
|
|
|
<i>/**
|
|
* Removes a style or link tag by id
|
|
* @param {String} id The id of the tag
|
|
*/</i>
|
|
removeStyleSheet : <b>function</b>(id){
|
|
<b>var</b> existing = doc.getElementById(id);
|
|
<b>if</b>(existing){
|
|
existing.parentNode.removeChild(existing);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Dynamically swaps an existing stylesheet reference <b>for</b> a <b>new</b> one
|
|
* @param {String} id The id of an existing link tag to remove
|
|
* @param {String} url The href of the <b>new</b> stylesheet to include
|
|
*/</i>
|
|
swapStyleSheet : <b>function</b>(id, url){
|
|
<b>this</b>.removeStyleSheet(id);
|
|
<b>var</b> ss = doc.createElement("link");
|
|
ss.setAttribute("rel", "stylesheet");
|
|
ss.setAttribute("type", "text/css");
|
|
ss.setAttribute("id", id);
|
|
ss.setAttribute("href", url);
|
|
doc.getElementsByTagName("head")[0].appendChild(ss);
|
|
},
|
|
|
|
<i>/**
|
|
* Refresh the rule cache <b>if</b> you have dynamically added stylesheets
|
|
* @<b>return</b> {Object} An object (hash) of rules indexed by selector
|
|
*/</i>
|
|
refreshCache : <b>function</b>(){
|
|
<b>return</b> this.getRules(true);
|
|
},
|
|
|
|
<i>// private</i>
|
|
cacheStyleSheet : <b>function</b>(ss){
|
|
<b>if</b>(!rules){
|
|
rules = {};
|
|
}
|
|
try{<i>// try catch <b>for</b> cross domain access issue</i>
|
|
<b>var</b> ssRules = ss.cssRules || ss.rules;
|
|
<b>for</b>(var j = ssRules.length-1; j >= 0; --j){
|
|
rules[ssRules[j].selectorText] = ssRules[j];
|
|
}
|
|
}catch(e){}
|
|
},
|
|
|
|
<i>/**
|
|
* Gets all css rules <b>for</b> the document
|
|
* @param {Boolean} refreshCache true to refresh the internal cache
|
|
* @<b>return</b> {Object} An object (hash) of rules indexed by selector
|
|
*/</i>
|
|
getRules : <b>function</b>(refreshCache){
|
|
<b>if</b>(rules == null || refreshCache){
|
|
rules = {};
|
|
<b>var</b> ds = doc.styleSheets;
|
|
<b>for</b>(var i =0, len = ds.length; i < len; i++){
|
|
try{
|
|
<b>this</b>.cacheStyleSheet(ds[i]);
|
|
}catch(e){}
|
|
}
|
|
}
|
|
<b>return</b> rules;
|
|
},
|
|
|
|
<i>/**
|
|
* Gets an an individual CSS rule by selector(s)
|
|
* @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
|
|
* @param {Boolean} refreshCache true to refresh the internal cache <b>if</b> you have recently updated any rules or added styles dynamically
|
|
* @<b>return</b> {CSSRule} The CSS rule or null <b>if</b> one is not found
|
|
*/</i>
|
|
getRule : <b>function</b>(selector, refreshCache){
|
|
<b>var</b> rs = <b>this</b>.getRules(refreshCache);
|
|
<b>if</b>(!(selector instanceof Array)){
|
|
<b>return</b> rs[selector];
|
|
}
|
|
<b>for</b>(var i = 0; i < selector.length; i++){
|
|
<b>if</b>(rs[selector[i]]){
|
|
<b>return</b> rs[selector[i]];
|
|
}
|
|
}
|
|
<b>return</b> null;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Updates a rule property
|
|
* @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
|
|
* @param {String} property The css property
|
|
* @param {String} value The <b>new</b> value <b>for</b> the property
|
|
* @<b>return</b> {Boolean} true If a rule was found and updated
|
|
*/</i>
|
|
updateRule : <b>function</b>(selector, property, value){
|
|
<b>if</b>(!(selector instanceof Array)){
|
|
<b>var</b> rule = <b>this</b>.getRule(selector);
|
|
<b>if</b>(rule){
|
|
rule.style[property.replace(camelRe, camelFn)] = value;
|
|
<b>return</b> true;
|
|
}
|
|
}<b>else</b>{
|
|
<b>for</b>(var i = 0; i < selector.length; i++){
|
|
<b>if</b>(this.updateRule(selector[i], property, value)){
|
|
<b>return</b> true;
|
|
}
|
|
}
|
|
}
|
|
<b>return</b> false;
|
|
}
|
|
};
|
|
}();</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |