docs/source/CSS.html

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