You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
557 lines
15 KiB
557 lines
15 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>dojo.html.set test</title> |
|
|
|
<script src="../../dojo.js" data-dojo-config="isDebug:true, parseOnLoad:false"></script> |
|
<script> |
|
require([ |
|
"doh", |
|
"dojo/_base/array", "dojo/aspect", |
|
"dojo/_base/declare", "dojo/dom", "dojo/dom-construct", "dojo/html", "dojo/_base/lang", "dojo/parser", |
|
"dojo/query", "dojo/NodeList-html","dojo/domReady!" |
|
], function(doh, array, aspect, declare, dom, domConstruct, html, lang, parser, query){ |
|
|
|
/* test goals |
|
* injecting content as string, node, nodelist. |
|
* injecting exotic nodes/markup e.g. table rows, lists |
|
* injecting whole html documents (extractContent option) |
|
* parsing resulting content |
|
|
|
* cleanup when setting content |
|
*/ |
|
declare("SimpleThing", null, { |
|
constructor: function(params, node) { |
|
node.setAttribute("test", "ok"); |
|
} |
|
}); |
|
|
|
declare("ParserInstantiateTester", null, { |
|
constructor: function(params, node) { |
|
node.setAttribute("test", "ok"); |
|
} |
|
}); |
|
declare("DeclarativeContentSetter", html._ContentSetter, { |
|
postscript: function() { |
|
this.set(); |
|
} |
|
}); |
|
|
|
function ieTrimSpaceBetweenTags(str){ |
|
return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1"); |
|
} |
|
|
|
|
|
targetNode = null; |
|
|
|
doh.register("basicChecks", [ |
|
{ |
|
name: 'set', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = dom.byId("pane1"); |
|
var msg = "Simple No-params Test"; |
|
console.log("targetNode has content: ", targetNode.innerHTML); |
|
var result = ""; |
|
html.set( |
|
targetNode, |
|
msg |
|
); |
|
console.log("after set, targetNode has content: ", targetNode.innerHTML); |
|
doh.is(msg, targetNode.innerHTML); |
|
} |
|
}, |
|
{ |
|
name: 'setContentWithOnEnd', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = dom.byId("pane1"); |
|
var msg = "setContentWithOnEnd Test"; |
|
var result = false; |
|
html.set( |
|
targetNode, |
|
msg, |
|
{ |
|
onEnd: function() { |
|
lang.getObject(this.declaredClass).prototype.onEnd.call(this); |
|
result = true; |
|
} |
|
} |
|
); |
|
doh.is(msg, targetNode.innerHTML); |
|
doh.t(result); |
|
} |
|
}, |
|
{ |
|
name: 'setContent_with_parsing', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>'; |
|
html.set( |
|
dom.byId("pane1"), |
|
cont, |
|
{ |
|
postscript: function() { |
|
this.set(); |
|
|
|
doh.t(typeof ifrs != "undefined" && ifrs.declaredClass=="SimpleThing"); |
|
doh.t(this.parseResults.length > 0); |
|
}, |
|
parseContent: true |
|
} |
|
); |
|
} |
|
}, |
|
{ |
|
name: 'emptyElement', |
|
runTest: function(t){ |
|
// Test of deprecated _emptyNode() method |
|
console.log("basicChecks: " + this.name); |
|
var msg = "setContentWithOnEnd Test"; |
|
var node = dom.byId("pane1"); |
|
node.innerHTML = '<div><span>just</span>some test<br/></div>text'; |
|
var cNodes = node.childNodes.length; |
|
|
|
html._emptyNode(dom.byId("pane1")); |
|
doh.t(node.childNodes.length == 0 && node.innerHTML == ""); |
|
} |
|
}, |
|
{ |
|
name: 'changeContentTRHead', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = query('table#tableTest > thead > tr')[0]; |
|
|
|
var markup = "<td><div>This</div>Should<u>Work</u></td>"; |
|
html.set( |
|
targetNode, |
|
markup, |
|
{ |
|
"testname": "basicChecks changeContentTRHead" |
|
} |
|
); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'changeContentTHead', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = query('table#tableTest > thead')[0]; |
|
|
|
var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>"; |
|
html.set( |
|
targetNode, |
|
markup, |
|
{ |
|
"testname": "basicChecks changeContentTHead" |
|
} |
|
); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'changeContentTRBody', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = query('table#tableTest > tbody > tr')[0]; |
|
var markup = "<td><div>This</div>Should<u>Work</u></td>"; |
|
html.set( |
|
targetNode, |
|
markup, |
|
{ |
|
"testname": "basicChecks changeContentTRBody" |
|
}); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'changeContentTBody', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = query('table#tableTest > tbody')[0]; |
|
var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>"; |
|
html.set( |
|
targetNode, markup, |
|
{ |
|
"testname": "basicChecks changeContentTBody" |
|
}); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'changeContentTable', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = query('table#tableTest')[0]; |
|
var markup = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>"; |
|
html.set( |
|
targetNode, markup, |
|
{ |
|
"testname": "basicChecks changeContentTable" |
|
}); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'setNodeList', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
var tmpUL = domConstruct.create("ul"); |
|
domConstruct.create("li", { innerHTML: "item 1" }, tmpUL); |
|
domConstruct.create("li", { innerHTML: "item 2" }, tmpUL); |
|
console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length); |
|
targetNode = dom.byId("pane1"); |
|
html.set( |
|
targetNode, tmpUL.childNodes, |
|
{ |
|
"testname": "basicChecks setNodeList" |
|
}); |
|
var res = query("li", dom.byId("pane1")).length; |
|
doh.is(2, res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'setMixedContent', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
|
|
targetNode = dom.byId("pane1"); |
|
var markup = '<h4>See Jane</h4>' |
|
+ 'Look at her <span>Run</span>!'; |
|
html.set( |
|
targetNode, markup, |
|
{ |
|
"testname": "basicChecks setMixedContent" |
|
}); |
|
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
|
doh.is(markup.toLowerCase(), res); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: 'extractContent', |
|
runTest: function(t){ |
|
console.log("basicChecks: " + this.name); |
|
targetNode = dom.byId("pane1"); |
|
var markup = '' |
|
+'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">' |
|
+'<html> ' |
|
+' <head> ' |
|
+' <title> ' |
|
+' the title ' |
|
+' </title> ' |
|
+' </head> ' |
|
+' <body> ' |
|
+' <p> ' |
|
+' This is the <b>Good Stuff</b><br> ' |
|
+' </p> ' |
|
+' </body> ' |
|
+'</html> '; |
|
|
|
html.set( |
|
targetNode, markup, |
|
{ |
|
"testname": "basicChecks changeContentTable", |
|
extractContent: true |
|
}); |
|
doh.t(targetNode.innerHTML.indexOf("title") == -1); |
|
doh.t(query("*", targetNode).length == 3); |
|
}, |
|
tearDown: function(){ |
|
domConstruct.empty(targetNode); |
|
} |
|
} |
|
]); |
|
doh.register("nodelistExtension", [ |
|
{ |
|
name: 'nodelistHtml', |
|
runTest: function(t){ |
|
console.log("nodelistExtension: " + this.name); |
|
|
|
query(".zork").html("<li data-dojo-type='ParserInstantiateTester'>1</li><li data-dojo-type='ParserInstantiateTester'>2</li><li data-dojo-type='ParserInstantiateTester'>3</li>", |
|
{ |
|
parseContent: true, |
|
onBegin: function() { |
|
this.content = this.content.replace(/([0-9])/g, "MOOO"); |
|
this.inherited("onBegin", arguments); |
|
} |
|
}).removeClass("notdone").addClass("done"); |
|
|
|
var liNodes = query(".zork > li"); |
|
|
|
// test to make sure three li's were added to class="zork" node (3x 3 set li's) |
|
doh.is(9, liNodes.length); |
|
|
|
// test the innerHTML's got replaced in our onBegin |
|
doh.t( liNodes.every(function(n) { return n.innerHTML.match(/MOOO/) }) ); |
|
console.log(this.name + ": innerHTML.match subtest was ok"); |
|
|
|
// test the parent elements got the correct className |
|
doh.t( query(".zork").every(function(n) { return n.className == "zork done"; }) ); |
|
console.log(this.name + ": li.className subtest was ok"); |
|
|
|
// and test the parser correctly created object from the child nodes |
|
// ...they should all have a test attribute now |
|
doh.t( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) ); |
|
console.log(this.name + ": Tester instantiation subtest(getAttribute) was ok"); |
|
|
|
}, |
|
tearDown: function(){ |
|
// domConstruct.empty(targetNode); |
|
} |
|
}, |
|
{ |
|
name: "nodeListSimple", |
|
runTest: function(t){ |
|
var txt = "foo"; |
|
query("#simpleText").html("<p>"+txt+"</p>"); |
|
|
|
// check if its there at all |
|
var len = query("#simpleText p").length; |
|
doh.is(1, len); |
|
|
|
// check the inner html is right: |
|
var p = query("#simpleText p")[0]; |
|
doh.t( p && p.innerHTML == txt ); |
|
} |
|
} |
|
]); |
|
doh.register("fromMarkup", [ |
|
{ |
|
name: 'contentOpFromMarkup', |
|
runTest: function(t){ |
|
console.log("fromMarkup: " + this.name); |
|
|
|
parser.parse("markupSetContentOp"); |
|
doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOp: new node content"); |
|
}, |
|
tearDown: function(){ |
|
dom.byId("markupPane").innerHTML = "initial content"; |
|
} |
|
}, |
|
{ |
|
name: 'extendedContentOpFromMarkup', |
|
runTest: function(t){ |
|
console.log("fromMarkup: " + this.name); |
|
|
|
parser.parse("markupSetContentOpX"); |
|
|
|
doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase()); |
|
}, |
|
tearDown: function(){ |
|
dom.byId("markupPane").innerHTML = "initial content"; |
|
} |
|
} |
|
]); |
|
doh.register("reuse", [ |
|
{ |
|
name: 'ContentSetterReUse', |
|
runTest: function(t){ |
|
console.log("fromMarkup: " + this.name); |
|
|
|
targetNode = dom.byId('pane1'); |
|
var args = [ |
|
[ |
|
"simple" |
|
], |
|
[ |
|
'<div data-dojo-type="SimpleThing" data-dojo-id="id00">parsed content</div>', |
|
{ |
|
parseContent: true |
|
} |
|
], |
|
[ |
|
'<div data-dojo-type="SimpleThing" data-dojo-id="id01">parsed content</div>', |
|
{ |
|
parseContent: true |
|
} |
|
] |
|
]; |
|
var setter = new html._ContentSetter({ |
|
node: targetNode |
|
}); |
|
array.forEach(args, function(applyArgs) { |
|
setter.node = targetNode; |
|
setter.set.apply(setter, applyArgs); |
|
setter.tearDown(); |
|
}); |
|
doh.t(id00 && id01); |
|
// check we cleaned up after ourselves |
|
doh.f(setter.parseResults); |
|
}, |
|
tearDown: function(){ |
|
dom.byId("markupPane").innerHTML = "initial content"; |
|
} |
|
} |
|
]); |
|
|
|
// Test specification of inherited attributes dir, lang, etc. |
|
var handle; |
|
doh.register("inherited", [ |
|
{ |
|
name: 'unspecified', |
|
runTest: function(t){ |
|
var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>'; |
|
|
|
var parserCalled, inherited; |
|
handle = aspect.after(parser, "parse", function(args){ |
|
parserCalled = true; |
|
inherited = args.inherited; |
|
}, true); |
|
|
|
html.set( |
|
dom.byId("pane1"), |
|
cont, |
|
{ |
|
parseContent: true |
|
} |
|
); |
|
doh.t(parserCalled, "parser was called"); |
|
doh.f("dir" in inherited, "no dir specified"); |
|
doh.f("lang" in inherited, "no lang specified"); |
|
}, |
|
tearDown: function(){ |
|
handle.remove(); |
|
} |
|
}, |
|
{ |
|
name: 'specified', |
|
runTest: function(t){ |
|
var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>'; |
|
|
|
var parserCalled, inherited; |
|
handle = aspect.after(parser, "parse", function(args){ |
|
parserCalled = true; |
|
inherited = args.inherited; |
|
}, true); |
|
|
|
html.set( |
|
dom.byId("pane1"), |
|
cont, |
|
{ |
|
dir: "rtl", |
|
lang: "it_it", |
|
textDir: "ltr", |
|
parseContent: true |
|
} |
|
); |
|
doh.t(parserCalled, "parser was called"); |
|
doh.is("rtl", inherited.dir, "dir"); |
|
doh.is("it_it", inherited.lang, "lang"); |
|
doh.is("ltr", inherited.textDir, "textdir"); |
|
}, |
|
tearDown: function(){ |
|
handle.remove(); |
|
} |
|
} |
|
|
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
<style> |
|
@import "../../../dojo/resources/dojo.css"; |
|
|
|
.box { |
|
border: 1px solid black; |
|
height: 190px; |
|
width: 80%; |
|
overflow: auto; |
|
} |
|
.zork { |
|
width: 200px; |
|
margin: 10px; |
|
list-style-type: none; |
|
} |
|
.notdone { |
|
color: #999; background-color: #ccc; |
|
} |
|
.done { |
|
color: #fff; background-color: #090; |
|
} |
|
.done li { |
|
border: 1px; background-color: orange; |
|
width: 180px; |
|
} |
|
.red { |
|
color: red; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body class='tundra'> |
|
<h1>dojo.html.set</h1> |
|
|
|
<div id="pane1"></div> |
|
<div id="pane2"></div> |
|
<table id='tableTest' class='box'> |
|
<thead> |
|
<tr> |
|
<td></td> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td></td> |
|
</tr> |
|
<tbody> |
|
</table> |
|
<ul class="zork notdone">initial content</ul> |
|
<ul class="zork notdone">initial content</ul> |
|
<ul class="zork notdone">initial content</ul> |
|
|
|
<div id="markupPane">initial content</div> |
|
<div id="markupSetContentOp"> |
|
<div data-dojo-type="DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div> |
|
</div> |
|
<div id="markupSetContentOpX"> |
|
<div data-dojo-type="DeclarativeContentSetter" data-dojo-id="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content"> |
|
<script type="dojo/method" data-dojo-event="onBegin"> |
|
this.content = this.content.toUpperCase(); |
|
console.log(this.id + ", made my content look like this:" + this.content); |
|
</script> |
|
<script type="dojo/method" data-dojo-event="onFoo"> |
|
console.log("dojo/method supplied onBegin"); |
|
this.content = this.content.toUpperCase(); |
|
</script> |
|
</div> |
|
</div> |
|
<div id="another"> |
|
<div id="myTest9" data-dojo-type="DeclarativeContentSetter"> |
|
Some content |
|
<script type="dojo/method"> |
|
console.log("parsed me!"); |
|
</script> |
|
</div> |
|
</div> |
|
<h1 id="simpleText">test</h1> |
|
</body> |
|
</html>
|
|
|