]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
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){ |
2 | // module: | |
3 | // dojo/dom | |
4 | ||
5 | /*===== | |
6 | return { | |
7 | // summary: | |
8 | // This module is a stub for the core dojo DOM API. | |
9 | }; | |
10 | =====*/ | |
11 | ||
12 | // mix-in dom | |
13 | dojo.byId = dom.byId; | |
14 | dojo.isDescendant = dom.isDescendant; | |
15 | dojo.setSelectable = dom.setSelectable; | |
16 | ||
17 | // mix-in dom-attr | |
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; | |
23 | ||
24 | dojo.attr = function(node, name, value){ | |
25 | // summary: | |
26 | // Gets or sets an attribute on an HTML element. | |
27 | // description: | |
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. | |
31 | // | |
32 | // If a third argument is passed, or if the second argument is a | |
33 | // map of attributes, acts as a setter. | |
34 | // | |
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. | |
48 | // value: String? | |
49 | // The value to set for the attribute | |
50 | // returns: | |
51 | // when used as a getter, the value of the requested attribute | |
52 | // or null if that attribute does not have a specified or | |
53 | // default value; | |
54 | // | |
55 | // when used as a setter, the DOM node | |
56 | // | |
57 | // example: | |
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"); | |
62 | // | |
63 | // example: | |
64 | // | // use attr() to set the tab index | |
65 | // | dojo.attr("nodeId", "tabIndex", 3); | |
66 | // | | |
67 | // | |
68 | // example: | |
69 | // Set multiple values at once, including event handlers: | |
70 | // | dojo.attr("formId", { | |
71 | // | "foo": "bar", | |
72 | // | "tabIndex": -1, | |
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); | |
82 | // | | |
83 | // | // submit the form with Ajax | |
84 | // | dojo.xhrPost({ form: "formId" }); | |
85 | // | } | |
86 | // | }); | |
87 | // | |
88 | // example: | |
89 | // Style is s special case: Only set with an object hash of styles | |
90 | // | dojo.attr("someNode",{ | |
91 | // | id:"bar", | |
92 | // | style:{ | |
93 | // | width:"200px", height:"100px", color:"#000" | |
94 | // | } | |
95 | // | }); | |
96 | // | |
97 | // example: | |
98 | // Again, only set style as an object hash of styles: | |
99 | // | var obj = { color:"#fff", backgroundColor:"#000" }; | |
100 | // | dojo.attr("someNode", "style", obj); | |
101 | // | | |
102 | // | // though shorter to use `dojo.style()` in this case: | |
103 | // | dojo.style("someNode", obj); | |
104 | ||
105 | if(arguments.length == 2){ | |
106 | return attr[typeof name == "string" ? "get" : "set"](node, name); | |
107 | } | |
108 | return attr.set(node, name, value); | |
109 | }; | |
110 | ||
111 | // mix-in dom-class | |
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; | |
117 | ||
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); }; | |
124 | ||
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; | |
140 | ||
141 | dojo.marginBox = function marginBox(/*DomNode|String*/node, /*Object?*/box){ | |
142 | // summary: | |
143 | // Getter/setter for the margin-box of node. | |
144 | // description: | |
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 | |
151 | // 150px. | |
152 | // node: | |
153 | // id or reference to DOM Node to get/set box for | |
154 | // box: | |
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. | |
158 | // example: | |
159 | // Retrieve the margin box of a passed node | |
160 | // | var box = dojo.marginBox("someNodeId"); | |
161 | // | console.dir(box); | |
162 | // | |
163 | // example: | |
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 | |
168 | }; | |
169 | ||
170 | dojo.contentBox = function contentBox(/*DomNode|String*/node, /*Object?*/box){ | |
171 | // summary: | |
172 | // Getter/setter for the content-box of node. | |
173 | // description: | |
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. | |
184 | // node: | |
185 | // id or reference to DOM Node to get/set box for | |
186 | // box: | |
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 | |
192 | }; | |
193 | ||
194 | dojo.coords = function(/*DomNode|String*/node, /*Boolean?*/includeScroll){ | |
195 | // summary: | |
196 | // Deprecated: Use position() for border-box x/y/w/h | |
197 | // or marginBox() for margin-box w/h/l/t. | |
198 | // | |
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); | |
211 | mb.x = abs.x; | |
212 | mb.y = abs.y; | |
213 | return mb; // Object | |
214 | }; | |
215 | ||
216 | // mix-in dom-prop | |
217 | dojo.getProp = prop.get; | |
218 | dojo.setProp = prop.set; | |
219 | ||
220 | dojo.prop = function(/*DomNode|String*/node, /*String|Object*/name, /*String?*/value){ | |
221 | // summary: | |
222 | // Gets or sets a property on an HTML element. | |
223 | // description: | |
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. | |
227 | // | |
228 | // If a third argument is passed, or if the second argument is a | |
229 | // map of attributes, acts as a setter. | |
230 | // | |
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. | |
240 | // node: | |
241 | // id or reference to the element to get or set the property on | |
242 | // name: | |
243 | // the name of the property to get or set. | |
244 | // value: | |
245 | // The value to set for the property | |
246 | // returns: | |
247 | // when used as a getter, the value of the requested property | |
248 | // or null if that attribute does not have a specified or | |
249 | // default value; | |
250 | // | |
251 | // when used as a setter, the DOM node | |
252 | // | |
253 | // example: | |
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"); | |
258 | // | |
259 | // example: | |
260 | // | // use prop() to set the tab index | |
261 | // | dojo.prop("nodeId", "tabIndex", 3); | |
262 | // | | |
263 | // | |
264 | // example: | |
265 | // Set multiple values at once, including event handlers: | |
266 | // | dojo.prop("formId", { | |
267 | // | "foo": "bar", | |
268 | // | "tabIndex": -1, | |
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); | |
278 | // | | |
279 | // | // submit the form with Ajax | |
280 | // | dojo.xhrPost({ form: "formId" }); | |
281 | // | } | |
282 | // | }); | |
283 | // | |
284 | // example: | |
285 | // Style is s special case: Only set with an object hash of styles | |
286 | // | dojo.prop("someNode",{ | |
287 | // | id:"bar", | |
288 | // | style:{ | |
289 | // | width:"200px", height:"100px", color:"#000" | |
290 | // | } | |
291 | // | }); | |
292 | // | |
293 | // example: | |
294 | // Again, only set style as an object hash of styles: | |
295 | // | var obj = { color:"#fff", backgroundColor:"#000" }; | |
296 | // | dojo.prop("someNode", "style", obj); | |
297 | // | | |
298 | // | // though shorter to use `dojo.style()` in this case: | |
299 | // | dojo.style("someNode", obj); | |
300 | ||
301 | if(arguments.length == 2){ | |
302 | return prop[typeof name == "string" ? "get" : "set"](node, name); | |
303 | } | |
304 | // setter | |
305 | return prop.set(node, name, value); | |
306 | }; | |
307 | ||
308 | // mix-in dom-style | |
309 | dojo.getStyle = style.get; | |
310 | dojo.setStyle = style.set; | |
311 | dojo.getComputedStyle = style.getComputedStyle; | |
312 | dojo.__toPixelValue = dojo.toPixelValue = style.toPixelValue; | |
313 | ||
314 | dojo.style = function(node, name, value){ | |
315 | // summary: | |
316 | // Accesses styles on a node. If 2 arguments are | |
317 | // passed, acts as a getter. If 3 arguments are passed, acts | |
318 | // as a setter. | |
319 | // description: | |
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. | |
333 | // value: String? | |
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. | |
338 | // returns: | |
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 | |
341 | // example: | |
342 | // Passing only an ID or node returns the computed style object of | |
343 | // the node: | |
344 | // | dojo.style("thinger"); | |
345 | // example: | |
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 | |
349 | // | |
350 | // example: | |
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 | |
354 | // | |
355 | // example: | |
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", { | |
358 | // | "opacity": 0.5, | |
359 | // | "border": "3px solid black", | |
360 | // | "height": "300px" | |
361 | // | }); | |
362 | // | |
363 | // example: | |
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" | |
369 | // | }); | |
370 | // | |
371 | // example: | |
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"); | |
375 | // | // or | |
376 | // | dojo.query("#baz > div").style({ | |
377 | // | opacity:0.75, | |
378 | // | fontSize:"13pt" | |
379 | // | }); | |
380 | ||
381 | switch(arguments.length){ | |
382 | case 1: | |
383 | return style.get(node); | |
384 | case 2: | |
385 | return style[typeof name == "string" ? "get" : "set"](node, name); | |
386 | } | |
387 | // setter | |
388 | return style.set(node, name, value); | |
389 | }; | |
390 | ||
391 | return dojo; | |
392 | }); |