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