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