<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html id="html">
<head>
<title>Testing dojo.NodeList-manipulate extensions to dojo.NodeList</title>
<style type="text/css">
@import "../resources/dojo.css";
</style>
<script type="text/javascript" src="../dojo.js"></script>
<script type="text/javascript">
require([
"doh", "dojo/_base/array", "dojo/dom", "dojo/dom-construct",
"dojo/query", "dojo/NodeList-manipulate", "dojo/domReady!"
], function(doh, array, dom, domConstruct, query){
function verify(/*dojo.NodeList*/nl, /*Array*/ids){
for(var i = 0, node; node = nl[i]; i++){
doh.is(ids[i], node.id);
}
//Make sure lengths are equal.
doh.is(ids.length, i);
}
var divs = query("div.testDiv");
doh.register("NodeList-manipulate", [
function innerHTML(t){
divs.innerHTML("<ul><li>Test</li></ul>");
array.forEach(divs, function(node){
doh.is(1, node.childNodes.length);
doh.is("ul", node.childNodes[0].nodeName.toLowerCase());
});
doh.is("<ul><li>test</li></ul>", divs.innerHTML().toLowerCase().replace(/[\r\n]/g, ""));
divs.innerHTML("");
doh.is("", divs.innerHTML().toLowerCase().replace(/[\r\n]/g, ""));
},
function html(t){
divs.html("<ul><li>Test</li></ul>");
array.forEach(divs, function(node){
doh.is(1, node.childNodes.length);
doh.is("ul", node.childNodes[0].nodeName.toLowerCase());
});
doh.is("<ul><li>test</li></ul>", divs.html().toLowerCase().replace(/[\r\n]/g, ""));
},
function text(t){
doh.is("TestTestTest", divs.text());
divs.text("Hello World");
array.forEach(divs, function(node){
doh.is(1, node.childNodes.length);
doh.is("Hello World", node.childNodes[0].nodeValue);
});
doh.is("Hello WorldHello WorldHello World", divs.text());
},
function val(t){
//Input text test.
query('[type="text"]').val("Hello");
doh.is("Hello", dom.byId("inputText").value);
//Textarea test.
query('textarea', "inputForm").val("World");
doh.is("World", dom.byId("inputTextArea").value);
//Radio button test
query('[type="radio"]').val("radio2");
doh.f(dom.byId("inputRadio1").checked);
doh.t(dom.byId("inputRadio2").checked);
//Checkbox test
query('[type="checkbox"]').val("checkbox2");
doh.f(dom.byId("inputCheckBox1").checked);
doh.t(dom.byId("inputCheckBox2").checked);
var selects = query('select', 'inputForm');
//Single select test.
selects.at(0).val("two");
doh.is(1, dom.byId("inputSelect1").selectedIndex);
query("option", "inputSelect1").forEach(function(node){
if(node.value == "two"){
doh.t(node.selected);
}else{
doh.f(node.selected);
}
});
//Multiple select test.
selects.at(1).val(["four", "six"]);
query("option", "inputSelect2").forEach(function(node){
if(node.value == "four" || node.value == "six"){
doh.t(node.selected);
}else{
doh.f(node.selected);
}
});
},
function append(t){
//Test string content
divs.append('<span class="foo">foo</span><span class="bar">bar</span>')
.forEach(function(node){
doh.is(3, node.childNodes.length);
doh.is("foo", node.childNodes[1].className);
doh.is("bar", node.childNodes[2].className);
}
);
//Test DOMNode content
divs.append(query("h1")[0]).forEach(function(node){
doh.is(4, node.childNodes.length);
doh.is("h1", node.childNodes[3].nodeName.toLowerCase());
});
var h1s = query("h1");
doh.is(3, h1s.length);
//Move all the h1s to one div to test NodeList content.
query("#t, #yeah").append(document.getElementsByTagName("h1")).forEach(function(node){
doh.is(6, node.childNodes.length);
doh.is("h1", node.childNodes[3].nodeName.toLowerCase());
doh.is("h1", node.childNodes[4].nodeName.toLowerCase());
doh.is("h1", node.childNodes[5].nodeName.toLowerCase());
});
//clean up
query("h1").remove();
},
function appendTo(t){
//Create some new things.
query("body").append('<p class="singer">bo</p><p class="singer">diddly</p>');
var ret = query(".foo").appendTo(".singer");
doh.is(6, ret.length);
query(".singer").forEach(function(node){
doh.is(4, node.childNodes.length);
doh.is("foo", node.childNodes[1].className);
doh.is("foo", node.childNodes[2].className);
doh.is("foo", node.childNodes[3].className);
});
query("body").append('<p class="bands"></p><p class="drummer">john</p><p class="drummer">bonham</p>');
var bands = query(".bands");
query(".drummer").appendTo(bands);
bands.forEach(function(node){
doh.is(2, node.childNodes.length);
doh.is("drummer", node.childNodes[0].className);
doh.is("drummer", node.childNodes[1].className);
});
query("body").append('<p class="guitarist">jimmy</p><p class="guitarist">page</p>');
query(".guitarist").appendTo(bands[0]);
bands.forEach(function(node){
doh.is(4, node.childNodes.length);
doh.is("guitarist", node.childNodes[2].className);
doh.is("guitarist", node.childNodes[3].className);
});
//Get rid of bands
bands.remove();
},
function prepend(t){
query(".singer").prepend('<span class="fry">layla</span>')
.forEach(function(node){
doh.is(5, node.childNodes.length);
doh.is("fry", node.childNodes[0].className);
}
);
},
function prependTo(t){
//Create some new things.
query("body").append('<p class="actor">steve</p><p class="actor">martin</p>');
var ret = query(".bar").prependTo(".actor");
doh.is(6, ret.length);
query(".actor").forEach(function(node){
doh.is(4, node.childNodes.length);
doh.is("bar", node.childNodes[0].className);
doh.is("bar", node.childNodes[1].className);
doh.is("bar", node.childNodes[2].className);
});
//Clean up
query("p").remove();
},
function after(t){
divs.after('<span class="after">after</span>')
.forEach(function(node){
doh.is("after", node.nextSibling.className);
}
);
query("form").after(query(".after")).forEach(function(node){
for(var i = 0; i < 3; i++){
doh.is("after", node.nextSibling.className);
node = node.nextSibling;
}
});
},
function insertAfter(t){
query("body").prepend('<h1>testing dojo.NodeList-manipulate</h1>');
var ret = query(".after").insertAfter("h1");
doh.is(3, ret.length);
query("h1").forEach(function(node){
for(var i = 0; i < 3; i++){
doh.is("after", node.nextSibling.className);
node = node.nextSibling;
}
});
},
function before(t){
divs.before('<span class="before">before</span>')
.forEach(function(node){
doh.is("before", node.previousSibling.className);
}
);
query("form").before(query(".before")).forEach(function(node){
for(var i = 0; i < 3; i++){
doh.is("before", node.previousSibling.className);
node = node.previousSibling;
}
});
},
function insertBefore(t){
var ret = query(".before").insertBefore("h1");
doh.is(3, ret.length);
query("h1").forEach(function(node){
for(var i = 0; i < 3; i++){
doh.is("before", node.previousSibling.className);
node = node.previousSibling;
}
});
},
function remove(t){
//Already did some removes, make sure they are not still here.
//This is also just an alias for orphan which has its own tests.
doh.is(0, query("p").length);
},
function wrap(t){
query(".before").wrap("<b><i></i></b>").forEach(function(node){
doh.is("i", node.parentNode.nodeName.toLowerCase());
doh.is("b", node.parentNode.parentNode.nodeName.toLowerCase());
});
query("b").wrap(query("h1")[0]).forEach(function(node){
doh.is("h1", node.parentNode.nodeName.toLowerCase());
doh.is(4, query("h1").length);
});
},
function wrapAll(t){
query("h1").wrapAll('<h4></h4>');
var h4s = query("h4");
doh.is(1, h4s.length);
var h4 = h4s[0];
doh.is(4, h4.childNodes.length);
query("h1").forEach(function(node){
doh.is("h4", node.parentNode.nodeName.toLowerCase());
});
//Complicated test that test for cloning of the wrap nodes in the right
//situation.
var div = domConstruct.create("div", {"class": "myClass"});
query("#inputForm").query("select").wrapAll(div).end().query("input").wrapAll(div);
var myClass = query(".myClass");
doh.is(2, myClass.length);
doh.is(5, query("input", myClass[0]).length);
doh.is(2, query("select", myClass[1]).length);
},
function wrapInner(t){
query("h4").wrapInner('<h3></h3>');
var h3s = query("h3");
doh.is(1, h3s.length);
var h3 = h3s[0];
doh.is(4, h3.childNodes.length);
query("h1").forEach(function(node){
doh.is("h3", node.parentNode.nodeName.toLowerCase());
});
},
function replaceWith(t){
query("h1").replaceWith('<span class="replace">replace</span><b>hello</b>');
query("h3").forEach(function(node){
doh.is(8, node.childNodes.length);
doh.is("replace", node.childNodes[0].className);
doh.is("b", node.childNodes[1].nodeName.toLowerCase());
});
},
function replaceAll(t){
query(".after").replaceAll("h4");
doh.is(3, query(".after").length);
doh.is(0, query("h4").length);
query("body").append('<i class="italics">italics</i>');
doh.is("i", query(".italics").replaceAll(".after")[0].nodeName.toLowerCase());
doh.is(0, query(".after").length);
doh.is(3, query(".italics").length);
},
function clone(t){
query(".italics").clone().appendTo("body");
doh.is(6, query(".italics").length);
}
]);
doh.run();
});
</script>
</head>
<body id="body" class="classy">
<h1>testing dojo.NodeList-manipulate</h1>
<div id="sq100" class="testDiv">
100px square, abs
</div>
<div id="t" class="testDiv">
<span id="c1">c1</span>
</div>
<div id="third" class="third testDiv">
<!-- This is the third top level div -->
<span id="crass">Crass, baby</span>
The third div
<span id="classy" class="classy">Classy, baby</span>
The third div, again
<!-- Another comment -->
<span id="yeah">Yeah, baby</span>
</div>
<form id="inputForm">
<input type="text" id="inputText">
<textarea id="inputTextArea"></textarea>
<input type="radio" name="inputRadio" id="inputRadio1" value="radio1" checked>
<input type="radio" name="inputRadio" id="inputRadio2" value="radio2">
<input type="checkbox" id="inputCheckBox1" value="checkbox1" checked>
<input type="checkbox" id="inputCheckBox2" value="checkbox2">
<select id="inputSelect1">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three" selected>Three</option>
</select>
<select id="inputSelect2" multiple>
<option value="four">Four</option>
<option value="five" selected>Five</option>
<option value="six">Six</option>
</select>
</form>
</body>
</html>