git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/_Templated.html

   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 &gt; 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 &gt; 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 &gt;&lt;"\' 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>