4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 // nasty IE9 hack - what a pile of crap that is..
15 if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
16 Range.prototype.createContextualFragment = function (html) {
17 var doc = window.document;
18 var container = doc.createElement("div");
19 container.innerHTML = html;
20 var frag = doc.createDocumentFragment(), n;
21 while ((n = container.firstChild)) {
29 * @class Roo.DomHelper
30 * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
31 * For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
34 Roo.DomHelper = function(){
35 var tempTableEl = null;
36 var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
37 var tableRe = /^table|tbody|tr|td$/i;
39 // build as innerHTML where available
41 var createHtml = function(o){
42 if(typeof o == 'string'){
51 if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
54 if(typeof s == "function"){
57 if(typeof s == "string"){
58 b += ' style="' + s + '"';
59 }else if(typeof s == "object"){
62 if(typeof s[key] != "function"){
63 b += key + ":" + s[key] + ";";
70 b += ' class="' + o["cls"] + '"';
71 }else if(attr == "htmlFor"){
72 b += ' for="' + o["htmlFor"] + '"';
74 b += " " + attr + '="' + o[attr] + '"';
78 if(emptyTags.test(o.tag)){
82 var cn = o.children || o.cn;
84 //http://bugs.kde.org/show_bug.cgi?id=71506
85 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
86 for(var i = 0, len = cn.length; i < len; i++) {
87 b += createHtml(cn[i], b);
90 b += createHtml(cn, b);
96 b += "</" + o.tag + ">";
103 var createDom = function(o, parentNode){
105 // defininition craeted..
107 if (o.ns && o.ns != 'html') {
109 if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
110 xmlns[o.ns] = o.xmlns;
113 if (typeof(xmlns[o.ns]) == 'undefined') {
114 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
120 if (typeof(o) == 'string') {
121 return parentNode.appendChild(document.createTextNode(o));
123 o.tag = o.tag || div;
124 if (o.ns && Roo.isIE) {
126 o.tag = o.ns + ':' + o.tag;
129 var el = ns ? document.createElementNS( ns, o.tag||'div') : document.createElement(o.tag||'div');
130 var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
133 if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" ||
134 attr == "style" || typeof o[attr] == "function") { continue; }
136 if(attr=="cls" && Roo.isIE){
137 el.className = o["cls"];
139 if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
145 Roo.DomHelper.applyStyles(el, o.style);
146 var cn = o.children || o.cn;
148 //http://bugs.kde.org/show_bug.cgi?id=71506
149 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
150 for(var i = 0, len = cn.length; i < len; i++) {
151 createDom(cn[i], el);
158 el.innerHTML = o.html;
161 parentNode.appendChild(el);
166 var ieTable = function(depth, s, h, e){
167 tempTableEl.innerHTML = [s, h, e].join('');
168 var i = -1, el = tempTableEl;
169 while(++i < depth && el.firstChild){
175 // kill repeat to save bytes
185 * Nasty code for IE's broken table implementation
187 var insertIntoTable = function(tag, where, el, html){
189 tempTableEl = document.createElement('div');
194 if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
197 if(where == 'beforebegin'){
201 before = el.nextSibling;
204 node = ieTable(4, trs, html, tre);
206 else if(tag == 'tr'){
207 if(where == 'beforebegin'){
210 node = ieTable(3, tbs, html, tbe);
211 } else if(where == 'afterend'){
212 before = el.nextSibling;
214 node = ieTable(3, tbs, html, tbe);
216 if(where == 'afterbegin'){
217 before = el.firstChild;
219 node = ieTable(4, trs, html, tre);
221 } else if(tag == 'tbody'){
222 if(where == 'beforebegin'){
225 node = ieTable(2, ts, html, te);
226 } else if(where == 'afterend'){
227 before = el.nextSibling;
229 node = ieTable(2, ts, html, te);
231 if(where == 'afterbegin'){
232 before = el.firstChild;
234 node = ieTable(3, tbs, html, tbe);
237 if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
240 if(where == 'afterbegin'){
241 before = el.firstChild;
243 node = ieTable(2, ts, html, te);
245 el.insertBefore(node, before);
250 /** True to force the use of DOM instead of html fragments @type Boolean */
254 * Returns the markup for the passed Element(s) config
255 * @param {Object} o The Dom object spec (and children)
258 markup : function(o){
259 return createHtml(o);
263 * Applies a style specification to an element
264 * @param {String/HTMLElement} el The element to apply styles to
265 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
266 * a function which returns such a specification.
268 applyStyles : function(el, styles){
271 if(typeof styles == "string"){
272 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
274 while ((matches = re.exec(styles)) != null){
275 el.setStyle(matches[1], matches[2]);
277 }else if (typeof styles == "object"){
278 for (var style in styles){
279 el.setStyle(style, styles[style]);
281 }else if (typeof styles == "function"){
282 Roo.DomHelper.applyStyles(el, styles.call());
288 * Inserts an HTML fragment into the Dom
289 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
290 * @param {HTMLElement} el The context element
291 * @param {String} html The HTML fragmenet
292 * @return {HTMLElement} The new node
294 insertHtml : function(where, el, html){
295 where = where.toLowerCase();
296 if(el.insertAdjacentHTML){
297 if(tableRe.test(el.tagName)){
299 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
305 el.insertAdjacentHTML('BeforeBegin', html);
306 return el.previousSibling;
308 el.insertAdjacentHTML('AfterBegin', html);
309 return el.firstChild;
311 el.insertAdjacentHTML('BeforeEnd', html);
314 el.insertAdjacentHTML('AfterEnd', html);
315 return el.nextSibling;
317 throw 'Illegal insertion point -> "' + where + '"';
319 var range = el.ownerDocument.createRange();
323 range.setStartBefore(el);
324 frag = range.createContextualFragment(html);
325 el.parentNode.insertBefore(frag, el);
326 return el.previousSibling;
329 range.setStartBefore(el.firstChild);
330 frag = range.createContextualFragment(html);
331 el.insertBefore(frag, el.firstChild);
332 return el.firstChild;
335 return el.firstChild;
339 range.setStartAfter(el.lastChild);
340 frag = range.createContextualFragment(html);
341 el.appendChild(frag);
348 range.setStartAfter(el);
349 frag = range.createContextualFragment(html);
350 el.parentNode.insertBefore(frag, el.nextSibling);
351 return el.nextSibling;
353 throw 'Illegal insertion point -> "' + where + '"';
357 * Creates new Dom element(s) and inserts them before el
358 * @param {String/HTMLElement/Element} el The context element
359 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
360 * @param {Boolean} returnElement (optional) true to return a Roo.Element
361 * @return {HTMLElement/Roo.Element} The new node
363 insertBefore : function(el, o, returnElement){
364 return this.doInsert(el, o, returnElement, "beforeBegin");
368 * Creates new Dom element(s) and inserts them after el
369 * @param {String/HTMLElement/Element} el The context element
370 * @param {Object} o The Dom object spec (and children)
371 * @param {Boolean} returnElement (optional) true to return a Roo.Element
372 * @return {HTMLElement/Roo.Element} The new node
374 insertAfter : function(el, o, returnElement){
375 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
379 * Creates new Dom element(s) and inserts them as the first child of el
380 * @param {String/HTMLElement/Element} el The context element
381 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
382 * @param {Boolean} returnElement (optional) true to return a Roo.Element
383 * @return {HTMLElement/Roo.Element} The new node
385 insertFirst : function(el, o, returnElement){
386 return this.doInsert(el, o, returnElement, "afterBegin");
390 doInsert : function(el, o, returnElement, pos, sibling){
393 if(this.useDom || o.ns){
394 newNode = createDom(o, null);
395 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
397 var html = createHtml(o);
398 newNode = this.insertHtml(pos, el, html);
400 return returnElement ? Roo.get(newNode, true) : newNode;
404 * Creates new Dom element(s) and appends them to el
405 * @param {String/HTMLElement/Element} el The context element
406 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
407 * @param {Boolean} returnElement (optional) true to return a Roo.Element
408 * @return {HTMLElement/Roo.Element} The new node
410 append : function(el, o, returnElement){
413 if(this.useDom || o.ns){
414 newNode = createDom(o, null);
415 el.appendChild(newNode);
417 var html = createHtml(o);
418 newNode = this.insertHtml("beforeEnd", el, html);
420 return returnElement ? Roo.get(newNode, true) : newNode;
424 * Creates new Dom element(s) and overwrites the contents of el with them
425 * @param {String/HTMLElement/Element} el The context element
426 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
427 * @param {Boolean} returnElement (optional) true to return a Roo.Element
428 * @return {HTMLElement/Roo.Element} The new node
430 overwrite : function(el, o, returnElement){
434 while (el.childNodes.length) {
435 el.removeChild(el.firstChild);
439 el.innerHTML = createHtml(o);
442 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
446 * Creates a new Roo.DomHelper.Template from the Dom object spec
447 * @param {Object} o The Dom object spec (and children)
448 * @return {Roo.DomHelper.Template} The new template
450 createTemplate : function(o){
451 var html = createHtml(o);
452 return new Roo.Template(html);