dom-prop.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. define("dojo/dom-prop", ["exports", "./_base/kernel", "./_base/sniff", "./_base/lang", "./dom", "./dom-style", "./dom-construct", "./_base/connect"],
  2. function(exports, dojo, has, lang, dom, style, ctr, conn){
  3. // module:
  4. // dojo/dom-prop
  5. // summary:
  6. // This module defines the core dojo DOM properties API.
  7. // Indirectly depends on dojo.empty() and dojo.toDom().
  8. // =============================
  9. // Element properties Functions
  10. // =============================
  11. /*=====
  12. prop.get = function(node, name){
  13. // summary:
  14. // Gets a property on an HTML element.
  15. // description:
  16. // Handles normalized getting of properties on DOM nodes.
  17. //
  18. // node: DOMNode|String
  19. // id or reference to the element to get the property on
  20. // name: String
  21. // the name of the property to get.
  22. // returns:
  23. // the value of the requested property or its default value
  24. //
  25. // example:
  26. // | // get the current value of the "foo" property on a node
  27. // | dojo.getProp(dojo.byId("nodeId"), "foo");
  28. // | // or we can just pass the id:
  29. // | dojo.getProp("nodeId", "foo");
  30. };
  31. =====*/
  32. /*=====
  33. prop.set = function(node, name, value){
  34. // summary:
  35. // Sets a property on an HTML element.
  36. // description:
  37. // Handles normalized setting of properties on DOM nodes.
  38. //
  39. // When passing functions as values, note that they will not be
  40. // directly assigned to slots on the node, but rather the default
  41. // behavior will be removed and the new behavior will be added
  42. // using `dojo.connect()`, meaning that event handler properties
  43. // will be normalized and that some caveats with regards to
  44. // non-standard behaviors for onsubmit apply. Namely that you
  45. // should cancel form submission using `dojo.stopEvent()` on the
  46. // passed event object instead of returning a boolean value from
  47. // the handler itself.
  48. // node: DOMNode|String
  49. // id or reference to the element to set the property on
  50. // name: String|Object
  51. // the name of the property to set, or a hash object to set
  52. // multiple properties at once.
  53. // value: String?
  54. // The value to set for the property
  55. // returns:
  56. // the DOM node
  57. //
  58. // example:
  59. // | // use prop() to set the tab index
  60. // | dojo.setProp("nodeId", "tabIndex", 3);
  61. // |
  62. //
  63. // example:
  64. // Set multiple values at once, including event handlers:
  65. // | dojo.setProp("formId", {
  66. // | "foo": "bar",
  67. // | "tabIndex": -1,
  68. // | "method": "POST",
  69. // | "onsubmit": function(e){
  70. // | // stop submitting the form. Note that the IE behavior
  71. // | // of returning true or false will have no effect here
  72. // | // since our handler is connect()ed to the built-in
  73. // | // onsubmit behavior and so we need to use
  74. // | // dojo.stopEvent() to ensure that the submission
  75. // | // doesn't proceed.
  76. // | dojo.stopEvent(e);
  77. // |
  78. // | // submit the form with Ajax
  79. // | dojo.xhrPost({ form: "formId" });
  80. // | }
  81. // | });
  82. //
  83. // example:
  84. // Style is s special case: Only set with an object hash of styles
  85. // | dojo.setProp("someNode",{
  86. // | id:"bar",
  87. // | style:{
  88. // | width:"200px", height:"100px", color:"#000"
  89. // | }
  90. // | });
  91. //
  92. // example:
  93. // Again, only set style as an object hash of styles:
  94. // | var obj = { color:"#fff", backgroundColor:"#000" };
  95. // | dojo.setProp("someNode", "style", obj);
  96. // |
  97. // | // though shorter to use `dojo.style()` in this case:
  98. // | dojo.style("someNode", obj);
  99. };
  100. =====*/
  101. // helper to connect events
  102. var _evtHdlrMap = {}, _ctr = 0, _attrId = dojo._scopeName + "attrid";
  103. // the next dictionary lists elements with read-only innerHTML on IE
  104. var _roInnerHtml = {col: 1, colgroup: 1,
  105. // frameset: 1, head: 1, html: 1, style: 1,
  106. table: 1, tbody: 1, tfoot: 1, thead: 1, tr: 1, title: 1};
  107. exports.names = {
  108. // properties renamed to avoid clashes with reserved words
  109. "class": "className",
  110. "for": "htmlFor",
  111. // properties written as camelCase
  112. tabindex: "tabIndex",
  113. readonly: "readOnly",
  114. colspan: "colSpan",
  115. frameborder: "frameBorder",
  116. rowspan: "rowSpan",
  117. valuetype: "valueType"
  118. };
  119. exports.get = function getProp(/*DOMNode|String*/node, /*String*/name){
  120. node = dom.byId(node);
  121. var lc = name.toLowerCase(), propName = exports.names[lc] || name;
  122. return node[propName]; // Anything
  123. };
  124. exports.set = function setProp(/*DOMNode|String*/node, /*String|Object*/name, /*String?*/value){
  125. node = dom.byId(node);
  126. var l = arguments.length;
  127. if(l == 2 && typeof name != "string"){ // inline'd type check
  128. // the object form of setter: the 2nd argument is a dictionary
  129. for(var x in name){
  130. exports.set(node, x, name[x]);
  131. }
  132. return node; // DomNode
  133. }
  134. var lc = name.toLowerCase(), propName = exports.names[lc] || name;
  135. if(propName == "style" && typeof value != "string"){ // inline'd type check
  136. // special case: setting a style
  137. style.style(node, value);
  138. return node; // DomNode
  139. }
  140. if(propName == "innerHTML"){
  141. // special case: assigning HTML
  142. if(has("ie") && node.tagName.toLowerCase() in _roInnerHtml){
  143. ctr.empty(node);
  144. node.appendChild(ctr.toDom(value, node.ownerDocument));
  145. }else{
  146. node[propName] = value;
  147. }
  148. return node; // DomNode
  149. }
  150. if(lang.isFunction(value)){
  151. // special case: assigning an event handler
  152. // clobber if we can
  153. var attrId = node[_attrId];
  154. if(!attrId){
  155. attrId = _ctr++;
  156. node[_attrId] = attrId;
  157. }
  158. if(!_evtHdlrMap[attrId]){
  159. _evtHdlrMap[attrId] = {};
  160. }
  161. var h = _evtHdlrMap[attrId][propName];
  162. if(h){
  163. //h.remove();
  164. conn.disconnect(h);
  165. }else{
  166. try{
  167. delete node[propName];
  168. }catch(e){}
  169. }
  170. // ensure that event objects are normalized, etc.
  171. if(value){
  172. //_evtHdlrMap[attrId][propName] = on(node, propName, value);
  173. _evtHdlrMap[attrId][propName] = conn.connect(node, propName, value);
  174. }else{
  175. node[propName] = null;
  176. }
  177. return node; // DomNode
  178. }
  179. node[propName] = value;
  180. return node; // DomNode
  181. };
  182. });