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