CSSStyleDeclaration.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. //.CommonJS
  2. var CSSOM = {};
  3. var regexPatterns = require("./regexPatterns").regexPatterns;
  4. ///CommonJS
  5. /**
  6. * @constructor
  7. * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
  8. */
  9. CSSOM.CSSStyleDeclaration = function CSSStyleDeclaration(){
  10. this.length = 0;
  11. this.parentRule = null;
  12. // NON-STANDARD
  13. this._importants = {};
  14. };
  15. CSSOM.CSSStyleDeclaration.prototype = {
  16. constructor: CSSOM.CSSStyleDeclaration,
  17. /**
  18. *
  19. * @param {string} name
  20. * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue
  21. * @return {string} the value of the property if it has been explicitly set for this declaration block.
  22. * Returns the empty string if the property has not been set.
  23. */
  24. getPropertyValue: function(name) {
  25. return this[name] || "";
  26. },
  27. /**
  28. *
  29. * @param {string} name
  30. * @param {string} value
  31. * @param {string} [priority=null] "important" or null
  32. * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
  33. */
  34. setProperty: function(name, value, priority, parseErrorHandler)
  35. {
  36. // NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
  37. var basicStylePropertyValueValidationRegExp = regexPatterns.basicStylePropertyValueValidationRegExp
  38. if (basicStylePropertyValueValidationRegExp.test(value)) {
  39. parseErrorHandler && parseErrorHandler('Invalid CSSStyleDeclaration property (name = "' + name + '", value = "' + value + '")');
  40. } else if (this[name]) {
  41. // Property already exist. Overwrite it.
  42. var index = Array.prototype.indexOf.call(this, name);
  43. if (index < 0) {
  44. this[this.length] = name;
  45. this.length++;
  46. }
  47. // If the priority value of the incoming property is "important",
  48. // or the value of the existing property is not "important",
  49. // then remove the existing property and rewrite it.
  50. if (priority || !this._importants[name]) {
  51. this.removeProperty(name);
  52. this[this.length] = name;
  53. this.length++;
  54. this[name] = value + '';
  55. this._importants[name] = priority;
  56. }
  57. } else {
  58. // New property.
  59. this[this.length] = name;
  60. this.length++;
  61. this[name] = value + '';
  62. this._importants[name] = priority;
  63. }
  64. },
  65. /**
  66. *
  67. * @param {string} name
  68. * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-removeProperty
  69. * @return {string} the value of the property if it has been explicitly set for this declaration block.
  70. * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
  71. */
  72. removeProperty: function(name) {
  73. if (!(name in this)) {
  74. return "";
  75. }
  76. var index = Array.prototype.indexOf.call(this, name);
  77. if (index < 0) {
  78. return "";
  79. }
  80. var prevValue = this[name];
  81. this[name] = "";
  82. // That's what WebKit and Opera do
  83. Array.prototype.splice.call(this, index, 1);
  84. // That's what Firefox does
  85. //this[index] = ""
  86. return prevValue;
  87. },
  88. getPropertyCSSValue: function() {
  89. //FIXME
  90. },
  91. /**
  92. *
  93. * @param {String} name
  94. */
  95. getPropertyPriority: function(name) {
  96. return this._importants[name] || "";
  97. },
  98. /**
  99. * element.style.overflow = "auto"
  100. * element.style.getPropertyShorthand("overflow-x")
  101. * -> "overflow"
  102. */
  103. getPropertyShorthand: function() {
  104. //FIXME
  105. },
  106. isPropertyImplicit: function() {
  107. //FIXME
  108. },
  109. // Doesn't work in IE < 9
  110. get cssText(){
  111. var properties = [];
  112. for (var i=0, length=this.length; i < length; ++i) {
  113. var name = this[i];
  114. var value = this.getPropertyValue(name);
  115. var priority = this.getPropertyPriority(name);
  116. if (priority) {
  117. priority = " !" + priority;
  118. }
  119. properties[i] = name + ": " + value + priority + ";";
  120. }
  121. return properties.join(" ");
  122. },
  123. set cssText(text){
  124. var i, name;
  125. for (i = this.length; i--;) {
  126. name = this[i];
  127. this[name] = "";
  128. }
  129. Array.prototype.splice.call(this, 0, this.length);
  130. this._importants = {};
  131. var dummyRule = CSSOM.parse('#bogus{' + text + '}').cssRules[0].style;
  132. var length = dummyRule.length;
  133. for (i = 0; i < length; ++i) {
  134. name = dummyRule[i];
  135. this.setProperty(dummyRule[i], dummyRule.getPropertyValue(name), dummyRule.getPropertyPriority(name));
  136. }
  137. }
  138. };
  139. //.CommonJS
  140. exports.CSSStyleDeclaration = CSSOM.CSSStyleDeclaration;
  141. CSSOM.parse = require('./parse').parse; // Cannot be included sooner due to the mutual dependency between parse.js and CSSStyleDeclaration.js
  142. ///CommonJS