1 if(!dojo._hasResource["dojox.dtl.html"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dojox.dtl.html"] = true;
3 dojo.provide("dojox.dtl.html");
5 dojo.require("dojox.dtl._base");
6 dojo.require("dojox.dtl.Context");
13 types: dojo.mixin({change: -11, attr: -12, custom: -13, elem: 1, text: 3}, ddt.types),
15 _re4: /^function anonymous\(\)\s*{\s*(.*)\s*}$/,
16 getTemplate: function(text){
17 if(typeof this._commentable == "undefined"){
18 // Check to see if the browser can handle comments
19 this._commentable = false;
20 var div = document.createElement("div");
21 div.innerHTML = "<!--Test comment handling, and long comments, using comments whenever possible.-->";
22 if(div.childNodes.length && div.childNodes[0].nodeType == 8 && div.childNodes[0].data == "comment"){
23 this._commentable = true;
27 if(!this._commentable){
29 text = text.replace(/<!--({({|%).*?(%|})})-->/g, "$1");
34 [true, "select", "option"],
35 [dojo.isSafari, "tr", "th"],
36 [dojo.isSafari, "tr", "td"],
37 [dojo.isSafari, "thead", "tr", "th"],
38 [dojo.isSafari, "tbody", "tr", "td"]
40 // Some tags can't contain text. So we wrap the text in tags that they can have.
41 for(var i = 0, pair; pair = pairs[i]; i++){
45 if(text.indexOf("<" + pair[1]) != -1){
46 var selectRe = new RegExp("<" + pair[1] + "[\\s\\S]*?>([\\s\\S]+?)</" + pair[1] + ">", "ig");
47 while(match = selectRe.exec(text)){
48 // Do it like this to make sure we don't double-wrap
50 var tokens = dojox.string.tokenize(match[1], new RegExp("(<" + pair[2] + "[\\s\\S]*?>[\\s\\S]*?</" + pair[2] + ">)", "ig"), function(child){ found = true; return {data: child}; });
53 for(var j = 0; j < tokens.length; j++) {
54 if(dojo.isObject(tokens[j])){
55 replace.push(tokens[j].data);
57 var close = pair[pair.length - 1];
58 var k, replacement = "";
59 for(k = 2; k < pair.length - 1; k++){
60 replacement += "<" + pair[k] + ">";
62 replacement += "<" + close + ' iscomment="true">' + dojo.trim(tokens[j]) + "</" + close + ">";
63 for(k = 2; k < pair.length - 1; k++){
64 replacement += "</" + pair[k] + ">";
66 replace.push(replacement);
69 text = text.replace(match[1], replace.join(""));
75 var re = /\b([a-zA-Z]+)=['"]/g;
76 while(match = re.exec(text)){
77 this._attributes[match[1].toLowerCase()] = true;
79 var div = document.createElement("div");
81 var output = {nodes: []};
82 while(div.childNodes.length){
83 output.nodes.push(div.removeChild(div.childNodes[0]))
88 tokenize: function(/*Node*/ nodes){
91 for(var i = 0, node; node = nodes[i++];){
92 if(node.nodeType != 1){
93 this.__tokenize(node, tokens);
95 this._tokenize(node, tokens);
102 _tokenize: function(/*Node*/ node, /*Array*/ tokens){
103 var types = this.types;
105 var swallowed = this._swallowed;
106 var i, j, tag, child;
109 // Try to efficiently associate tags that use an attribute to
110 // remove the node from DOM (eg dojoType) so that we can efficiently
111 // locate them later in the tokenizing.
112 first = tokens.first = true;
113 var tags = dd.register.getAttributeTags();
114 for(i = 0; tag = tags[i]; i++){
116 (tag[2])({ swallowNode: function(){ throw 1; }}, "");
124 for(i = 0; tag = swallowed[i]; i++){
125 var text = node.getAttribute(tag[0]);
127 var swallowed = false;
128 var custom = (tag[2])({ swallowNode: function(){ swallowed = true; return node; }}, text);
130 if(node.parentNode && node.parentNode.removeChild){
131 node.parentNode.removeChild(node);
133 tokens.push([types.custom, custom]);
140 if(dojo.isIE && node.tagName == "SCRIPT"){
147 for(i = 0; child = node.childNodes[i]; i++){
148 children.push(child);
152 tokens.push([types.elem, node]);
156 // Only do a change request if we need to
157 tokens.push([types.change, node]);
161 for(var key in this._attributes){
164 value = node.className || value;
165 }else if(key == "for"){
166 value = node.htmlFor || value;
167 }else if(key == "value" && node.value == node.innerHTML){
168 // Sometimes .value is set the same as the contents of the item (button)
170 }else if(node.getAttribute){
171 value = node.getAttribute(key, 2) || value;
172 if(key == "href" || key == "src"){
174 var hash = location.href.lastIndexOf(location.hash);
175 var href = location.href.substring(0, hash).split("/");
177 href = href.join("/") + "/";
178 if(value.indexOf(href) == 0){
179 value = value.replace(href, "");
181 value = decodeURIComponent(value);
183 if(value.indexOf("{%") != -1 || value.indexOf("{{") != -1){
184 node.setAttribute(key, "");
188 if(typeof value == "function"){
189 value = value.toString().replace(this._re4, "$1");
193 // Only do a change request if we need to
194 tokens.push([types.change, node]);
197 // We'll have to resolve attributes during parsing
198 tokens.push([types.attr, node, key, value]);
201 for(i = 0, child; child = children[i]; i++){
202 if(child.nodeType == 1 && child.getAttribute("iscomment")){
203 child.parentNode.removeChild(child);
206 data: child.innerHTML
209 this.__tokenize(child, tokens);
212 if(!first && node.parentNode && node.parentNode.tagName){
214 tokens.push([types.change, node, true]);
216 tokens.push([types.change, node.parentNode]);
217 node.parentNode.removeChild(node);
219 // If this node is parentless, it's a base node, so we have to "up" change to itself
220 // and note that it's a top-level to watch for errors
221 tokens.push([types.change, node, true, true]);
224 __tokenize: function(child, tokens){
225 var types = this.types;
226 var data = child.data;
227 switch(child.nodeType){
229 this._tokenize(child, tokens);
232 if(data.match(/[^\s\n]/) && (data.indexOf("{{") != -1 || data.indexOf("{%") != -1)){
233 var texts = ddt.tokenize(data);
234 for(var j = 0, text; text = texts[j]; j++){
235 if(typeof text == "string"){
236 tokens.push([types.text, text]);
242 tokens.push([child.nodeType, child]);
244 if(child.parentNode) child.parentNode.removeChild(child);
247 if(data.indexOf("{%") == 0){
248 var text = dojo.trim(data.slice(2, -2));
249 if(text.substr(0, 5) == "load "){
250 var parts = dd.text.pySplit(dojo.trim(text));
251 for(var i = 1, part; part = parts[i]; i++){
252 dojo["require"](part);
255 tokens.push([types.tag, text]);
257 if(data.indexOf("{{") == 0){
258 tokens.push([types.varr, dojo.trim(data.slice(2, -2))]);
260 if(child.parentNode) child.parentNode.removeChild(child);
266 dd.HtmlTemplate = dojo.extend(function(/*String|DOMNode|dojo._Url*/ obj){
267 // summary: Use this object for HTML templating
269 var node = dojo.byId(obj);
271 dojo.forEach(["class", "src", "href", "name", "value"], function(item){
272 ddh._attributes[item] = true;
278 if(typeof obj == "object"){
279 obj = ddt.getTemplateString(obj);
281 obj = ddh.getTemplate(obj);
285 var tokens = ddh.tokenize(obj.nodes);
287 this.tokens = tokens.slice(0);
290 var parser = new dd._HtmlParser(tokens);
291 this.nodelist = parser.parse();
295 _re: /\bdojo:([a-zA-Z0-9_]+)\b/g,
296 setClass: function(str){
297 this.getRootNode().className = str;
299 getRootNode: function(){
300 return this.rootNode;
302 getBuffer: function(){
303 return new dd.HtmlBuffer();
305 render: function(context, buffer){
306 buffer = buffer || this.getBuffer();
307 this.rootNode = null;
308 var output = this.nodelist.render(context || new dd.Context({}), buffer);
309 this.rootNode = buffer.getRootNode();
310 for(var i = 0, node; node = buffer._cache[i]; i++){
312 node._cache.length = 0;
317 unrender: function(context, buffer){
318 return this.nodelist.unrender(context, buffer);
322 dd.HtmlBuffer = dojo.extend(function(/*Node*/ parent){
323 // summary: Allows the manipulation of DOM
325 // Use this to append a child, change the parent, or
326 // change the attribute of the current node.
327 this._parent = parent;
331 concat: function(/*DOMNode*/ node){
332 var parent = this._parent;
333 if(node.parentNode && node.parentNode.tagName && parent && !parent._dirty){
337 if(node.nodeType == 1 && !this.rootNode){
338 this.rootNode = node || true;
342 if(node.nodeType == 3 && dojo.trim(node.data)){
343 throw new Error("Text should not exist outside of the root node in template");
347 if(this._closed && (node.nodeType != 3 || dojo.trim(node.data))){
348 throw new Error("Content should not exist outside of the root node in template");
351 if(node._drawn && node.parentNode == parent){
352 var caches = parent._cache;
354 for(var i = 0, cache; cache = caches[i]; i++){
355 this.onAddNode(cache);
356 parent.insertBefore(cache, node);
357 this.onAddNodeComplete(cache);
362 parent._dirty = false;
366 this._cache.push(parent);
368 parent._dirty = true;
369 parent._cache.push(node);
372 remove: function(obj){
373 if(typeof obj == "string"){
375 this._parent.removeAttribute(obj);
378 if(obj.nodeType == 1 && !this.getRootNode() && !this._removed){
379 this._removed = true;
385 obj.parentNode.removeChild(obj);
391 setAttribute: function(key, value){
393 this._parent.className = value;
394 }else if(key == "for"){
395 this._parent.htmlFor = value;
396 }else if(this._parent.setAttribute){
397 this._parent.setAttribute(key, value);
401 addEvent: function(context, type, fn, /*Array|Function*/ args){
402 if(!context.getThis()){ throw new Error("You must use Context.setObject(instance)"); }
403 this.onAddEvent(this.getParent(), type, fn);
405 if(dojo.isArray(args)){
406 resolved = function(e){
407 this[fn].apply(this, [e].concat(args));
410 return dojo.connect(this.getParent(), type, context.getThis(), resolved);
412 setParent: function(node, /*Boolean?*/ up, /*Boolean?*/ root){
413 if(!this._parent) this._parent = this._first = node;
415 if(up && root && node === this._first){
420 var parent = this._parent;
422 var ie = dojo.isIE && parent.tagName == "SCRIPT";
427 var caches = parent._cache;
428 for(var i = 0, cache; cache = caches[i]; i++){
429 if(cache !== parent){
430 this.onAddNode(cache);
432 script += cache.data;
434 parent.appendChild(cache);
436 this.onAddNodeComplete(cache);
440 parent._dirty = false;
443 parent.text = script;
447 this.onSetParent(node, up);
451 getParent: function(){
454 getRootNode: function(){
455 return this.rootNode;
457 onSetParent: function(node, up){
458 // summary: Stub called when setParent is used.
460 onAddNode: function(node){
461 // summary: Stub called before new nodes are added
463 onAddNodeComplete: function(node){
464 // summary: Stub called after new nodes are added
466 onRemoveNode: function(node){
467 // summary: Stub called when nodes are removed
469 onClone: function(/*DOMNode*/ from, /*DOMNode*/ to){
470 // summary: Stub called when a node is duplicated
472 onAddEvent: function(/*DOMNode*/ node, /*String*/ type, /*String*/ description){
473 // summary: Stub to call when you're adding an event
477 dd._HtmlNode = dojo.extend(function(node){
478 // summary: Places a node into DOM
479 this.contents = node;
482 render: function(context, buffer){
483 this._rendered = true;
484 return buffer.concat(this.contents);
486 unrender: function(context, buffer){
490 this._rendered = false;
491 return buffer.remove(this.contents);
493 clone: function(buffer){
494 return new this.constructor(this.contents);
498 dd._HtmlNodeList = dojo.extend(function(/*Node[]*/ nodes){
499 // summary: A list of any HTML-specific node object
501 // Any object that's used in the constructor or added
502 // through the push function much implement the
503 // render, unrender, and clone functions.
504 this.contents = nodes || [];
507 push: function(node){
508 this.contents.push(node);
510 unshift: function(node){
511 this.contents.unshift(node);
513 render: function(context, buffer, /*Node*/ instance){
514 buffer = buffer || dd.HtmlTemplate.prototype.getBuffer();
517 var parent = buffer.getParent();
519 for(var i = 0; i < this.contents.length; i++){
520 buffer = this.contents[i].render(context, buffer);
521 if(!buffer) throw new Error("Template node render functions must return their buffer");
524 buffer.setParent(parent);
528 dummyRender: function(context, buffer, asNode){
529 // summary: A really expensive way of checking to see how a rendering will look.
530 // Used in the ifchanged tag
531 var div = document.createElement("div");
533 var parent = buffer.getParent();
534 var old = parent._clone;
535 // Tell the clone system to attach itself to our new div
537 var nodelist = this.clone(buffer, div);
539 // Restore state if there was a previous clone
542 // Remove if there was no clone
543 parent._clone = null;
546 buffer = dd.HtmlTemplate.prototype.getBuffer();
547 nodelist.unshift(new dd.ChangeNode(div));
548 nodelist.push(new dd.ChangeNode(div, true));
549 nodelist.render(context, buffer);
552 return buffer.getRootNode();
555 var html = div.innerHTML;
556 return (dojo.isIE) ? html.replace(/\s*_(dirty|clone)="[^"]*"/g, "") : html;
558 unrender: function(context, buffer){
559 for(var i = 0; i < this.contents.length; i++){
560 buffer = this.contents[i].unrender(context, buffer);
561 if(!buffer) throw new Error("Template node render functions must return their buffer");
565 clone: function(buffer){
567 // Used to create an identical copy of a NodeList, useful for things like the for tag.
568 var parent = buffer.getParent();
569 var contents = this.contents;
570 var nodelist = new dd._HtmlNodeList();
572 for(var i = 0; i < contents.length; i++){
573 var clone = contents[i].clone(buffer);
574 if(clone instanceof dd.ChangeNode || clone instanceof dd._HtmlNode){
575 var item = clone.contents._clone;
577 clone.contents = item;
578 }else if(parent != clone.contents && clone instanceof dd._HtmlNode){
579 var node = clone.contents;
580 clone.contents = clone.contents.cloneNode(false);
581 buffer.onClone(node, clone.contents);
583 node._clone = clone.contents;
586 nodelist.push(clone);
589 for(var i = 0, clone; clone = cloned[i]; i++){
597 dd._HtmlVarNode = dojo.extend(function(str){
598 // summary: A node to be processed as a variable
600 // Will render an object that supports the render function
601 // and the getRootNode function
602 this.contents = new dd._Filter(str);
606 render: function(context, buffer){
607 this._rendered = true;
609 var str = this.contents.resolve(context);
610 if(str && str.render && str.getRootNode){
611 var root = this._curr = str.getRootNode();
612 var lists = this._lists;
613 var list = lists[root];
615 list = lists[root] = new dd._HtmlNodeList();
616 list.push(new dd.ChangeNode(buffer.getParent()));
617 list.push(new dd._HtmlNode(root));
619 list.push(new dd.ChangeNode(buffer.getParent()));
621 return list.render(context, buffer);
624 this._txt = document.createTextNode(str);
626 this._txt.data = str;
627 return buffer.concat(this._txt);
630 unrender: function(context, buffer){
634 this._rendered = false;
636 return this._lists[this._curr].unrender(context, buffer);
638 return buffer.remove(this._txt);
643 return new this.constructor(this.contents.getExpression());
647 dd.ChangeNode = dojo.extend(function(node, /*Boolean?*/ up, /*Bookean*/ root){
648 // summary: Changes the parent during render/unrender
649 this.contents = node;
654 render: function(context, buffer){
655 return buffer.setParent(this.contents, this.up, this.root);
657 unrender: function(context, buffer){
658 if(!this.contents.parentNode){
661 if(!buffer.getParent()){
664 return buffer.setParent(this.contents);
667 return new this.constructor(this.contents, this.up, this.root);
671 dd.AttributeNode = dojo.extend(function(key, value, nodelist){
672 // summary: Works on attributes
675 this.nodelist = nodelist || (new dd.Template(value)).nodelist;
680 render: function(context, buffer){
682 var value = this.nodelist.dummyRender(context);
684 if(value != this.contents){
685 this.contents = value;
686 return buffer.setAttribute(key, value);
689 this._rendered = true;
690 this.contents = value;
691 return buffer.setAttribute(key, value);
695 unrender: function(context, buffer){
696 return buffer.remove(this.key);
698 clone: function(buffer){
699 return new this.constructor(this.key, this.value, this.nodelist.clone(buffer));
703 dd._HtmlTextNode = dojo.extend(function(str){
704 // summary: Adds a straight text node without any processing
705 this.contents = document.createTextNode(str);
709 this.contents.data = data;
711 render: function(context, buffer){
712 return buffer.concat(this.contents);
714 unrender: function(context, buffer){
715 return buffer.remove(this.contents);
718 return new this.constructor(this.contents.data);
722 dd._HtmlParser = dojo.extend(function(tokens){
723 // summary: Turn a simple array into a set of objects
725 // This is also used by all tags to move through
726 // the list of nodes.
727 this.contents = tokens;
731 parse: function(/*Array?*/ stop_at){
732 var types = ddh.types;
733 var terminators = {};
734 var tokens = this.contents;
738 for(var i = 0; i < stop_at.length; i++){
739 terminators[stop_at[i]] = true;
741 var nodelist = new dd._HtmlNodeList();
742 while(this.i < tokens.length){
743 var token = tokens[this.i++];
745 var value = token[1];
746 if(type == types.custom){
747 nodelist.push(value);
748 }else if(type == types.change){
749 var changeNode = new dd.ChangeNode(value, token[2], token[3]);
750 value[changeNode.attr] = changeNode;
751 nodelist.push(changeNode);
752 }else if(type == types.attr){
753 var fn = ddt.getTag("attr:" + token[2], true);
755 nodelist.push(fn(null, token[2] + " " + token[3]));
756 }else if(dojo.isString(token[3]) && (token[3].indexOf("{%") != -1 || token[3].indexOf("{{") != -1)){
757 nodelist.push(new dd.AttributeNode(token[2], token[3]));
759 }else if(type == types.elem){
760 var fn = ddt.getTag("node:" + value.tagName.toLowerCase(), true);
762 // TODO: We need to move this to tokenization so that it's before the
763 // node and the parser can be passed here instead of null
764 nodelist.push(fn(null, value, value.tagName.toLowerCase()));
766 nodelist.push(new dd._HtmlNode(value));
767 }else if(type == types.varr){
768 nodelist.push(new dd._HtmlVarNode(value));
769 }else if(type == types.text){
770 nodelist.push(new dd._HtmlTextNode(value.data || value));
771 }else if(type == types.tag){
772 if(terminators[value]){
776 var cmd = value.split(/\s+/g);
779 var fn = ddt.getTag(cmd);
780 if(typeof fn != "function"){
781 throw new Error("Function not found for " + cmd);
783 var tpl = fn(this, value);
792 throw new Error("Could not find closing tag(s): " + stop_at.toString());
798 // summary: Used by tags to discover what token was found
799 var token = this.contents[this.i++];
800 return {type: token[0], text: token[1]};
802 skipPast: function(endtag){
803 return dd.Parser.prototype.skipPast.call(this, endtag);
805 getVarNodeConstructor: function(){
806 return dd._HtmlVarNode;
808 getTextNodeConstructor: function(){
809 return dd._HtmlTextNode;
811 getTemplate: function(/*String*/ loc){
812 return new dd.HtmlTemplate(ddh.getTemplate(loc));