docs/source/CSS.html

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