docs/source/CSS.html

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