CSS.html 7.6 KB

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