370 lines
12 KiB
HTML
370 lines
12 KiB
HTML
<!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(["dojo", "doh", "dojo/NodeList-manipulate", "dojo/domReady!"], function(dojo, doh){
|
|
|
|
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 = dojo.query("div.testDiv");
|
|
|
|
doh.register([
|
|
function innerHTML(t){
|
|
divs.innerHTML("<ul><li>Test</li></ul>");
|
|
dojo.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, ""));
|
|
},
|
|
|
|
function html(t){
|
|
divs.html("<ul><li>Test</li></ul>");
|
|
dojo.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");
|
|
|
|
dojo.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.
|
|
dojo.query('[type="text"]').val("Hello");
|
|
doh.is("Hello", dojo.byId("inputText").value);
|
|
|
|
//Textarea test.
|
|
dojo.query('textarea', "inputForm").val("World");
|
|
doh.is("World", dojo.byId("inputTextArea").value);
|
|
|
|
//Radio button test
|
|
dojo.query('[type="radio"]').val("radio2");
|
|
doh.f(dojo.byId("inputRadio1").checked);
|
|
doh.t(dojo.byId("inputRadio2").checked);
|
|
|
|
//Checkbox test
|
|
dojo.query('[type="checkbox"]').val("checkbox2");
|
|
doh.f(dojo.byId("inputCheckBox1").checked);
|
|
doh.t(dojo.byId("inputCheckBox2").checked);
|
|
|
|
var selects = dojo.query('select', 'inputForm');
|
|
|
|
//Single select test.
|
|
selects.at(0).val("two");
|
|
doh.is(1, dojo.byId("inputSelect1").selectedIndex);
|
|
dojo.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"]);
|
|
dojo.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(dojo.query("h1")[0]).forEach(function(node){
|
|
doh.is(4, node.childNodes.length);
|
|
doh.is("h1", node.childNodes[3].nodeName.toLowerCase());
|
|
});
|
|
|
|
var h1s = dojo.query("h1");
|
|
doh.is(3, h1s.length);
|
|
|
|
//Move all the h1s to one div to test NodeList content.
|
|
dojo.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
|
|
dojo.query("h1").remove();
|
|
},
|
|
|
|
function appendTo(t){
|
|
//Create some new things.
|
|
dojo.query("body").append('<p class="singer">bo</p><p class="singer">diddly</p>');
|
|
|
|
var ret = dojo.query(".foo").appendTo(".singer");
|
|
doh.is(6, ret.length);
|
|
|
|
dojo.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);
|
|
});
|
|
|
|
dojo.query("body").append('<p class="bands"></p><p class="drummer">john</p><p class="drummer">bonham</p>');
|
|
var bands = dojo.query(".bands");
|
|
dojo.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);
|
|
});
|
|
|
|
dojo.query("body").append('<p class="guitarist">jimmy</p><p class="guitarist">page</p>');
|
|
dojo.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){
|
|
dojo.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.
|
|
dojo.query("body").append('<p class="actor">steve</p><p class="actor">martin</p>');
|
|
|
|
var ret = dojo.query(".bar").prependTo(".actor");
|
|
doh.is(6, ret.length);
|
|
|
|
dojo.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
|
|
dojo.query("p").remove();
|
|
},
|
|
|
|
function after(t){
|
|
divs.after('<span class="after">after</span>')
|
|
.forEach(function(node){
|
|
doh.is("after", node.nextSibling.className);
|
|
}
|
|
);
|
|
|
|
dojo.query("form").after(dojo.query(".after")).forEach(function(node){
|
|
for(var i = 0; i < 3; i++){
|
|
doh.is("after", node.nextSibling.className);
|
|
node = node.nextSibling;
|
|
}
|
|
});
|
|
},
|
|
|
|
function insertAfter(t){
|
|
dojo.query("body").prepend('<h1>testing dojo.NodeList-manipulate</h1>');
|
|
var ret = dojo.query(".after").insertAfter("h1");
|
|
doh.is(3, ret.length);
|
|
|
|
dojo.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);
|
|
}
|
|
);
|
|
|
|
dojo.query("form").before(dojo.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 = dojo.query(".before").insertBefore("h1");
|
|
doh.is(3, ret.length);
|
|
|
|
dojo.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, dojo.query("p").length);
|
|
},
|
|
|
|
function wrap(t){
|
|
dojo.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());
|
|
});
|
|
|
|
dojo.query("b").wrap(dojo.query("h1")[0]).forEach(function(node){
|
|
doh.is("h1", node.parentNode.nodeName.toLowerCase());
|
|
doh.is(4, dojo.query("h1").length);
|
|
});
|
|
},
|
|
|
|
function wrapAll(t){
|
|
dojo.query("h1").wrapAll('<h4></h4>');
|
|
var h4s = dojo.query("h4");
|
|
doh.is(1, h4s.length);
|
|
|
|
var h4 = h4s[0];
|
|
doh.is(4, h4.childNodes.length);
|
|
dojo.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 = dojo.create("div", {"class": "myClass"});
|
|
dojo.query("#inputForm").query("select").wrapAll(div).end().query("input").wrapAll(div);
|
|
var myClass = dojo.query(".myClass");
|
|
|
|
doh.is(2, myClass.length);
|
|
doh.is(5, dojo.query("input", myClass[0]).length);
|
|
doh.is(2, dojo.query("select", myClass[1]).length);
|
|
},
|
|
|
|
function wrapInner(t){
|
|
dojo.query("h4").wrapInner('<h3></h3>');
|
|
var h3s = dojo.query("h3");
|
|
doh.is(1, h3s.length);
|
|
|
|
var h3 = h3s[0];
|
|
doh.is(4, h3.childNodes.length);
|
|
dojo.query("h1").forEach(function(node){
|
|
doh.is("h3", node.parentNode.nodeName.toLowerCase());
|
|
});
|
|
},
|
|
|
|
function replaceWith(t){
|
|
dojo.query("h1").replaceWith('<span class="replace">replace</span><b>hello</b>');
|
|
|
|
dojo.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){
|
|
dojo.query(".after").replaceAll("h4");
|
|
|
|
doh.is(3, dojo.query(".after").length);
|
|
doh.is(0, dojo.query("h4").length);
|
|
|
|
dojo.query("body").append('<i class="italics">italics</i>');
|
|
doh.is("i", dojo.query(".italics").replaceAll(".after")[0].nodeName.toLowerCase());
|
|
doh.is(0, dojo.query(".after").length);
|
|
doh.is(3, dojo.query(".italics").length);
|
|
},
|
|
|
|
function clone(t){
|
|
dojo.query(".italics").clone().appendTo("body");
|
|
doh.is(6, dojo.query(".italics").length);
|
|
}
|
|
]);
|
|
doh.runOnLoad();
|
|
});
|
|
</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>
|