docs/source/CSS.html

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