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);
249 // this is a bit like the react update code...
252 var updateNode = function(from, to)
254 // should we handle non-standard elements?
256 if (from.nodeType != to.nodeType) {
257 from.parentNode.replaceChild(to, from);
260 if (from.nodeType == 3) {
261 // assume it's text?!
262 if (from.data == to.data) {
269 // assume 'to' doesnt have '1/3 nodetypes!
270 if (from.nodeType !=1 || from.tagName != to.tagName) {
271 from.parentNode.replaceChild(to, from);
274 // compare attributes
275 var ar = Array.from(from.attributes);
276 for(var i = 0; i< ar.length;i++) {
277 if (to.hasAttribute(ar[i].name)) {
280 from.removeAttribute(ar[i].name);
283 for(var i = 0; i< ar.length;i++) {
284 if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
287 from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
290 var far = Array.from(from.childNodes);
291 var tar = Array.from(to.childNodes);
292 // if the lengths are different.. then it's probably a editable content change, rather than
293 // a change of the block definition..
294 if (from.innerHTML == to.innerHTML) {
297 if (far.length != tar.length) {
298 from.innerHTML = to.innerHTML;
302 for(var i = 0; i < far.length; i++) {
303 updateNode(far[i], tar[i]);
312 /** True to force the use of DOM instead of html fragments @type Boolean */
316 * Returns the markup for the passed Element(s) config
317 * @param {Object} o The Dom object spec (and children)
320 markup : function(o){
321 return createHtml(o);
325 * Applies a style specification to an element
326 * @param {String/HTMLElement} el The element to apply styles to
327 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
328 * a function which returns such a specification.
330 applyStyles : function(el, styles){
333 if(typeof styles == "string"){
334 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
336 while ((matches = re.exec(styles)) != null){
337 el.setStyle(matches[1], matches[2]);
339 }else if (typeof styles == "object"){
340 for (var style in styles){
341 el.setStyle(style, styles[style]);
343 }else if (typeof styles == "function"){
344 Roo.DomHelper.applyStyles(el, styles.call());
350 * Inserts an HTML fragment into the Dom
351 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
352 * @param {HTMLElement} el The context element
353 * @param {String} html The HTML fragmenet
354 * @return {HTMLElement} The new node
356 insertHtml : function(where, el, html){
357 where = where.toLowerCase();
358 if(el.insertAdjacentHTML){
359 if(tableRe.test(el.tagName)){
361 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
367 el.insertAdjacentHTML('BeforeBegin', html);
368 return el.previousSibling;
370 el.insertAdjacentHTML('AfterBegin', html);
371 return el.firstChild;
373 el.insertAdjacentHTML('BeforeEnd', html);
376 el.insertAdjacentHTML('AfterEnd', html);
377 return el.nextSibling;
379 throw 'Illegal insertion point -> "' + where + '"';
381 var range = el.ownerDocument.createRange();
385 range.setStartBefore(el);
386 frag = range.createContextualFragment(html);
387 el.parentNode.insertBefore(frag, el);
388 return el.previousSibling;
391 range.setStartBefore(el.firstChild);
392 frag = range.createContextualFragment(html);
393 el.insertBefore(frag, el.firstChild);
394 return el.firstChild;
397 return el.firstChild;
401 range.setStartAfter(el.lastChild);
402 frag = range.createContextualFragment(html);
403 el.appendChild(frag);
410 range.setStartAfter(el);
411 frag = range.createContextualFragment(html);
412 el.parentNode.insertBefore(frag, el.nextSibling);
413 return el.nextSibling;
415 throw 'Illegal insertion point -> "' + where + '"';
419 * Creates new Dom element(s) and inserts them before el
420 * @param {String/HTMLElement/Element} el The context element
421 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
422 * @param {Boolean} returnElement (optional) true to return a Roo.Element
423 * @return {HTMLElement/Roo.Element} The new node
425 insertBefore : function(el, o, returnElement){
426 return this.doInsert(el, o, returnElement, "beforeBegin");
430 * Creates new Dom element(s) and inserts them after el
431 * @param {String/HTMLElement/Element} el The context element
432 * @param {Object} o The Dom object spec (and children)
433 * @param {Boolean} returnElement (optional) true to return a Roo.Element
434 * @return {HTMLElement/Roo.Element} The new node
436 insertAfter : function(el, o, returnElement){
437 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
441 * Creates new Dom element(s) and inserts them as the first child of el
442 * @param {String/HTMLElement/Element} el The context element
443 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
444 * @param {Boolean} returnElement (optional) true to return a Roo.Element
445 * @return {HTMLElement/Roo.Element} The new node
447 insertFirst : function(el, o, returnElement){
448 return this.doInsert(el, o, returnElement, "afterBegin");
452 doInsert : function(el, o, returnElement, pos, sibling){
455 if(this.useDom || o.ns){
456 newNode = createDom(o, null);
457 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
459 var html = createHtml(o);
460 newNode = this.insertHtml(pos, el, html);
462 return returnElement ? Roo.get(newNode, true) : newNode;
466 * Creates new Dom element(s) and appends them to el
467 * @param {String/HTMLElement/Element} el The context element
468 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
469 * @param {Boolean} returnElement (optional) true to return a Roo.Element
470 * @return {HTMLElement/Roo.Element} The new node
472 append : function(el, o, returnElement){
475 if(this.useDom || o.ns){
476 newNode = createDom(o, null);
477 el.appendChild(newNode);
479 var html = createHtml(o);
480 newNode = this.insertHtml("beforeEnd", el, html);
482 return returnElement ? Roo.get(newNode, true) : newNode;
486 * Creates new Dom element(s) and overwrites the contents of el with them
487 * @param {String/HTMLElement/Element} el The context element
488 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
489 * @param {Boolean} returnElement (optional) true to return a Roo.Element
490 * @return {HTMLElement/Roo.Element} The new node
492 overwrite : function(el, o, returnElement)
497 while (el.childNodes.length) {
498 el.removeChild(el.firstChild);
502 el.innerHTML = createHtml(o);
505 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
509 * Creates a new Roo.DomHelper.Template from the Dom object spec
510 * @param {Object} o The Dom object spec (and children)
511 * @return {Roo.DomHelper.Template} The new template
513 createTemplate : function(o){
514 var html = createHtml(o);
515 return new Roo.Template(html);
518 * Updates the first element with the spec from the o (replacing if necessary)
519 * This iterates through the children, and updates attributes / children etc..
520 * @param {String/HTMLElement/Element} el The context element
521 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
524 update : function(el, o)
526 updateNode(Roo.getDom(el), createDom(o));