ttrss/lib/dojo/NodeList-manipulate.js.unco...

731 lines
26 KiB
JavaScript
Raw Normal View History

2012-08-14 14:59:10 +00:00
define("dojo/NodeList-manipulate", ["./query", "./_base/lang", "./_base/array", "./dom-construct", "./NodeList-dom"], function(dquery, lang, array, construct) {
// module:
// dojo/NodeList-manipulate
// summary:
// TODOC
var NodeList = dquery.NodeList;
/*=====
dojo["NodeList-manipulate"] = {
// summary: Adds a chainable methods to dojo.query() / Nodelist instances for manipulating HTML
// and DOM nodes and their properties.
};
// doc alias helpers:
NodeList = dojo.NodeList;
=====*/
//TODO: add a way to parse for widgets in the injected markup?
function getText(/*DOMNode*/node){
// summary:
// recursion method for text() to use. Gets text value for a node.
// description:
// Juse uses nodedValue so things like <br/> tags do not end up in
// the text as any sort of line return.
var text = "", ch = node.childNodes;
for(var i = 0, n; n = ch[i]; i++){
//Skip comments.
if(n.nodeType != 8){
if(n.nodeType == 1){
text += getText(n);
}else{
text += n.nodeValue;
}
}
}
return text;
}
function getWrapInsertion(/*DOMNode*/node){
// summary:
// finds the innermost element to use for wrap insertion.
//Make it easy, assume single nesting, no siblings.
while(node.childNodes[0] && node.childNodes[0].nodeType == 1){
node = node.childNodes[0];
}
return node; //DOMNode
}
function makeWrapNode(/*DOMNode||String*/html, /*DOMNode*/refNode){
// summary:
// convert HTML into nodes if it is not already a node.
if(typeof html == "string"){
html = construct.toDom(html, (refNode && refNode.ownerDocument));
if(html.nodeType == 11){
//DocumentFragment cannot handle cloneNode, so choose first child.
html = html.childNodes[0];
}
}else if(html.nodeType == 1 && html.parentNode){
//This element is already in the DOM clone it, but not its children.
html = html.cloneNode(false);
}
return html; /*DOMNode*/
}
lang.extend(NodeList, {
_placeMultiple: function(/*String||Node||NodeList*/query, /*String*/position){
// summary:
// private method for inserting queried nodes into all nodes in this NodeList
// at different positions. Differs from NodeList.place because it will clone
// the nodes in this NodeList if the query matches more than one element.
var nl2 = typeof query == "string" || query.nodeType ? dquery(query) : query;
var toAdd = [];
for(var i = 0; i < nl2.length; i++){
//Go backwards in DOM to make dom insertions easier via insertBefore
var refNode = nl2[i];
var length = this.length;
for(var j = length - 1, item; item = this[j]; j--){
if(i > 0){
//Need to clone the item. This also means
//it needs to be added to the current NodeList
//so it can also be the target of other chaining operations.
item = this._cloneNode(item);
toAdd.unshift(item);
}
if(j == length - 1){
construct.place(item, refNode, position);
}else{
refNode.parentNode.insertBefore(item, refNode);
}
refNode = item;
}
}
if(toAdd.length){
//Add the toAdd items to the current NodeList. Build up list of args
//to pass to splice.
toAdd.unshift(0);
toAdd.unshift(this.length - 1);
Array.prototype.splice.apply(this, toAdd);
}
return this; //dojo.NodeList
},
innerHTML: function(/*String?||DOMNode?|NodeList?*/value){
// summary:
// allows setting the innerHTML of each node in the NodeList,
// if there is a value passed in, otherwise, reads the innerHTML value of the first node.
// description:
// This method is simpler than the dojo.NodeList.html() method provided by
// `dojo.NodeList-html`. This method just does proper innerHTML insertion of HTML fragments,
// and it allows for the innerHTML to be read for the first node in the node list.
// Since dojo.NodeList-html already took the "html" name, this method is called
// "innerHTML". However, if dojo.NodeList-html has not been loaded yet, this
// module will define an "html" method that can be used instead. Be careful if you
// are working in an environment where it is possible that dojo.NodeList-html could
// have been loaded, since its definition of "html" will take precedence.
// The nodes represented by the value argument will be cloned if more than one
// node is in this NodeList. The nodes in this NodeList are returned in the "set"
// usage of this method, not the HTML that was inserted.
// returns:
// if no value is passed, the result is String, the innerHTML of the first node.
// If a value is passed, the return is this dojo.NodeList
// example:
// assume a DOM created by this markup:
// | <div id="foo"></div>
// | <div id="bar"></div>
// This code inserts <p>Hello World</p> into both divs:
// | dojo.query("div").innerHTML("<p>Hello World</p>");
// example:
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars</p></div>
// | <div id="bar"><p>Hello World</p></div>
// This code returns "<p>Hello Mars</p>":
// | var message = dojo.query("div").innerHTML();
if(arguments.length){
return this.addContent(value, "only"); //dojo.NodeList
}else{
return this[0].innerHTML; //String
}
},
/*=====
html: function(value){
// summary:
// see the information for "innerHTML". "html" is an alias for "innerHTML", but is
// only defined if dojo.NodeList-html has not been loaded.
// description:
// An alias for the "innerHTML" method, but only defined if there is not an existing
// "html" method on dojo.NodeList. Be careful if you are working in an environment
// where it is possible that dojo.NodeList-html could have been loaded, since its
// definition of "html" will take precedence. If you are not sure if dojo.NodeList-html
// could be loaded, use the "innerHTML" method.
// value: String?||DOMNode?||NodeList?
// optional. The HTML fragment to use as innerHTML. If value is not passed, then the innerHTML
// of the first element in this NodeList is returned.
// returns:
// if no value is passed, the result is String, the innerHTML of the first node.
// If a value is passed, the return is this dojo.NodeList
return; // dojo.NodeList
return; // String
},
=====*/
text: function(/*String*/value){
// summary:
// allows setting the text value of each node in the NodeList,
// if there is a value passed in, otherwise, returns the text value for all the
// nodes in the NodeList in one string.
// example:
// assume a DOM created by this markup:
// | <div id="foo"></div>
// | <div id="bar"></div>
// This code inserts "Hello World" into both divs:
// | dojo.query("div").text("Hello World");
// example:
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars <span>today</span></p></div>
// | <div id="bar"><p>Hello World</p></div>
// This code returns "Hello Mars today":
// | var message = dojo.query("div").text();
// returns:
// if no value is passed, the result is String, the text value of the first node.
// If a value is passed, the return is this dojo.NodeList
if(arguments.length){
for(var i = 0, node; node = this[i]; i++){
if(node.nodeType == 1){
construct.empty(node);
node.appendChild(node.ownerDocument.createTextNode(value));
}
}
return this; //dojo.NodeList
}else{
var result = "";
for(i = 0; node = this[i]; i++){
result += getText(node);
}
return result; //String
}
},
val: function(/*String||Array*/value){
// summary:
// If a value is passed, allows seting the value property of form elements in this
// NodeList, or properly selecting/checking the right value for radio/checkbox/select
// elements. If no value is passed, the value of the first node in this NodeList
// is returned.
// returns:
// if no value is passed, the result is String or an Array, for the value of the
// first node.
// If a value is passed, the return is this dojo.NodeList
// example:
// assume a DOM created by this markup:
// | <input type="text" value="foo">
// | <select multiple>
// | <option value="red" selected>Red</option>
// | <option value="blue">Blue</option>
// | <option value="yellow" selected>Yellow</option>
// | </select>
// This code gets and sets the values for the form fields above:
// | dojo.query('[type="text"]').val(); //gets value foo
// | dojo.query('[type="text"]').val("bar"); //sets the input's value to "bar"
// | dojo.query("select").val() //gets array value ["red", "yellow"]
// | dojo.query("select").val(["blue", "yellow"]) //Sets the blue and yellow options to selected.
//Special work for input elements.
if(arguments.length){
var isArray = lang.isArray(value);
for(var index = 0, node; node = this[index]; index++){
var name = node.nodeName.toUpperCase();
var type = node.type;
var newValue = isArray ? value[index] : value;
if(name == "SELECT"){
var opts = node.options;
for(var i = 0; i < opts.length; i++){
var opt = opts[i];
if(node.multiple){
opt.selected = (array.indexOf(value, opt.value) != -1);
}else{
opt.selected = (opt.value == newValue);
}
}
}else if(type == "checkbox" || type == "radio"){
node.checked = (node.value == newValue);
}else{
node.value = newValue;
}
}
return this; //dojo.NodeList
}else{
//node already declared above.
node = this[0];
if(!node || node.nodeType != 1){
return undefined;
}
value = node.value || "";
if(node.nodeName.toUpperCase() == "SELECT" && node.multiple){
//A multivalued selectbox. Do the pain.
value = [];
//opts declared above in if block.
opts = node.options;
//i declared above in if block;
for(i = 0; i < opts.length; i++){
//opt declared above in if block
opt = opts[i];
if(opt.selected){
value.push(opt.value);
}
}
if(!value.length){
value = null;
}
}
return value; //String||Array
}
},
append: function(/*String||DOMNode||NodeList*/content){
// summary:
// appends the content to every node in the NodeList.
// description:
// The content will be cloned if the length of NodeList
// is greater than 1. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the appended content.
// example:
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars</p></div>
// | <div id="bar"><p>Hello World</p></div>
// Running this code:
// | dojo.query("div").append("<span>append</span>");
// Results in this DOM structure:
// | <div id="foo"><p>Hello Mars</p><span>append</span></div>
// | <div id="bar"><p>Hello World</p><span>append</span></div>
return this.addContent(content, "last"); //dojo.NodeList
},
appendTo: function(/*String*/query){
// summary:
// appends nodes in this NodeList to the nodes matched by
// the query passed to appendTo.
// description:
// The nodes in this NodeList will be cloned if the query
// matches more than one element. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the matched nodes from the query.
// example:
// assume a DOM created by this markup:
// | <span>append</span>
// | <p>Hello Mars</p>
// | <p>Hello World</p>
// Running this code:
// | dojo.query("span").appendTo("p");
// Results in this DOM structure:
// | <p>Hello Mars<span>append</span></p>
// | <p>Hello World<span>append</span></p>
return this._placeMultiple(query, "last"); //dojo.NodeList
},
prepend: function(/*String||DOMNode||NodeList*/content){
// summary:
// prepends the content to every node in the NodeList.
// description:
// The content will be cloned if the length of NodeList
// is greater than 1. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the appended content.
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars</p></div>
// | <div id="bar"><p>Hello World</p></div>
// Running this code:
// | dojo.query("div").prepend("<span>prepend</span>");
// Results in this DOM structure:
// | <div id="foo"><span>prepend</span><p>Hello Mars</p></div>
// | <div id="bar"><span>prepend</span><p>Hello World</p></div>
return this.addContent(content, "first"); //dojo.NodeList
},
prependTo: function(/*String*/query){
// summary:
// prepends nodes in this NodeList to the nodes matched by
// the query passed to prependTo.
// description:
// The nodes in this NodeList will be cloned if the query
// matches more than one element. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the matched nodes from the query.
// example:
// assume a DOM created by this markup:
// | <span>prepend</span>
// | <p>Hello Mars</p>
// | <p>Hello World</p>
// Running this code:
// | dojo.query("span").prependTo("p");
// Results in this DOM structure:
// | <p><span>prepend</span>Hello Mars</p>
// | <p><span>prepend</span>Hello World</p>
return this._placeMultiple(query, "first"); //dojo.NodeList
},
after: function(/*String||Element||NodeList*/content){
// summary:
// Places the content after every node in the NodeList.
// description:
// The content will be cloned if the length of NodeList
// is greater than 1. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the appended content.
// example:
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars</p></div>
// | <div id="bar"><p>Hello World</p></div>
// Running this code:
// | dojo.query("div").after("<span>after</span>");
// Results in this DOM structure:
// | <div id="foo"><p>Hello Mars</p></div><span>after</span>
// | <div id="bar"><p>Hello World</p></div><span>after</span>
return this.addContent(content, "after"); //dojo.NodeList
},
insertAfter: function(/*String*/query){
// summary:
// The nodes in this NodeList will be placed after the nodes
// matched by the query passed to insertAfter.
// description:
// The nodes in this NodeList will be cloned if the query
// matches more than one element. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the matched nodes from the query.
// example:
// assume a DOM created by this markup:
// | <span>after</span>
// | <p>Hello Mars</p>
// | <p>Hello World</p>
// Running this code:
// | dojo.query("span").insertAfter("p");
// Results in this DOM structure:
// | <p>Hello Mars</p><span>after</span>
// | <p>Hello World</p><span>after</span>
return this._placeMultiple(query, "after"); //dojo.NodeList
},
before: function(/*String||DOMNode||NodeList*/content){
// summary:
// Places the content before every node in the NodeList.
// description:
// The content will be cloned if the length of NodeList
// is greater than 1. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the appended content.
// example:
// assume a DOM created by this markup:
// | <div id="foo"><p>Hello Mars</p></div>
// | <div id="bar"><p>Hello World</p></div>
// Running this code:
// | dojo.query("div").before("<span>before</span>");
// Results in this DOM structure:
// | <span>before</span><div id="foo"><p>Hello Mars</p></div>
// | <span>before</span><div id="bar"><p>Hello World</p></div>
return this.addContent(content, "before"); //dojo.NodeList
},
insertBefore: function(/*String*/query){
// summary:
// The nodes in this NodeList will be placed after the nodes
// matched by the query passed to insertAfter.
// description:
// The nodes in this NodeList will be cloned if the query
// matches more than one element. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// dojo.NodeList, the nodes currently in this NodeList will be returned,
// not the matched nodes from the query.
// example:
// assume a DOM created by this markup:
// | <span>before</span>
// | <p>Hello Mars</p>
// | <p>Hello World</p>
// Running this code:
// | dojo.query("span").insertBefore("p");
// Results in this DOM structure:
// | <span>before</span><p>Hello Mars</p>
// | <span>before</span><p>Hello World</p>
return this._placeMultiple(query, "before"); //dojo.NodeList
},
/*=====
remove: function(simpleFilter){
// summary:
// alias for dojo.NodeList's orphan method. Removes elements
// in this list that match the simple filter from their parents
// and returns them as a new NodeList.
// simpleFilter: String
// single-expression CSS rule. For example, ".thinger" or
// "#someId[attrName='value']" but not "div > span". In short,
// anything which does not invoke a descent to evaluate but
// can instead be used to test a single node is acceptable.
// returns:
// dojo.NodeList
return; // dojo.NodeList
},
=====*/
remove: NodeList.prototype.orphan,
wrap: function(/*String||DOMNode*/html){
// summary:
// Wrap each node in the NodeList with html passed to wrap.
// description:
// html will be cloned if the NodeList has more than one
// element. Only DOM nodes are cloned, not any attached
// event handlers.
// returns:
// dojo.NodeList, the nodes in the current NodeList will be returned,
// not the nodes from html argument.
// example:
// assume a DOM created by this markup:
// | <b>one</b>
// | <b>two</b>
// Running this code:
// | dojo.query("b").wrap("<div><span></span></div>");
// Results in this DOM structure:
// | <div><span><b>one</b></span></div>
// | <div><span><b>two</b></span></div>
if(this[0]){
html = makeWrapNode(html, this[0]);
//Now cycle through the elements and do the insertion.
for(var i = 0, node; node = this[i]; i++){
//Always clone because if html is used to hold one of
//the "this" nodes, then on the clone of html it will contain
//that "this" node, and that would be bad.
var clone = this._cloneNode(html);
if(node.parentNode){
node.parentNode.replaceChild(clone, node);
}
//Find deepest element and insert old node in it.
var insertion = getWrapInsertion(clone);
insertion.appendChild(node);
}
}
return this; //dojo.NodeList
},
wrapAll: function(/*String||DOMNode*/html){
// summary:
// Insert html where the first node in this NodeList lives, then place all
// nodes in this NodeList as the child of the html.
// returns:
// dojo.NodeList, the nodes in the current NodeList will be returned,
// not the nodes from html argument.
// example:
// assume a DOM created by this markup:
// | <div class="container">
// | <div class="red">Red One</div>
// | <div class="blue">Blue One</div>
// | <div class="red">Red Two</div>
// | <div class="blue">Blue Two</div>
// | </div>
// Running this code:
// | dojo.query(".red").wrapAll('<div class="allRed"></div>');
// Results in this DOM structure:
// | <div class="container">
// | <div class="allRed">
// | <div class="red">Red One</div>
// | <div class="red">Red Two</div>
// | </div>
// | <div class="blue">Blue One</div>
// | <div class="blue">Blue Two</div>
// | </div>
if(this[0]){
html = makeWrapNode(html, this[0]);
//Place the wrap HTML in place of the first node.
this[0].parentNode.replaceChild(html, this[0]);
//Now cycle through the elements and move them inside
//the wrap.
var insertion = getWrapInsertion(html);
for(var i = 0, node; node = this[i]; i++){
insertion.appendChild(node);
}
}
return this; //dojo.NodeList
},
wrapInner: function(/*String||DOMNode*/html){
// summary:
// For each node in the NodeList, wrap all its children with the passed in html.
// description:
// html will be cloned if the NodeList has more than one
// element. Only DOM nodes are cloned, not any attached
// event handlers.
// returns:
// dojo.NodeList, the nodes in the current NodeList will be returned,
// not the nodes from html argument.
// example:
// assume a DOM created by this markup:
// | <div class="container">
// | <div class="red">Red One</div>
// | <div class="blue">Blue One</div>
// | <div class="red">Red Two</div>
// | <div class="blue">Blue Two</div>
// | </div>
// Running this code:
// | dojo.query(".red").wrapInner('<span class="special"></span>');
// Results in this DOM structure:
// | <div class="container">
// | <div class="red"><span class="special">Red One</span></div>
// | <div class="blue">Blue One</div>
// | <div class="red"><span class="special">Red Two</span></div>
// | <div class="blue">Blue Two</div>
// | </div>
if(this[0]){
html = makeWrapNode(html, this[0]);
for(var i = 0; i < this.length; i++){
//Always clone because if html is used to hold one of
//the "this" nodes, then on the clone of html it will contain
//that "this" node, and that would be bad.
var clone = this._cloneNode(html);
//Need to convert the childNodes to an array since wrapAll modifies the
//DOM and can change the live childNodes NodeList.
this._wrap(lang._toArray(this[i].childNodes), null, this._NodeListCtor).wrapAll(clone);
}
}
return this; //dojo.NodeList
},
replaceWith: function(/*String||DOMNode||NodeList*/content){
// summary:
// Replaces each node in ths NodeList with the content passed to replaceWith.
// description:
// The content will be cloned if the length of NodeList
// is greater than 1. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// The nodes currently in this NodeList will be returned, not the replacing content.
// Note that the returned nodes have been removed from the DOM.
// example:
// assume a DOM created by this markup:
// | <div class="container">
// | <div class="red">Red One</div>
// | <div class="blue">Blue One</div>
// | <div class="red">Red Two</div>
// | <div class="blue">Blue Two</div>
// | </div>
// Running this code:
// | dojo.query(".red").replaceWith('<div class="green">Green</div>');
// Results in this DOM structure:
// | <div class="container">
// | <div class="green">Green</div>
// | <div class="blue">Blue One</div>
// | <div class="green">Green</div>
// | <div class="blue">Blue Two</div>
// | </div>
content = this._normalize(content, this[0]);
for(var i = 0, node; node = this[i]; i++){
this._place(content, node, "before", i > 0);
node.parentNode.removeChild(node);
}
return this; //dojo.NodeList
},
replaceAll: function(/*String*/query){
// summary:
// replaces nodes matched by the query passed to replaceAll with the nodes
// in this NodeList.
// description:
// The nodes in this NodeList will be cloned if the query
// matches more than one element. Only the DOM nodes are cloned, not
// any attached event handlers.
// returns:
// The nodes currently in this NodeList will be returned, not the matched nodes
// from the query. The nodes currently in this NodeLIst could have
// been cloned, so the returned NodeList will include the cloned nodes.
// example:
// assume a DOM created by this markup:
// | <div class="container">
// | <div class="spacer">___</div>
// | <div class="red">Red One</div>
// | <div class="spacer">___</div>
// | <div class="blue">Blue One</div>
// | <div class="spacer">___</div>
// | <div class="red">Red Two</div>
// | <div class="spacer">___</div>
// | <div class="blue">Blue Two</div>
// | </div>
// Running this code:
// | dojo.query(".red").replaceAll(".blue");
// Results in this DOM structure:
// | <div class="container">
// | <div class="spacer">___</div>
// | <div class="spacer">___</div>
// | <div class="red">Red One</div>
// | <div class="red">Red Two</div>
// | <div class="spacer">___</div>
// | <div class="spacer">___</div>
// | <div class="red">Red One</div>
// | <div class="red">Red Two</div>
// | </div>
var nl = dquery(query);
var content = this._normalize(this, this[0]);
for(var i = 0, node; node = nl[i]; i++){
this._place(content, node, "before", i > 0);
node.parentNode.removeChild(node);
}
return this; //dojo.NodeList
},
clone: function(){
// summary:
// Clones all the nodes in this NodeList and returns them as a new NodeList.
// description:
// Only the DOM nodes are cloned, not any attached event handlers.
// returns:
// dojo.NodeList, a cloned set of the original nodes.
// example:
// assume a DOM created by this markup:
// | <div class="container">
// | <div class="red">Red One</div>
// | <div class="blue">Blue One</div>
// | <div class="red">Red Two</div>
// | <div class="blue">Blue Two</div>
// | </div>
// Running this code:
// | dojo.query(".red").clone().appendTo(".container");
// Results in this DOM structure:
// | <div class="container">
// | <div class="red">Red One</div>
// | <div class="blue">Blue One</div>
// | <div class="red">Red Two</div>
// | <div class="blue">Blue Two</div>
// | <div class="red">Red One</div>
// | <div class="red">Red Two</div>
// | </div>
//TODO: need option to clone events?
var ary = [];
for(var i = 0; i < this.length; i++){
ary.push(this._cloneNode(this[i]));
}
return this._wrap(ary, this, this._NodeListCtor); //dojo.NodeList
}
});
//set up html method if one does not exist
if(!NodeList.prototype.html){
NodeList.prototype.html = NodeList.prototype.innerHTML;
}
return NodeList;
});