PerfectEquation
/
GZ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<html>
	<head>
		<title>_Templated tests</title>
		<script type="text/javascript" src="../../dojo/dojo.js"
			djConfig="parseOnLoad: true, isDebug: true"></script>
		<script type="text/javascript">
			dojo.require("doh.runner");

			dojo.require("dijit._Widget");
			dojo.require("dijit._Templated");

			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.addOnLoad(function(){
				// Template with no variables (should be cached as a DOM tree)
				dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], {
					attributeMap: {},
					id: "test1",
					templateString: "<button><span>hello &gt; world</span></button>"
				});

				// Template with variables
				dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], {
					attributeMap: {},
					id: "test2",
					num: 5,
					text: "hello ><\"' world",

					templateString: "<button><span num=\"${num}\">${text}</span></button>"
				});

				// Template that starts with special node (has to be constructed inside a <tbody>)
				dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], {
					attributeMap: {},
					id: "test3",
					text: "bar",
					templateString: "<tr><td>${text}</td></tr>"
				});

				// Illegal subsitition variable name
				dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], {
					templateString: "<tr><td>${fake}</td></tr>"
				});

				// dojoAttachPoint
				dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], {
					attributeMap: {foo: "", style: "", bar: "buttonNode"},
					templateString: "<div style='border: 1px solid red'>" +
										"<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" +
										'<span><input dojoAttachPoint="inputNode" value="input"></span>' +
										"<span dojoAttachPoint='containerNode'></span>" +
									"</div>"
				});

				// dojoAttachEvent
				dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], {
					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 dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" +
										"<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" +
									"</tr></table>"
				});

				// TODO:
				// TemplatePath

				var testW;
				doh.register("dijit.tests._Templated.html",
					[
						function simple(t){
							var widget=new SimpleTemplate();
							var wrapper=dojo.byId("simpleWrapper");
							wrapper.appendChild(widget.domNode);
							t.is('<button widgetid=\"test1\"><span>hello &gt; world</span></button>', wrapper.innerHTML.toLowerCase());			
						},
						function variables(t){
							var widget=new VariableTemplate();
							var wrapper=dojo.byId("variables1Wrapper");
							wrapper.appendChild(widget.domNode);
							t.is('<button widgetid=\"test2\"><span num="5">hello &gt;&lt;"\' world</span></button>', wrapper.innerHTML.toLowerCase());
						},

						function variables2(t){	
							var widget = new VariableTemplate({id: "myid", num: -5, text: ""});
							var wrapper=dojo.byId("variables2Wrapper");
							wrapper.appendChild(widget.domNode);
							t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase());
						},
						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 attributeMap(t){
							var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"});
							var wrapper = dojo.byId("attributeMapWrapper");
							wrapper.appendChild(widget.domNode);
							t.is("value1", widget.domNode.getAttribute("foo"));
							t.is("value2", widget.buttonNode.getAttribute("bar"));
							// TODO: this is() check is unreliable, IE returns a string like
							// border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid
							// t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase());
						},
						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(function(){
								t.t(widget.focusCalled);
								t.t(widget.focus2Called);
								deferred.callback(true);
							}, 0);
							return deferred;
						}
					]
				);
				doh.run();
			});
		</script>
	<style type="text/css">
		@import "../themes/tundra/tundra.css";
	</style>
	</head>
	<body>
		<h1>_Templated test</h1>
		<div id="simpleWrapper"></div>
		<div id="variables1Wrapper"></div>
		<div id="variables2Wrapper"></div>
		<table><tbody id="trWrapper"></tbody></table>
		<div id="attachPointWrapper"></div>
		<div id="attributeMapWrapper"></div>
		<div id="attachEventWrapper"></div>
	</body>
</html>