ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
master/examples/NodeList-manipulate.html Normal file
View File

@@ -0,0 +1,369 @@
<!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>