]>
Commit | Line | Data |
---|---|---|
2f01fe57 | 1 | /* |
81bea17a | 2 | Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. |
2f01fe57 AD |
3 | Available via Academic Free License >= 2.1 OR the modified BSD license. |
4 | see: http://dojotoolkit.org/license for details | |
5 | */ | |
6 | ||
7 | ||
a089699c AD |
8 | if(!dojo._hasResource["dojo.NodeList-manipulate"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
9 | dojo._hasResource["dojo.NodeList-manipulate"] = true; | |
2f01fe57 | 10 | dojo.provide("dojo.NodeList-manipulate"); |
a089699c | 11 | |
81bea17a | 12 | |
a089699c AD |
13 | /*===== |
14 | dojo["NodeList-manipulate"] = { | |
15 | // summary: Adds a chainable methods to dojo.query() / Nodelist instances for manipulating HTML | |
16 | // and DOM nodes and their properties. | |
2f01fe57 | 17 | }; |
a089699c AD |
18 | =====*/ |
19 | ||
20 | //TODO: add a way to parse for widgets in the injected markup? | |
21 | ||
22 | (function(){ | |
23 | function getText(/*DOMNode*/node){ | |
24 | // summary: | |
25 | // recursion method for text() to use. Gets text value for a node. | |
26 | // description: | |
27 | // Juse uses nodedValue so things like <br/> tags do not end up in | |
28 | // the text as any sort of line return. | |
29 | var text = "", ch = node.childNodes; | |
30 | for(var i = 0, n; n = ch[i]; i++){ | |
31 | //Skip comments. | |
32 | if(n.nodeType != 8){ | |
33 | if(n.nodeType == 1){ | |
34 | text += getText(n); | |
35 | }else{ | |
36 | text += n.nodeValue; | |
37 | } | |
38 | } | |
39 | } | |
40 | return text; | |
41 | } | |
42 | ||
43 | function getWrapInsertion(/*DOMNode*/node){ | |
44 | // summary: | |
45 | // finds the innermost element to use for wrap insertion. | |
46 | ||
47 | //Make it easy, assume single nesting, no siblings. | |
48 | while(node.childNodes[0] && node.childNodes[0].nodeType == 1){ | |
49 | node = node.childNodes[0]; | |
50 | } | |
51 | return node; //DOMNode | |
52 | } | |
53 | ||
54 | function makeWrapNode(/*DOMNode||String*/html, /*DOMNode*/refNode){ | |
81bea17a | 55 | // summary: |
a089699c AD |
56 | // convert HTML into nodes if it is not already a node. |
57 | if(typeof html == "string"){ | |
58 | html = dojo._toDom(html, (refNode && refNode.ownerDocument)); | |
59 | if(html.nodeType == 11){ | |
60 | //DocumentFragment cannot handle cloneNode, so choose first child. | |
61 | html = html.childNodes[0]; | |
62 | } | |
63 | }else if(html.nodeType == 1 && html.parentNode){ | |
64 | //This element is already in the DOM clone it, but not its children. | |
65 | html = html.cloneNode(false); | |
66 | } | |
67 | return html; /*DOMNode*/ | |
68 | } | |
69 | ||
70 | dojo.extend(dojo.NodeList, { | |
71 | _placeMultiple: function(/*String||Node||NodeList*/query, /*String*/position){ | |
72 | // summary: | |
73 | // private method for inserting queried nodes into all nodes in this NodeList | |
74 | // at different positions. Differs from NodeList.place because it will clone | |
75 | // the nodes in this NodeList if the query matches more than one element. | |
76 | var nl2 = typeof query == "string" || query.nodeType ? dojo.query(query) : query; | |
77 | var toAdd = []; | |
78 | for(var i = 0; i < nl2.length; i++){ | |
79 | //Go backwards in DOM to make dom insertions easier via insertBefore | |
80 | var refNode = nl2[i]; | |
81 | var length = this.length; | |
82 | for(var j = length - 1, item; item = this[j]; j--){ | |
83 | if(i > 0){ | |
84 | //Need to clone the item. This also means | |
85 | //it needs to be added to the current NodeList | |
86 | //so it can also be the target of other chaining operations. | |
87 | item = this._cloneNode(item); | |
88 | toAdd.unshift(item); | |
89 | } | |
90 | if(j == length - 1){ | |
91 | dojo.place(item, refNode, position); | |
92 | }else{ | |
93 | refNode.parentNode.insertBefore(item, refNode); | |
94 | } | |
95 | refNode = item; | |
96 | } | |
97 | } | |
98 | ||
99 | if(toAdd.length){ | |
100 | //Add the toAdd items to the current NodeList. Build up list of args | |
101 | //to pass to splice. | |
102 | toAdd.unshift(0); | |
103 | toAdd.unshift(this.length - 1); | |
104 | Array.prototype.splice.apply(this, toAdd); | |
105 | } | |
106 | ||
107 | return this; //dojo.NodeList | |
108 | }, | |
109 | ||
110 | innerHTML: function(/*String?||DOMNode?|NodeList?*/value){ | |
111 | // summary: | |
112 | // allows setting the innerHTML of each node in the NodeList, | |
113 | // if there is a value passed in, otherwise, reads the innerHTML value of the first node. | |
114 | // description: | |
115 | // This method is simpler than the dojo.NodeList.html() method provided by | |
116 | // `dojo.NodeList-html`. This method just does proper innerHTML insertion of HTML fragments, | |
117 | // and it allows for the innerHTML to be read for the first node in the node list. | |
118 | // Since dojo.NodeList-html already took the "html" name, this method is called | |
119 | // "innerHTML". However, if dojo.NodeList-html has not been loaded yet, this | |
120 | // module will define an "html" method that can be used instead. Be careful if you | |
121 | // are working in an environment where it is possible that dojo.NodeList-html could | |
122 | // have been loaded, since its definition of "html" will take precedence. | |
123 | // The nodes represented by the value argument will be cloned if more than one | |
124 | // node is in this NodeList. The nodes in this NodeList are returned in the "set" | |
125 | // usage of this method, not the HTML that was inserted. | |
126 | // returns: | |
127 | // if no value is passed, the result is String, the innerHTML of the first node. | |
128 | // If a value is passed, the return is this dojo.NodeList | |
129 | // example: | |
130 | // assume a DOM created by this markup: | |
131 | // | <div id="foo"></div> | |
132 | // | <div id="bar"></div> | |
133 | // This code inserts <p>Hello World</p> into both divs: | |
134 | // | dojo.query("div").innerHTML("<p>Hello World</p>"); | |
135 | // example: | |
136 | // assume a DOM created by this markup: | |
137 | // | <div id="foo"><p>Hello Mars</p></div> | |
138 | // | <div id="bar"><p>Hello World</p></div> | |
139 | // This code returns "<p>Hello Mars</p>": | |
140 | // | var message = dojo.query("div").innerHTML(); | |
141 | if(arguments.length){ | |
142 | return this.addContent(value, "only"); //dojo.NodeList | |
143 | }else{ | |
144 | return this[0].innerHTML; //String | |
145 | } | |
146 | }, | |
147 | ||
148 | /*===== | |
149 | html: function(value){ | |
150 | // summary: | |
151 | // see the information for "innerHTML". "html" is an alias for "innerHTML", but is | |
152 | // only defined if dojo.NodeList-html has not been loaded. | |
153 | // description: | |
154 | // An alias for the "innerHTML" method, but only defined if there is not an existing | |
155 | // "html" method on dojo.NodeList. Be careful if you are working in an environment | |
156 | // where it is possible that dojo.NodeList-html could have been loaded, since its | |
157 | // definition of "html" will take precedence. If you are not sure if dojo.NodeList-html | |
158 | // could be loaded, use the "innerHTML" method. | |
159 | // value: String?||DOMNode?||NodeList? | |
160 | // optional. The HTML fragment to use as innerHTML. If value is not passed, then the innerHTML | |
161 | // of the first element in this NodeList is returned. | |
162 | // returns: | |
163 | // if no value is passed, the result is String, the innerHTML of the first node. | |
164 | // If a value is passed, the return is this dojo.NodeList | |
165 | return; // dojo.NodeList | |
166 | return; // String | |
167 | }, | |
168 | =====*/ | |
169 | ||
170 | text: function(/*String*/value){ | |
171 | // summary: | |
172 | // allows setting the text value of each node in the NodeList, | |
173 | // if there is a value passed in, otherwise, returns the text value for all the | |
174 | // nodes in the NodeList in one string. | |
175 | // example: | |
176 | // assume a DOM created by this markup: | |
177 | // | <div id="foo"></div> | |
178 | // | <div id="bar"></div> | |
179 | // This code inserts "Hello World" into both divs: | |
180 | // | dojo.query("div").text("Hello World"); | |
181 | // example: | |
182 | // assume a DOM created by this markup: | |
183 | // | <div id="foo"><p>Hello Mars <span>today</span></p></div> | |
184 | // | <div id="bar"><p>Hello World</p></div> | |
185 | // This code returns "Hello Mars today": | |
186 | // | var message = dojo.query("div").text(); | |
187 | // returns: | |
188 | // if no value is passed, the result is String, the text value of the first node. | |
189 | // If a value is passed, the return is this dojo.NodeList | |
190 | if(arguments.length){ | |
191 | for(var i = 0, node; node = this[i]; i++){ | |
192 | if(node.nodeType == 1){ | |
193 | dojo.empty(node); | |
194 | node.appendChild(node.ownerDocument.createTextNode(value)); | |
195 | } | |
196 | } | |
197 | return this; //dojo.NodeList | |
198 | }else{ | |
199 | var result = ""; | |
200 | for(i = 0; node = this[i]; i++){ | |
201 | result += getText(node); | |
202 | } | |
203 | return result; //String | |
204 | } | |
205 | }, | |
206 | ||
207 | val: function(/*String||Array*/value){ | |
208 | // summary: | |
209 | // If a value is passed, allows seting the value property of form elements in this | |
210 | // NodeList, or properly selecting/checking the right value for radio/checkbox/select | |
211 | // elements. If no value is passed, the value of the first node in this NodeList | |
212 | // is returned. | |
213 | // returns: | |
214 | // if no value is passed, the result is String or an Array, for the value of the | |
215 | // first node. | |
216 | // If a value is passed, the return is this dojo.NodeList | |
217 | // example: | |
218 | // assume a DOM created by this markup: | |
219 | // | <input type="text" value="foo"> | |
220 | // | <select multiple> | |
221 | // | <option value="red" selected>Red</option> | |
222 | // | <option value="blue">Blue</option> | |
223 | // | <option value="yellow" selected>Yellow</option> | |
224 | // | </select> | |
225 | // This code gets and sets the values for the form fields above: | |
226 | // | dojo.query('[type="text"]').val(); //gets value foo | |
227 | // | dojo.query('[type="text"]').val("bar"); //sets the input's value to "bar" | |
228 | // | dojo.query("select").val() //gets array value ["red", "yellow"] | |
229 | // | dojo.query("select").val(["blue", "yellow"]) //Sets the blue and yellow options to selected. | |
230 | ||
231 | //Special work for input elements. | |
232 | if(arguments.length){ | |
233 | var isArray = dojo.isArray(value); | |
234 | for(var index = 0, node; node = this[index]; index++){ | |
235 | var name = node.nodeName.toUpperCase(); | |
236 | var type = node.type; | |
237 | var newValue = isArray ? value[index] : value; | |
238 | ||
239 | if(name == "SELECT"){ | |
240 | var opts = node.options; | |
241 | for(var i = 0; i < opts.length; i++){ | |
242 | var opt = opts[i]; | |
243 | if(node.multiple){ | |
244 | opt.selected = (dojo.indexOf(value, opt.value) != -1); | |
245 | }else{ | |
246 | opt.selected = (opt.value == newValue); | |
247 | } | |
248 | } | |
249 | }else if(type == "checkbox" || type == "radio"){ | |
250 | node.checked = (node.value == newValue); | |
251 | }else{ | |
252 | node.value = newValue; | |
253 | } | |
254 | } | |
255 | return this; //dojo.NodeList | |
256 | }else{ | |
257 | //node already declared above. | |
258 | node = this[0]; | |
259 | if(!node || node.nodeType != 1){ | |
260 | return undefined; | |
261 | } | |
262 | value = node.value || ""; | |
263 | if(node.nodeName.toUpperCase() == "SELECT" && node.multiple){ | |
264 | //A multivalued selectbox. Do the pain. | |
265 | value = []; | |
266 | //opts declared above in if block. | |
267 | opts = node.options; | |
268 | //i declared above in if block; | |
269 | for(i = 0; i < opts.length; i++){ | |
270 | //opt declared above in if block | |
271 | opt = opts[i]; | |
272 | if(opt.selected){ | |
273 | value.push(opt.value); | |
274 | } | |
275 | } | |
276 | if(!value.length){ | |
277 | value = null; | |
278 | } | |
279 | } | |
280 | return value; //String||Array | |
281 | } | |
282 | }, | |
283 | ||
284 | append: function(/*String||DOMNode||NodeList*/content){ | |
285 | // summary: | |
286 | // appends the content to every node in the NodeList. | |
287 | // description: | |
288 | // The content will be cloned if the length of NodeList | |
289 | // is greater than 1. Only the DOM nodes are cloned, not | |
290 | // any attached event handlers. | |
291 | // returns: | |
292 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
293 | // not the appended content. | |
294 | // example: | |
295 | // assume a DOM created by this markup: | |
296 | // | <div id="foo"><p>Hello Mars</p></div> | |
297 | // | <div id="bar"><p>Hello World</p></div> | |
298 | // Running this code: | |
299 | // | dojo.query("div").append("<span>append</span>"); | |
300 | // Results in this DOM structure: | |
301 | // | <div id="foo"><p>Hello Mars</p><span>append</span></div> | |
302 | // | <div id="bar"><p>Hello World</p><span>append</span></div> | |
303 | return this.addContent(content, "last"); //dojo.NodeList | |
304 | }, | |
305 | ||
306 | appendTo: function(/*String*/query){ | |
307 | // summary: | |
308 | // appends nodes in this NodeList to the nodes matched by | |
309 | // the query passed to appendTo. | |
310 | // description: | |
311 | // The nodes in this NodeList will be cloned if the query | |
312 | // matches more than one element. Only the DOM nodes are cloned, not | |
313 | // any attached event handlers. | |
314 | // returns: | |
315 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
316 | // not the matched nodes from the query. | |
317 | // example: | |
318 | // assume a DOM created by this markup: | |
319 | // | <span>append</span> | |
320 | // | <p>Hello Mars</p> | |
321 | // | <p>Hello World</p> | |
322 | // Running this code: | |
323 | // | dojo.query("span").appendTo("p"); | |
324 | // Results in this DOM structure: | |
325 | // | <p>Hello Mars<span>append</span></p> | |
326 | // | <p>Hello World<span>append</span></p> | |
327 | return this._placeMultiple(query, "last"); //dojo.NodeList | |
328 | }, | |
329 | ||
330 | prepend: function(/*String||DOMNode||NodeList*/content){ | |
331 | // summary: | |
332 | // prepends the content to every node in the NodeList. | |
333 | // description: | |
334 | // The content will be cloned if the length of NodeList | |
335 | // is greater than 1. Only the DOM nodes are cloned, not | |
336 | // any attached event handlers. | |
337 | // returns: | |
338 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
339 | // not the appended content. | |
340 | // assume a DOM created by this markup: | |
341 | // | <div id="foo"><p>Hello Mars</p></div> | |
342 | // | <div id="bar"><p>Hello World</p></div> | |
343 | // Running this code: | |
344 | // | dojo.query("div").prepend("<span>prepend</span>"); | |
345 | // Results in this DOM structure: | |
346 | // | <div id="foo"><span>prepend</span><p>Hello Mars</p></div> | |
347 | // | <div id="bar"><span>prepend</span><p>Hello World</p></div> | |
348 | return this.addContent(content, "first"); //dojo.NodeList | |
349 | }, | |
350 | ||
351 | prependTo: function(/*String*/query){ | |
352 | // summary: | |
353 | // prepends nodes in this NodeList to the nodes matched by | |
354 | // the query passed to prependTo. | |
355 | // description: | |
356 | // The nodes in this NodeList will be cloned if the query | |
357 | // matches more than one element. Only the DOM nodes are cloned, not | |
358 | // any attached event handlers. | |
359 | // returns: | |
360 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
361 | // not the matched nodes from the query. | |
362 | // example: | |
363 | // assume a DOM created by this markup: | |
364 | // | <span>prepend</span> | |
365 | // | <p>Hello Mars</p> | |
366 | // | <p>Hello World</p> | |
367 | // Running this code: | |
368 | // | dojo.query("span").prependTo("p"); | |
369 | // Results in this DOM structure: | |
370 | // | <p><span>prepend</span>Hello Mars</p> | |
371 | // | <p><span>prepend</span>Hello World</p> | |
372 | return this._placeMultiple(query, "first"); //dojo.NodeList | |
373 | }, | |
374 | ||
375 | after: function(/*String||Element||NodeList*/content){ | |
376 | // summary: | |
377 | // Places the content after every node in the NodeList. | |
378 | // description: | |
379 | // The content will be cloned if the length of NodeList | |
380 | // is greater than 1. Only the DOM nodes are cloned, not | |
381 | // any attached event handlers. | |
382 | // returns: | |
383 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
384 | // not the appended content. | |
385 | // example: | |
386 | // assume a DOM created by this markup: | |
387 | // | <div id="foo"><p>Hello Mars</p></div> | |
388 | // | <div id="bar"><p>Hello World</p></div> | |
389 | // Running this code: | |
390 | // | dojo.query("div").after("<span>after</span>"); | |
391 | // Results in this DOM structure: | |
392 | // | <div id="foo"><p>Hello Mars</p></div><span>after</span> | |
393 | // | <div id="bar"><p>Hello World</p></div><span>after</span> | |
394 | return this.addContent(content, "after"); //dojo.NodeList | |
395 | }, | |
396 | ||
397 | insertAfter: function(/*String*/query){ | |
398 | // summary: | |
399 | // The nodes in this NodeList will be placed after the nodes | |
400 | // matched by the query passed to insertAfter. | |
401 | // description: | |
402 | // The nodes in this NodeList will be cloned if the query | |
403 | // matches more than one element. Only the DOM nodes are cloned, not | |
404 | // any attached event handlers. | |
405 | // returns: | |
406 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
407 | // not the matched nodes from the query. | |
408 | // example: | |
409 | // assume a DOM created by this markup: | |
410 | // | <span>after</span> | |
411 | // | <p>Hello Mars</p> | |
412 | // | <p>Hello World</p> | |
413 | // Running this code: | |
414 | // | dojo.query("span").insertAfter("p"); | |
415 | // Results in this DOM structure: | |
416 | // | <p>Hello Mars</p><span>after</span> | |
417 | // | <p>Hello World</p><span>after</span> | |
418 | return this._placeMultiple(query, "after"); //dojo.NodeList | |
419 | }, | |
420 | ||
421 | before: function(/*String||DOMNode||NodeList*/content){ | |
422 | // summary: | |
423 | // Places the content before every node in the NodeList. | |
424 | // description: | |
425 | // The content will be cloned if the length of NodeList | |
426 | // is greater than 1. Only the DOM nodes are cloned, not | |
427 | // any attached event handlers. | |
428 | // returns: | |
429 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
430 | // not the appended content. | |
431 | // example: | |
432 | // assume a DOM created by this markup: | |
433 | // | <div id="foo"><p>Hello Mars</p></div> | |
434 | // | <div id="bar"><p>Hello World</p></div> | |
435 | // Running this code: | |
436 | // | dojo.query("div").before("<span>before</span>"); | |
437 | // Results in this DOM structure: | |
438 | // | <span>before</span><div id="foo"><p>Hello Mars</p></div> | |
439 | // | <span>before</span><div id="bar"><p>Hello World</p></div> | |
440 | return this.addContent(content, "before"); //dojo.NodeList | |
441 | }, | |
442 | ||
443 | insertBefore: function(/*String*/query){ | |
444 | // summary: | |
445 | // The nodes in this NodeList will be placed after the nodes | |
446 | // matched by the query passed to insertAfter. | |
447 | // description: | |
448 | // The nodes in this NodeList will be cloned if the query | |
449 | // matches more than one element. Only the DOM nodes are cloned, not | |
450 | // any attached event handlers. | |
451 | // returns: | |
452 | // dojo.NodeList, the nodes currently in this NodeList will be returned, | |
453 | // not the matched nodes from the query. | |
454 | // example: | |
455 | // assume a DOM created by this markup: | |
456 | // | <span>before</span> | |
457 | // | <p>Hello Mars</p> | |
458 | // | <p>Hello World</p> | |
459 | // Running this code: | |
460 | // | dojo.query("span").insertBefore("p"); | |
461 | // Results in this DOM structure: | |
462 | // | <span>before</span><p>Hello Mars</p> | |
463 | // | <span>before</span><p>Hello World</p> | |
464 | return this._placeMultiple(query, "before"); //dojo.NodeList | |
465 | }, | |
466 | ||
467 | /*===== | |
468 | remove: function(simpleFilter){ | |
469 | // summary: | |
470 | // alias for dojo.NodeList's orphan method. Removes elements | |
471 | // in this list that match the simple filter from their parents | |
472 | // and returns them as a new NodeList. | |
473 | // simpleFilter: String | |
474 | // single-expression CSS rule. For example, ".thinger" or | |
475 | // "#someId[attrName='value']" but not "div > span". In short, | |
476 | // anything which does not invoke a descent to evaluate but | |
477 | // can instead be used to test a single node is acceptable. | |
478 | // returns: | |
479 | // dojo.NodeList | |
480 | return; // dojo.NodeList | |
481 | }, | |
482 | =====*/ | |
483 | remove: dojo.NodeList.prototype.orphan, | |
484 | ||
485 | wrap: function(/*String||DOMNode*/html){ | |
486 | // summary: | |
487 | // Wrap each node in the NodeList with html passed to wrap. | |
488 | // description: | |
489 | // html will be cloned if the NodeList has more than one | |
490 | // element. Only DOM nodes are cloned, not any attached | |
491 | // event handlers. | |
492 | // returns: | |
493 | // dojo.NodeList, the nodes in the current NodeList will be returned, | |
494 | // not the nodes from html argument. | |
495 | // example: | |
496 | // assume a DOM created by this markup: | |
497 | // | <b>one</b> | |
498 | // | <b>two</b> | |
499 | // Running this code: | |
500 | // | dojo.query("b").wrap("<div><span></span></div>"); | |
501 | // Results in this DOM structure: | |
502 | // | <div><span><b>one</b></span></div> | |
503 | // | <div><span><b>two</b></span></div> | |
504 | if(this[0]){ | |
505 | html = makeWrapNode(html, this[0]); | |
506 | ||
507 | //Now cycle through the elements and do the insertion. | |
508 | for(var i = 0, node; node = this[i]; i++){ | |
509 | //Always clone because if html is used to hold one of | |
510 | //the "this" nodes, then on the clone of html it will contain | |
511 | //that "this" node, and that would be bad. | |
512 | var clone = this._cloneNode(html); | |
513 | if(node.parentNode){ | |
514 | node.parentNode.replaceChild(clone, node); | |
515 | } | |
516 | //Find deepest element and insert old node in it. | |
517 | var insertion = getWrapInsertion(clone); | |
518 | insertion.appendChild(node); | |
519 | } | |
520 | } | |
521 | return this; //dojo.NodeList | |
522 | }, | |
523 | ||
524 | wrapAll: function(/*String||DOMNode*/html){ | |
525 | // summary: | |
526 | // Insert html where the first node in this NodeList lives, then place all | |
527 | // nodes in this NodeList as the child of the html. | |
528 | // returns: | |
529 | // dojo.NodeList, the nodes in the current NodeList will be returned, | |
530 | // not the nodes from html argument. | |
531 | // example: | |
532 | // assume a DOM created by this markup: | |
533 | // | <div class="container"> | |
534 | // | <div class="red">Red One</div> | |
535 | // | <div class="blue">Blue One</div> | |
536 | // | <div class="red">Red Two</div> | |
537 | // | <div class="blue">Blue Two</div> | |
538 | // | </div> | |
539 | // Running this code: | |
540 | // | dojo.query(".red").wrapAll('<div class="allRed"></div>'); | |
541 | // Results in this DOM structure: | |
542 | // | <div class="container"> | |
543 | // | <div class="allRed"> | |
544 | // | <div class="red">Red One</div> | |
545 | // | <div class="red">Red Two</div> | |
546 | // | </div> | |
547 | // | <div class="blue">Blue One</div> | |
548 | // | <div class="blue">Blue Two</div> | |
549 | // | </div> | |
550 | if(this[0]){ | |
551 | html = makeWrapNode(html, this[0]); | |
552 | ||
553 | //Place the wrap HTML in place of the first node. | |
554 | this[0].parentNode.replaceChild(html, this[0]); | |
555 | ||
556 | //Now cycle through the elements and move them inside | |
557 | //the wrap. | |
558 | var insertion = getWrapInsertion(html); | |
559 | for(var i = 0, node; node = this[i]; i++){ | |
560 | insertion.appendChild(node); | |
561 | } | |
562 | } | |
563 | return this; //dojo.NodeList | |
564 | }, | |
565 | ||
566 | wrapInner: function(/*String||DOMNode*/html){ | |
567 | // summary: | |
568 | // For each node in the NodeList, wrap all its children with the passed in html. | |
569 | // description: | |
570 | // html will be cloned if the NodeList has more than one | |
571 | // element. Only DOM nodes are cloned, not any attached | |
572 | // event handlers. | |
573 | // returns: | |
574 | // dojo.NodeList, the nodes in the current NodeList will be returned, | |
575 | // not the nodes from html argument. | |
576 | // example: | |
577 | // assume a DOM created by this markup: | |
578 | // | <div class="container"> | |
579 | // | <div class="red">Red One</div> | |
580 | // | <div class="blue">Blue One</div> | |
581 | // | <div class="red">Red Two</div> | |
582 | // | <div class="blue">Blue Two</div> | |
583 | // | </div> | |
584 | // Running this code: | |
585 | // | dojo.query(".red").wrapInner('<span class="special"></span>'); | |
586 | // Results in this DOM structure: | |
587 | // | <div class="container"> | |
588 | // | <div class="red"><span class="special">Red One</span></div> | |
589 | // | <div class="blue">Blue One</div> | |
590 | // | <div class="red"><span class="special">Red Two</span></div> | |
591 | // | <div class="blue">Blue Two</div> | |
592 | // | </div> | |
593 | if(this[0]){ | |
594 | html = makeWrapNode(html, this[0]); | |
595 | for(var i = 0; i < this.length; i++){ | |
596 | //Always clone because if html is used to hold one of | |
597 | //the "this" nodes, then on the clone of html it will contain | |
598 | //that "this" node, and that would be bad. | |
599 | var clone = this._cloneNode(html); | |
600 | ||
601 | //Need to convert the childNodes to an array since wrapAll modifies the | |
602 | //DOM and can change the live childNodes NodeList. | |
603 | this._wrap(dojo._toArray(this[i].childNodes), null, this._NodeListCtor).wrapAll(clone); | |
604 | } | |
605 | } | |
606 | return this; //dojo.NodeList | |
607 | }, | |
608 | ||
609 | replaceWith: function(/*String||DOMNode||NodeList*/content){ | |
610 | // summary: | |
611 | // Replaces each node in ths NodeList with the content passed to replaceWith. | |
612 | // description: | |
613 | // The content will be cloned if the length of NodeList | |
614 | // is greater than 1. Only the DOM nodes are cloned, not | |
615 | // any attached event handlers. | |
616 | // returns: | |
617 | // The nodes currently in this NodeList will be returned, not the replacing content. | |
618 | // Note that the returned nodes have been removed from the DOM. | |
619 | // example: | |
620 | // assume a DOM created by this markup: | |
621 | // | <div class="container"> | |
622 | // | <div class="red">Red One</div> | |
623 | // | <div class="blue">Blue One</div> | |
624 | // | <div class="red">Red Two</div> | |
625 | // | <div class="blue">Blue Two</div> | |
626 | // | </div> | |
627 | // Running this code: | |
628 | // | dojo.query(".red").replaceWith('<div class="green">Green</div>'); | |
629 | // Results in this DOM structure: | |
630 | // | <div class="container"> | |
631 | // | <div class="green">Green</div> | |
632 | // | <div class="blue">Blue One</div> | |
633 | // | <div class="green">Green</div> | |
634 | // | <div class="blue">Blue Two</div> | |
635 | // | </div> | |
636 | content = this._normalize(content, this[0]); | |
637 | for(var i = 0, node; node = this[i]; i++){ | |
638 | this._place(content, node, "before", i > 0); | |
639 | node.parentNode.removeChild(node); | |
640 | } | |
641 | return this; //dojo.NodeList | |
642 | }, | |
643 | ||
644 | replaceAll: function(/*String*/query){ | |
645 | // summary: | |
646 | // replaces nodes matched by the query passed to replaceAll with the nodes | |
647 | // in this NodeList. | |
648 | // description: | |
649 | // The nodes in this NodeList will be cloned if the query | |
650 | // matches more than one element. Only the DOM nodes are cloned, not | |
651 | // any attached event handlers. | |
652 | // returns: | |
653 | // The nodes currently in this NodeList will be returned, not the matched nodes | |
654 | // from the query. The nodes currently in this NodeLIst could have | |
655 | // been cloned, so the returned NodeList will include the cloned nodes. | |
656 | // example: | |
657 | // assume a DOM created by this markup: | |
658 | // | <div class="container"> | |
81bea17a | 659 | // | <div class="spacer">___</div> |
a089699c | 660 | // | <div class="red">Red One</div> |
81bea17a | 661 | // | <div class="spacer">___</div> |
a089699c | 662 | // | <div class="blue">Blue One</div> |
81bea17a | 663 | // | <div class="spacer">___</div> |
a089699c | 664 | // | <div class="red">Red Two</div> |
81bea17a | 665 | // | <div class="spacer">___</div> |
a089699c AD |
666 | // | <div class="blue">Blue Two</div> |
667 | // | </div> | |
668 | // Running this code: | |
669 | // | dojo.query(".red").replaceAll(".blue"); | |
670 | // Results in this DOM structure: | |
671 | // | <div class="container"> | |
81bea17a AD |
672 | // | <div class="spacer">___</div> |
673 | // | <div class="spacer">___</div> | |
a089699c AD |
674 | // | <div class="red">Red One</div> |
675 | // | <div class="red">Red Two</div> | |
81bea17a AD |
676 | // | <div class="spacer">___</div> |
677 | // | <div class="spacer">___</div> | |
a089699c AD |
678 | // | <div class="red">Red One</div> |
679 | // | <div class="red">Red Two</div> | |
680 | // | </div> | |
681 | var nl = dojo.query(query); | |
682 | var content = this._normalize(this, this[0]); | |
683 | for(var i = 0, node; node = nl[i]; i++){ | |
684 | this._place(content, node, "before", i > 0); | |
685 | node.parentNode.removeChild(node); | |
686 | } | |
687 | return this; //dojo.NodeList | |
688 | }, | |
689 | ||
690 | clone: function(){ | |
691 | // summary: | |
692 | // Clones all the nodes in this NodeList and returns them as a new NodeList. | |
693 | // description: | |
694 | // Only the DOM nodes are cloned, not any attached event handlers. | |
695 | // returns: | |
696 | // dojo.NodeList, a cloned set of the original nodes. | |
697 | // example: | |
698 | // assume a DOM created by this markup: | |
699 | // | <div class="container"> | |
700 | // | <div class="red">Red One</div> | |
701 | // | <div class="blue">Blue One</div> | |
702 | // | <div class="red">Red Two</div> | |
703 | // | <div class="blue">Blue Two</div> | |
704 | // | </div> | |
705 | // Running this code: | |
706 | // | dojo.query(".red").clone().appendTo(".container"); | |
707 | // Results in this DOM structure: | |
708 | // | <div class="container"> | |
709 | // | <div class="red">Red One</div> | |
710 | // | <div class="blue">Blue One</div> | |
711 | // | <div class="red">Red Two</div> | |
712 | // | <div class="blue">Blue Two</div> | |
713 | // | <div class="red">Red One</div> | |
714 | // | <div class="red">Red Two</div> | |
715 | // | </div> | |
716 | ||
717 | //TODO: need option to clone events? | |
718 | var ary = []; | |
719 | for(var i = 0; i < this.length; i++){ | |
720 | ary.push(this._cloneNode(this[i])); | |
721 | } | |
722 | return this._wrap(ary, this, this._NodeListCtor); //dojo.NodeList | |
723 | } | |
724 | }); | |
725 | ||
726 | //set up html method if one does not exist | |
727 | if(!dojo.NodeList.prototype.html){ | |
728 | dojo.NodeList.prototype.html = dojo.NodeList.prototype.innerHTML; | |
729 | } | |
2f01fe57 | 730 | })(); |
a089699c | 731 | |
2f01fe57 | 732 | } |