| 2150 |
mathias |
1 |
<html>
|
|
|
2 |
<head>
|
|
|
3 |
<title>_Templated tests</title>
|
|
|
4 |
<script type="text/javascript" src="../../dojo/dojo.js"
|
|
|
5 |
djConfig="parseOnLoad: true, isDebug: true"></script>
|
|
|
6 |
<script type="text/javascript">
|
|
|
7 |
dojo.require("doh.runner");
|
|
|
8 |
|
|
|
9 |
dojo.require("dijit._Widget");
|
|
|
10 |
dojo.require("dijit._Templated");
|
|
|
11 |
|
|
|
12 |
function getOuterHTML(/*DomNode*/ node){
|
|
|
13 |
var wrapper = dojo.doc.createElement("div");
|
|
|
14 |
wrapper.appendChild(node);
|
|
|
15 |
return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it.
|
|
|
16 |
}
|
|
|
17 |
|
|
|
18 |
dojo.addOnLoad(function(){
|
|
|
19 |
// Template with no variables (should be cached as a DOM tree)
|
|
|
20 |
dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], {
|
|
|
21 |
attributeMap: {},
|
|
|
22 |
id: "test1",
|
|
|
23 |
templateString: "<button><span>hello > world</span></button>"
|
|
|
24 |
});
|
|
|
25 |
|
|
|
26 |
// Template with variables
|
|
|
27 |
dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], {
|
|
|
28 |
attributeMap: {},
|
|
|
29 |
id: "test2",
|
|
|
30 |
num: 5,
|
|
|
31 |
text: "hello ><\"' world",
|
|
|
32 |
|
|
|
33 |
templateString: "<button><span num=\"${num}\">${text}</span></button>"
|
|
|
34 |
});
|
|
|
35 |
|
|
|
36 |
// Template that starts with special node (has to be constructed inside a <tbody>)
|
|
|
37 |
dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], {
|
|
|
38 |
attributeMap: {},
|
|
|
39 |
id: "test3",
|
|
|
40 |
text: "bar",
|
|
|
41 |
templateString: "<tr><td>${text}</td></tr>"
|
|
|
42 |
});
|
|
|
43 |
|
|
|
44 |
// Illegal subsitition variable name
|
|
|
45 |
dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], {
|
|
|
46 |
templateString: "<tr><td>${fake}</td></tr>"
|
|
|
47 |
});
|
|
|
48 |
|
|
|
49 |
// dojoAttachPoint
|
|
|
50 |
dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], {
|
|
|
51 |
attributeMap: {foo: "", style: "", bar: "buttonNode"},
|
|
|
52 |
templateString: "<div style='border: 1px solid red'>" +
|
|
|
53 |
"<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" +
|
|
|
54 |
'<span><input dojoAttachPoint="inputNode" value="input"></span>' +
|
|
|
55 |
"<span dojoAttachPoint='containerNode'></span>" +
|
|
|
56 |
"</div>"
|
|
|
57 |
});
|
|
|
58 |
|
|
|
59 |
// dojoAttachEvent
|
|
|
60 |
dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], {
|
|
|
61 |
click: function(){ this.clickCalled=true; },
|
|
|
62 |
onfocus: function(){ this.focusCalled=true; },
|
|
|
63 |
focus2: function(){ this.focus2Called=true; },
|
|
|
64 |
templateString: "<table style='border: 1px solid blue'><tr>" +
|
|
|
65 |
"<td><button dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" +
|
|
|
66 |
"<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" +
|
|
|
67 |
"</tr></table>"
|
|
|
68 |
});
|
|
|
69 |
|
|
|
70 |
// TODO:
|
|
|
71 |
// TemplatePath
|
|
|
72 |
|
|
|
73 |
var testW;
|
|
|
74 |
doh.register("dijit.tests._Templated.html",
|
|
|
75 |
[
|
|
|
76 |
function simple(t){
|
|
|
77 |
var widget=new SimpleTemplate();
|
|
|
78 |
var wrapper=dojo.byId("simpleWrapper");
|
|
|
79 |
wrapper.appendChild(widget.domNode);
|
|
|
80 |
t.is('<button widgetid=\"test1\"><span>hello > world</span></button>', wrapper.innerHTML.toLowerCase());
|
|
|
81 |
},
|
|
|
82 |
function variables(t){
|
|
|
83 |
var widget=new VariableTemplate();
|
|
|
84 |
var wrapper=dojo.byId("variables1Wrapper");
|
|
|
85 |
wrapper.appendChild(widget.domNode);
|
|
|
86 |
t.is('<button widgetid=\"test2\"><span num="5">hello ><"\' world</span></button>', wrapper.innerHTML.toLowerCase());
|
|
|
87 |
},
|
|
|
88 |
|
|
|
89 |
function variables2(t){
|
|
|
90 |
var widget = new VariableTemplate({id: "myid", num: -5, text: ""});
|
|
|
91 |
var wrapper=dojo.byId("variables2Wrapper");
|
|
|
92 |
wrapper.appendChild(widget.domNode);
|
|
|
93 |
t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase());
|
|
|
94 |
},
|
|
|
95 |
function table(t){
|
|
|
96 |
var widget=new TableRowTemplate({text: "hello"});
|
|
|
97 |
var wrapper = dojo.byId("trWrapper");
|
|
|
98 |
wrapper.appendChild(widget.domNode);
|
|
|
99 |
var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, "");
|
|
|
100 |
t.is('<tr widgetid="test3"><td>hello</td></tr>', actual);
|
|
|
101 |
},
|
|
|
102 |
function illegal(t){
|
|
|
103 |
var hadException=false;
|
|
|
104 |
try{
|
|
|
105 |
var widget=new IllegalSubstitution();
|
|
|
106 |
}catch(e){
|
|
|
107 |
console.log(e);
|
|
|
108 |
hadException=true;
|
|
|
109 |
}
|
|
|
110 |
t.t(hadException);
|
|
|
111 |
},
|
|
|
112 |
function attachPoint(t){
|
|
|
113 |
var widget=new AttachPoint();
|
|
|
114 |
var wrapper = dojo.byId("attachPointWrapper");
|
|
|
115 |
wrapper.appendChild(widget.domNode);
|
|
|
116 |
t.is(widget.containerNode.tagName.toLowerCase(), "span");
|
|
|
117 |
t.is(widget.buttonNode.tagName.toLowerCase(), "button");
|
|
|
118 |
t.is(widget.focusNode.tagName.toLowerCase(), "button");
|
|
|
119 |
t.is(widget.inputNode.tagName.toLowerCase(), "input");
|
|
|
120 |
},
|
|
|
121 |
function attributeMap(t){
|
|
|
122 |
var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"});
|
|
|
123 |
var wrapper = dojo.byId("attributeMapWrapper");
|
|
|
124 |
wrapper.appendChild(widget.domNode);
|
|
|
125 |
t.is("value1", widget.domNode.getAttribute("foo"));
|
|
|
126 |
t.is("value2", widget.buttonNode.getAttribute("bar"));
|
|
|
127 |
// TODO: this is() check is unreliable, IE returns a string like
|
|
|
128 |
// border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid
|
|
|
129 |
// t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase());
|
|
|
130 |
},
|
|
|
131 |
function attachEvent(t){
|
|
|
132 |
var deferred = new doh.Deferred();
|
|
|
133 |
var widget=new AttachEvent();
|
|
|
134 |
var wrapper = dojo.byId("attachEventWrapper");
|
|
|
135 |
wrapper.appendChild(widget.domNode);
|
|
|
136 |
widget.left.focus();
|
|
|
137 |
widget.right.focus();
|
|
|
138 |
setTimeout(function(){
|
|
|
139 |
t.t(widget.focusCalled);
|
|
|
140 |
t.t(widget.focus2Called);
|
|
|
141 |
deferred.callback(true);
|
|
|
142 |
}, 0);
|
|
|
143 |
return deferred;
|
|
|
144 |
}
|
|
|
145 |
]
|
|
|
146 |
);
|
|
|
147 |
doh.run();
|
|
|
148 |
});
|
|
|
149 |
</script>
|
|
|
150 |
<style type="text/css">
|
|
|
151 |
@import "../themes/tundra/tundra.css";
|
|
|
152 |
</style>
|
|
|
153 |
</head>
|
|
|
154 |
<body>
|
|
|
155 |
<h1>_Templated test</h1>
|
|
|
156 |
<div id="simpleWrapper"></div>
|
|
|
157 |
<div id="variables1Wrapper"></div>
|
|
|
158 |
<div id="variables2Wrapper"></div>
|
|
|
159 |
<table><tbody id="trWrapper"></tbody></table>
|
|
|
160 |
<div id="attachPointWrapper"></div>
|
|
|
161 |
<div id="attributeMapWrapper"></div>
|
|
|
162 |
<div id="attachEventWrapper"></div>
|
|
|
163 |
</body>
|
|
|
164 |
</html>
|