231 lines
8.2 KiB
HTML
231 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>_Templated tests</title>
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
data-dojo-config="isDebug: true"></script>
|
|
<script type="text/javascript">
|
|
dojo.require("doh.runner");
|
|
|
|
dojo.require("dojo.parser");
|
|
|
|
dojo.require("dijit._Widget");
|
|
dojo.require("dijit._TemplatedMixin");
|
|
dojo.require("dijit._WidgetsInTemplateMixin");
|
|
|
|
dojo.require("dijit.layout.LayoutContainer");
|
|
|
|
function getOuterHTML(/*DomNode*/ node){
|
|
var wrapper = dojo.doc.createElement("div");
|
|
wrapper.appendChild(node);
|
|
return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it.
|
|
}
|
|
|
|
dojo.ready(function(){
|
|
// Template with no variables (should be cached as a DOM tree)
|
|
dojo.declare("SimpleTemplate", [dijit._Widget, dijit._TemplatedMixin], {
|
|
id: "test1",
|
|
_setIdAttr: null, // override _Widget to not copy id to domNode
|
|
|
|
templateString: "<button type='button'><span>hello < world</span></button>"
|
|
});
|
|
|
|
// Template with variables
|
|
dojo.declare("VariableTemplate", [dijit._Widget, dijit._TemplatedMixin], {
|
|
id: "test2",
|
|
_setIdAttr: null, // override _Widget to not copy id to domNode
|
|
|
|
num: 5,
|
|
bool: false,
|
|
text: "hello <\"' world",
|
|
|
|
templateString: "<button><span num=\"${num}\" value=\"${bool}\">${text}</span></button>"
|
|
});
|
|
|
|
// Template with ! variables (for literal substitution)
|
|
dojo.declare("ExclamationVariableTemplate", [dijit._Widget, dijit._TemplatedMixin], {
|
|
markup: "<span>hello world</span>",
|
|
|
|
templateString: "<div>${!markup}</div>"
|
|
});
|
|
|
|
// Template that starts with special node (has to be constructed inside a <tbody>)
|
|
dojo.declare("TableRowTemplate", [dijit._Widget, dijit._TemplatedMixin], {
|
|
id: "test3",
|
|
_setIdAttr: null, // override _Widget to not copy id to domNode
|
|
text: "bar",
|
|
|
|
templateString: "<tr><td>${text}</td></tr>"
|
|
});
|
|
|
|
// Illegal substitution variable name
|
|
dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._TemplatedMixin], {
|
|
templateString: "<tr><td>${fake}</td></tr>"
|
|
});
|
|
|
|
// data-dojo-attach-point
|
|
dojo.declare("AttachPoint", [dijit._Widget, dijit._TemplatedMixin], {
|
|
templateString: "<div style='border: 1px solid red'>" +
|
|
"<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
|
|
'<span><input data-dojo-attach-point="inputNode" value="input"/></span>' +
|
|
"<span data-dojo-attach-point='containerNode'></span>" +
|
|
"</div>"
|
|
});
|
|
|
|
// data-dojo-attach-event
|
|
dojo.declare("AttachEvent", [dijit._Widget, dijit._TemplatedMixin], {
|
|
click: function(){ this.clickCalled=true; },
|
|
onfocus: function(){ this.focusCalled=true; },
|
|
focus2: function(){ this.focus2Called=true; },
|
|
templateString: "<table style='border: 1px solid blue'><tr>" +
|
|
"<td><button type='button' data-dojo-attach-point='left' data-dojo-attach-event='onclick: click, onfocus'>left</button></td>" +
|
|
"<td><button type='button' data-dojo-attach-point='right' data-dojo-attach-event='onclick: click, onfocus: focus2'>right</button></td>" +
|
|
"</tr></table>"
|
|
});
|
|
|
|
var testW;
|
|
|
|
doh.register("parse", function(){
|
|
dojo.parser.parse();
|
|
});
|
|
|
|
doh.register("_TemplatedMixin",
|
|
[
|
|
function simple(t){
|
|
var widget=new SimpleTemplate();
|
|
var wrapper=dojo.byId("simpleWrapper");
|
|
wrapper.appendChild(widget.domNode);
|
|
|
|
// Different browsers have different orders for type=button and widgetid=... so simplify
|
|
// by just removing the type=button.
|
|
t.is('<button widgetid=\"test1\"><span>hello < world</span></button>', wrapper.innerHTML.toLowerCase().replace(/ type="?button"?/, ""));
|
|
},
|
|
|
|
function variables(t){
|
|
var widget=new VariableTemplate();
|
|
var span = widget.domNode.getElementsByTagName("span")[0];
|
|
var text = span.innerHTML;
|
|
t.is("5", span.getAttribute("num"));
|
|
t.is("false", span.getAttribute("value"));
|
|
t.is("hello <\"' world", text);
|
|
},
|
|
function variables2(t){
|
|
var widget = new VariableTemplate({id: "myid", num: -5, bool: true, text: ""});
|
|
var span = widget.domNode.getElementsByTagName("span")[0];
|
|
var text = span.innerHTML;
|
|
t.is("-5", span.getAttribute("num"));
|
|
t.is("true", span.getAttribute("value"));
|
|
t.is("", text);
|
|
},
|
|
function variablesWithExclamation(t){
|
|
var widget=new ExclamationVariableTemplate();
|
|
|
|
// ExclamationVariableTemplate should create markup like
|
|
// <div><span>hello world</span></div>
|
|
// The <span> comes from the ${!markup} variable.
|
|
var span = dojo.query("> *", widget.domNode);
|
|
t.is(1, span.length, "dom node has one child");
|
|
t.is("SPAN", span[0].nodeName.toUpperCase(), "which is a span");
|
|
t.is("hello world", span[0].innerHTML, "and the text is set correctly too");
|
|
},
|
|
|
|
function table(t){
|
|
var widget=new TableRowTemplate({text: "hello"});
|
|
var wrapper = dojo.byId("trWrapper");
|
|
wrapper.appendChild(widget.domNode);
|
|
var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, "");
|
|
t.is('<tr widgetid="test3"><td>hello</td></tr>', actual);
|
|
},
|
|
function illegal(t){
|
|
var hadException=false;
|
|
try{
|
|
var widget=new IllegalSubstitution();
|
|
}catch(e){
|
|
console.log(e);
|
|
hadException=true;
|
|
}
|
|
t.t(hadException);
|
|
},
|
|
function attachPoint(t){
|
|
var widget=new AttachPoint();
|
|
var wrapper = dojo.byId("attachPointWrapper");
|
|
wrapper.appendChild(widget.domNode);
|
|
t.is(widget.containerNode.tagName.toLowerCase(), "span");
|
|
t.is(widget.buttonNode.tagName.toLowerCase(), "button");
|
|
t.is(widget.focusNode.tagName.toLowerCase(), "button");
|
|
t.is(widget.inputNode.tagName.toLowerCase(), "input");
|
|
},
|
|
function attachEvent(t){
|
|
var deferred = new doh.Deferred();
|
|
var widget = new AttachEvent();
|
|
var wrapper = dojo.byId("attachEventWrapper");
|
|
wrapper.appendChild(widget.domNode);
|
|
widget.left.focus();
|
|
widget.right.focus();
|
|
setTimeout(deferred.getTestCallback(function(){
|
|
t.t(widget.focusCalled, "left focused");
|
|
t.t(widget.focus2Called, "right focused");
|
|
}), 50);
|
|
return deferred;
|
|
},
|
|
|
|
function widgetsInTemplateLifecycle(t){
|
|
|
|
var result = [], expected = [1,1,0,2,2,3];
|
|
|
|
// widgetsInTemplateLifecycle
|
|
dojo.declare("SubThing", dijit._Widget, {
|
|
postCreate:function(){
|
|
this.inherited(arguments);
|
|
result.push(1);
|
|
},
|
|
startup:function(){
|
|
this.inherited(arguments);
|
|
result.push(2);
|
|
}
|
|
});
|
|
|
|
dojo.declare("ParentThing", [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
|
|
templateString: "<div>" +
|
|
"<span data-dojo-type='SubThing'>a</span>" +
|
|
"<div data-dojo-type='dijit.layout.LayoutContainer'>" +
|
|
"<span data-dojo-type='SubThing'>b</span>" +
|
|
"</div>" +
|
|
"</div>",
|
|
postCreate:function(){
|
|
// children postcreate (x2) called before this postCreate
|
|
this.inherited(arguments);
|
|
result.push(0);
|
|
},
|
|
startup: function(){
|
|
// then children startup (x2) then our startup
|
|
// (we can call inherited after push(), and change the order)
|
|
this.inherited(arguments);
|
|
result.push(3);
|
|
}
|
|
});
|
|
|
|
new ParentThing().startup();
|
|
|
|
t.is(expected.length, result.length);
|
|
dojo.forEach(expected, function(r){
|
|
t.is(r, result.shift());
|
|
});
|
|
|
|
}
|
|
]
|
|
);
|
|
doh.run();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>_Templated test</h1>
|
|
<div id="simpleWrapper"></div>
|
|
<table><tbody id="trWrapper"></tbody></table>
|
|
<div id="attachPointWrapper"></div>
|
|
<div id="attachEventWrapper"></div>
|
|
</body>
|
|
</html>
|