docs/source/CSS.html

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