html.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. define(["./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct", "../dom-geometry"], function(dojo, dom, style, attr, prop, cls, ctr, geom){
  2. // module:
  3. // dojo/dom
  4. /*=====
  5. return {
  6. // summary:
  7. // This module is a stub for the core dojo DOM API.
  8. };
  9. =====*/
  10. // mix-in dom
  11. dojo.byId = dom.byId;
  12. dojo.isDescendant = dom.isDescendant;
  13. dojo.setSelectable = dom.setSelectable;
  14. // mix-in dom-attr
  15. dojo.getAttr = attr.get;
  16. dojo.setAttr = attr.set;
  17. dojo.hasAttr = attr.has;
  18. dojo.removeAttr = attr.remove;
  19. dojo.getNodeProp = attr.getNodeProp;
  20. dojo.attr = function(node, name, value){
  21. // summary:
  22. // Gets or sets an attribute on an HTML element.
  23. // description:
  24. // Handles normalized getting and setting of attributes on DOM
  25. // Nodes. If 2 arguments are passed, and a the second argument is a
  26. // string, acts as a getter.
  27. //
  28. // If a third argument is passed, or if the second argument is a
  29. // map of attributes, acts as a setter.
  30. //
  31. // When passing functions as values, note that they will not be
  32. // directly assigned to slots on the node, but rather the default
  33. // behavior will be removed and the new behavior will be added
  34. // using `dojo.connect()`, meaning that event handler properties
  35. // will be normalized and that some caveats with regards to
  36. // non-standard behaviors for onsubmit apply. Namely that you
  37. // should cancel form submission using `dojo.stopEvent()` on the
  38. // passed event object instead of returning a boolean value from
  39. // the handler itself.
  40. // node: DOMNode|String
  41. // id or reference to the element to get or set the attribute on
  42. // name: String|Object
  43. // the name of the attribute to get or set.
  44. // value: String?
  45. // The value to set for the attribute
  46. // returns:
  47. // when used as a getter, the value of the requested attribute
  48. // or null if that attribute does not have a specified or
  49. // default value;
  50. //
  51. // when used as a setter, the DOM node
  52. //
  53. // example:
  54. // | // get the current value of the "foo" attribute on a node
  55. // | dojo.attr(dojo.byId("nodeId"), "foo");
  56. // | // or we can just pass the id:
  57. // | dojo.attr("nodeId", "foo");
  58. //
  59. // example:
  60. // | // use attr() to set the tab index
  61. // | dojo.attr("nodeId", "tabIndex", 3);
  62. // |
  63. //
  64. // example:
  65. // Set multiple values at once, including event handlers:
  66. // | dojo.attr("formId", {
  67. // | "foo": "bar",
  68. // | "tabIndex": -1,
  69. // | "method": "POST",
  70. // | "onsubmit": function(e){
  71. // | // stop submitting the form. Note that the IE behavior
  72. // | // of returning true or false will have no effect here
  73. // | // since our handler is connect()ed to the built-in
  74. // | // onsubmit behavior and so we need to use
  75. // | // dojo.stopEvent() to ensure that the submission
  76. // | // doesn't proceed.
  77. // | dojo.stopEvent(e);
  78. // |
  79. // | // submit the form with Ajax
  80. // | dojo.xhrPost({ form: "formId" });
  81. // | }
  82. // | });
  83. //
  84. // example:
  85. // Style is s special case: Only set with an object hash of styles
  86. // | dojo.attr("someNode",{
  87. // | id:"bar",
  88. // | style:{
  89. // | width:"200px", height:"100px", color:"#000"
  90. // | }
  91. // | });
  92. //
  93. // example:
  94. // Again, only set style as an object hash of styles:
  95. // | var obj = { color:"#fff", backgroundColor:"#000" };
  96. // | dojo.attr("someNode", "style", obj);
  97. // |
  98. // | // though shorter to use `dojo.style()` in this case:
  99. // | dojo.style("someNode", obj);
  100. if(arguments.length == 2){
  101. return attr[typeof name == "string" ? "get" : "set"](node, name);
  102. }
  103. return attr.set(node, name, value);
  104. };
  105. // mix-in dom-class
  106. dojo.hasClass = cls.contains;
  107. dojo.addClass = cls.add;
  108. dojo.removeClass = cls.remove;
  109. dojo.toggleClass = cls.toggle;
  110. dojo.replaceClass = cls.replace;
  111. // mix-in dom-construct
  112. dojo._toDom = dojo.toDom = ctr.toDom;
  113. dojo.place = ctr.place;
  114. dojo.create = ctr.create;
  115. dojo.empty = function(node){ ctr.empty(node); };
  116. dojo._destroyElement = dojo.destroy = function(node){ ctr.destroy(node); };
  117. // mix-in dom-geometry
  118. dojo._getPadExtents = dojo.getPadExtents = geom.getPadExtents;
  119. dojo._getBorderExtents = dojo.getBorderExtents = geom.getBorderExtents;
  120. dojo._getPadBorderExtents = dojo.getPadBorderExtents = geom.getPadBorderExtents;
  121. dojo._getMarginExtents = dojo.getMarginExtents = geom.getMarginExtents;
  122. dojo._getMarginSize = dojo.getMarginSize = geom.getMarginSize;
  123. dojo._getMarginBox = dojo.getMarginBox = geom.getMarginBox;
  124. dojo.setMarginBox = geom.setMarginBox;
  125. dojo._getContentBox = dojo.getContentBox = geom.getContentBox;
  126. dojo.setContentSize = geom.setContentSize;
  127. dojo._isBodyLtr = dojo.isBodyLtr = geom.isBodyLtr;
  128. dojo._docScroll = dojo.docScroll = geom.docScroll;
  129. dojo._getIeDocumentElementOffset = dojo.getIeDocumentElementOffset = geom.getIeDocumentElementOffset;
  130. dojo._fixIeBiDiScrollLeft = dojo.fixIeBiDiScrollLeft = geom.fixIeBiDiScrollLeft;
  131. dojo.position = geom.position;
  132. dojo.marginBox = function marginBox(/*DomNode|String*/node, /*Object?*/box){
  133. // summary:
  134. // Getter/setter for the margin-box of node.
  135. // description:
  136. // Getter/setter for the margin-box of node.
  137. // Returns an object in the expected format of box (regardless
  138. // if box is passed). The object might look like:
  139. // `{ l: 50, t: 200, w: 300: h: 150 }`
  140. // for a node offset from its parent 50px to the left, 200px from
  141. // the top with a margin width of 300px and a margin-height of
  142. // 150px.
  143. // node:
  144. // id or reference to DOM Node to get/set box for
  145. // box:
  146. // If passed, denotes that dojo.marginBox() should
  147. // update/set the margin box for node. Box is an object in the
  148. // above format. All properties are optional if passed.
  149. // example:
  150. // Retrieve the margin box of a passed node
  151. // | var box = dojo.marginBox("someNodeId");
  152. // | console.dir(box);
  153. //
  154. // example:
  155. // Set a node's margin box to the size of another node
  156. // | var box = dojo.marginBox("someNodeId");
  157. // | dojo.marginBox("someOtherNode", box);
  158. return box ? geom.setMarginBox(node, box) : geom.getMarginBox(node); // Object
  159. };
  160. dojo.contentBox = function contentBox(/*DomNode|String*/node, /*Object?*/box){
  161. // summary:
  162. // Getter/setter for the content-box of node.
  163. // description:
  164. // Returns an object in the expected format of box (regardless if box is passed).
  165. // The object might look like:
  166. // `{ l: 50, t: 200, w: 300: h: 150 }`
  167. // for a node offset from its parent 50px to the left, 200px from
  168. // the top with a content width of 300px and a content-height of
  169. // 150px. Note that the content box may have a much larger border
  170. // or margin box, depending on the box model currently in use and
  171. // CSS values set/inherited for node.
  172. // While the getter will return top and left values, the
  173. // setter only accepts setting the width and height.
  174. // node:
  175. // id or reference to DOM Node to get/set box for
  176. // box:
  177. // If passed, denotes that dojo.contentBox() should
  178. // update/set the content box for node. Box is an object in the
  179. // above format, but only w (width) and h (height) are supported.
  180. // All properties are optional if passed.
  181. return box ? geom.setContentSize(node, box) : geom.getContentBox(node); // Object
  182. };
  183. dojo.coords = function(/*DomNode|String*/node, /*Boolean?*/includeScroll){
  184. // summary:
  185. // Deprecated: Use position() for border-box x/y/w/h
  186. // or marginBox() for margin-box w/h/l/t.
  187. //
  188. // Returns an object that measures margin-box (w)idth/(h)eight
  189. // and absolute position x/y of the border-box. Also returned
  190. // is computed (l)eft and (t)op values in pixels from the
  191. // node's offsetParent as returned from marginBox().
  192. // Return value will be in the form:
  193. //| { l: 50, t: 200, w: 300: h: 150, x: 100, y: 300 }
  194. // Does not act as a setter. If includeScroll is passed, the x and
  195. // y params are affected as one would expect in dojo.position().
  196. dojo.deprecated("dojo.coords()", "Use dojo.position() or dojo.marginBox().");
  197. node = dom.byId(node);
  198. var s = style.getComputedStyle(node), mb = geom.getMarginBox(node, s);
  199. var abs = geom.position(node, includeScroll);
  200. mb.x = abs.x;
  201. mb.y = abs.y;
  202. return mb; // Object
  203. };
  204. // mix-in dom-prop
  205. dojo.getProp = prop.get;
  206. dojo.setProp = prop.set;
  207. dojo.prop = function(/*DomNode|String*/node, /*String|Object*/name, /*String?*/value){
  208. // summary:
  209. // Gets or sets a property on an HTML element.
  210. // description:
  211. // Handles normalized getting and setting of properties on DOM
  212. // Nodes. If 2 arguments are passed, and a the second argument is a
  213. // string, acts as a getter.
  214. //
  215. // If a third argument is passed, or if the second argument is a
  216. // map of attributes, acts as a setter.
  217. //
  218. // When passing functions as values, note that they will not be
  219. // directly assigned to slots on the node, but rather the default
  220. // behavior will be removed and the new behavior will be added
  221. // using `dojo.connect()`, meaning that event handler properties
  222. // will be normalized and that some caveats with regards to
  223. // non-standard behaviors for onsubmit apply. Namely that you
  224. // should cancel form submission using `dojo.stopEvent()` on the
  225. // passed event object instead of returning a boolean value from
  226. // the handler itself.
  227. // node:
  228. // id or reference to the element to get or set the property on
  229. // name:
  230. // the name of the property to get or set.
  231. // value:
  232. // The value to set for the property
  233. // returns:
  234. // when used as a getter, the value of the requested property
  235. // or null if that attribute does not have a specified or
  236. // default value;
  237. //
  238. // when used as a setter, the DOM node
  239. //
  240. // example:
  241. // | // get the current value of the "foo" property on a node
  242. // | dojo.prop(dojo.byId("nodeId"), "foo");
  243. // | // or we can just pass the id:
  244. // | dojo.prop("nodeId", "foo");
  245. //
  246. // example:
  247. // | // use prop() to set the tab index
  248. // | dojo.prop("nodeId", "tabIndex", 3);
  249. // |
  250. //
  251. // example:
  252. // Set multiple values at once, including event handlers:
  253. // | dojo.prop("formId", {
  254. // | "foo": "bar",
  255. // | "tabIndex": -1,
  256. // | "method": "POST",
  257. // | "onsubmit": function(e){
  258. // | // stop submitting the form. Note that the IE behavior
  259. // | // of returning true or false will have no effect here
  260. // | // since our handler is connect()ed to the built-in
  261. // | // onsubmit behavior and so we need to use
  262. // | // dojo.stopEvent() to ensure that the submission
  263. // | // doesn't proceed.
  264. // | dojo.stopEvent(e);
  265. // |
  266. // | // submit the form with Ajax
  267. // | dojo.xhrPost({ form: "formId" });
  268. // | }
  269. // | });
  270. //
  271. // example:
  272. // Style is s special case: Only set with an object hash of styles
  273. // | dojo.prop("someNode",{
  274. // | id:"bar",
  275. // | style:{
  276. // | width:"200px", height:"100px", color:"#000"
  277. // | }
  278. // | });
  279. //
  280. // example:
  281. // Again, only set style as an object hash of styles:
  282. // | var obj = { color:"#fff", backgroundColor:"#000" };
  283. // | dojo.prop("someNode", "style", obj);
  284. // |
  285. // | // though shorter to use `dojo.style()` in this case:
  286. // | dojo.style("someNode", obj);
  287. if(arguments.length == 2){
  288. return prop[typeof name == "string" ? "get" : "set"](node, name);
  289. }
  290. // setter
  291. return prop.set(node, name, value);
  292. };
  293. // mix-in dom-style
  294. dojo.getStyle = style.get;
  295. dojo.setStyle = style.set;
  296. dojo.getComputedStyle = style.getComputedStyle;
  297. dojo.__toPixelValue = dojo.toPixelValue = style.toPixelValue;
  298. dojo.style = function(node, name, value){
  299. // summary:
  300. // Accesses styles on a node. If 2 arguments are
  301. // passed, acts as a getter. If 3 arguments are passed, acts
  302. // as a setter.
  303. // description:
  304. // Getting the style value uses the computed style for the node, so the value
  305. // will be a calculated value, not just the immediate node.style value.
  306. // Also when getting values, use specific style names,
  307. // like "borderBottomWidth" instead of "border" since compound values like
  308. // "border" are not necessarily reflected as expected.
  309. // If you want to get node dimensions, use `dojo.marginBox()`,
  310. // `dojo.contentBox()` or `dojo.position()`.
  311. // node: DOMNode|String
  312. // id or reference to node to get/set style for
  313. // name: String|Object?
  314. // the style property to set in DOM-accessor format
  315. // ("borderWidth", not "border-width") or an object with key/value
  316. // pairs suitable for setting each property.
  317. // value: String?
  318. // If passed, sets value on the node for style, handling
  319. // cross-browser concerns. When setting a pixel value,
  320. // be sure to include "px" in the value. For instance, top: "200px".
  321. // Otherwise, in some cases, some browsers will not apply the style.
  322. // returns:
  323. // when used as a getter, return the computed style of the node if passing in an ID or node,
  324. // or return the normalized, computed value for the property when passing in a node and a style property
  325. // example:
  326. // Passing only an ID or node returns the computed style object of
  327. // the node:
  328. // | dojo.style("thinger");
  329. // example:
  330. // Passing a node and a style property returns the current
  331. // normalized, computed value for that property:
  332. // | dojo.style("thinger", "opacity"); // 1 by default
  333. //
  334. // example:
  335. // Passing a node, a style property, and a value changes the
  336. // current display of the node and returns the new computed value
  337. // | dojo.style("thinger", "opacity", 0.5); // == 0.5
  338. //
  339. // example:
  340. // Passing a node, an object-style style property sets each of the values in turn and returns the computed style object of the node:
  341. // | dojo.style("thinger", {
  342. // | "opacity": 0.5,
  343. // | "border": "3px solid black",
  344. // | "height": "300px"
  345. // | });
  346. //
  347. // example:
  348. // When the CSS style property is hyphenated, the JavaScript property is camelCased.
  349. // font-size becomes fontSize, and so on.
  350. // | dojo.style("thinger",{
  351. // | fontSize:"14pt",
  352. // | letterSpacing:"1.2em"
  353. // | });
  354. //
  355. // example:
  356. // dojo/NodeList implements .style() using the same syntax, omitting the "node" parameter, calling
  357. // dojo.style() on every element of the list. See: `dojo/query` and `dojo/NodeList`
  358. // | dojo.query(".someClassName").style("visibility","hidden");
  359. // | // or
  360. // | dojo.query("#baz > div").style({
  361. // | opacity:0.75,
  362. // | fontSize:"13pt"
  363. // | });
  364. switch(arguments.length){
  365. case 1:
  366. return style.get(node);
  367. case 2:
  368. return style[typeof name == "string" ? "get" : "set"](node, name);
  369. }
  370. // setter
  371. return style.set(node, name, value);
  372. };
  373. return dojo;
  374. });