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?
255 Roo.log(["UpdateNode" , from, to]);
256 if (from.nodeType != to.nodeType) {
257 Roo.log(["ReplaceChild - mismatch notType" , to, from ]);
258 from.parentNode.replaceChild(to, from);
261 if (from.nodeType == 3) {
262 // assume it's text?!
263 if (from.data == to.data) {
270 // assume 'to' doesnt have '1/3 nodetypes!
271 if (from.nodeType !=1 || from.tagName != to.tagName) {
272 Roo.log(["ReplaceChild" , from, to ]);
273 from.parentNode.replaceChild(to, from);
276 // compare attributes
277 var ar = Array.from(from.attributes);
278 for(var i = 0; i< ar.length;i++) {
279 if (to.hasAttribute(ar[i].name)) {
282 if (ar[i].name == 'id') { // always keep ids?
285 //if (ar[i].name == 'style') {
286 // throw "style removed?";
288 Roo.log("removeAttribute" + ar[i].name);
289 from.removeAttribute(ar[i].name);
292 for(var i = 0; i< ar.length;i++) {
293 if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
294 Roo.log("skipAttribute " + ar[i].name + '=' + to.getAttribute(ar[i].name));
297 Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
298 from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
301 var far = Array.from(from.childNodes);
302 var tar = Array.from(to.childNodes);
303 // if the lengths are different.. then it's probably a editable content change, rather than
304 // a change of the block definition..
306 // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
307 /*if (from.innerHTML == to.innerHTML) {
310 if (far.length != tar.length) {
311 from.innerHTML = to.innerHTML;
316 for(var i = 0; i < Math.max(tar.length, far.length); i++) {
317 if (i >= far.length) {
318 from.appendChild(tar[i]);
319 Roo.log(["add", tar[i]]);
321 } else if ( i >= tar.length) {
322 from.removeChild(far[i]);
323 Roo.log(["remove", far[i]]);
326 updateNode(far[i], tar[i]);
338 /** True to force the use of DOM instead of html fragments @type Boolean */
342 * Returns the markup for the passed Element(s) config
343 * @param {Object} o The Dom object spec (and children)
346 markup : function(o){
347 return createHtml(o);
351 * Applies a style specification to an element
352 * @param {String/HTMLElement} el The element to apply styles to
353 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
354 * a function which returns such a specification.
356 applyStyles : function(el, styles){
359 if(typeof styles == "string"){
360 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
362 while ((matches = re.exec(styles)) != null){
363 el.setStyle(matches[1], matches[2]);
365 }else if (typeof styles == "object"){
366 for (var style in styles){
367 el.setStyle(style, styles[style]);
369 }else if (typeof styles == "function"){
370 Roo.DomHelper.applyStyles(el, styles.call());
376 * Inserts an HTML fragment into the Dom
377 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
378 * @param {HTMLElement} el The context element
379 * @param {String} html The HTML fragmenet
380 * @return {HTMLElement} The new node
382 insertHtml : function(where, el, html){
383 where = where.toLowerCase();
384 if(el.insertAdjacentHTML){
385 if(tableRe.test(el.tagName)){
387 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
393 el.insertAdjacentHTML('BeforeBegin', html);
394 return el.previousSibling;
396 el.insertAdjacentHTML('AfterBegin', html);
397 return el.firstChild;
399 el.insertAdjacentHTML('BeforeEnd', html);
402 el.insertAdjacentHTML('AfterEnd', html);
403 return el.nextSibling;
405 throw 'Illegal insertion point -> "' + where + '"';
407 var range = el.ownerDocument.createRange();
411 range.setStartBefore(el);
412 frag = range.createContextualFragment(html);
413 el.parentNode.insertBefore(frag, el);
414 return el.previousSibling;
417 range.setStartBefore(el.firstChild);
418 frag = range.createContextualFragment(html);
419 el.insertBefore(frag, el.firstChild);
420 return el.firstChild;
423 return el.firstChild;
427 range.setStartAfter(el.lastChild);
428 frag = range.createContextualFragment(html);
429 el.appendChild(frag);
436 range.setStartAfter(el);
437 frag = range.createContextualFragment(html);
438 el.parentNode.insertBefore(frag, el.nextSibling);
439 return el.nextSibling;
441 throw 'Illegal insertion point -> "' + where + '"';
445 * Creates new Dom element(s) and inserts them before el
446 * @param {String/HTMLElement/Element} el The context element
447 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
448 * @param {Boolean} returnElement (optional) true to return a Roo.Element
449 * @return {HTMLElement/Roo.Element} The new node
451 insertBefore : function(el, o, returnElement){
452 return this.doInsert(el, o, returnElement, "beforeBegin");
456 * Creates new Dom element(s) and inserts them after el
457 * @param {String/HTMLElement/Element} el The context element
458 * @param {Object} o The Dom object spec (and children)
459 * @param {Boolean} returnElement (optional) true to return a Roo.Element
460 * @return {HTMLElement/Roo.Element} The new node
462 insertAfter : function(el, o, returnElement){
463 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
467 * Creates new Dom element(s) and inserts them as the first child of el
468 * @param {String/HTMLElement/Element} el The context element
469 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
470 * @param {Boolean} returnElement (optional) true to return a Roo.Element
471 * @return {HTMLElement/Roo.Element} The new node
473 insertFirst : function(el, o, returnElement){
474 return this.doInsert(el, o, returnElement, "afterBegin");
478 doInsert : function(el, o, returnElement, pos, sibling){
481 if(this.useDom || o.ns){
482 newNode = createDom(o, null);
483 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
485 var html = createHtml(o);
486 newNode = this.insertHtml(pos, el, html);
488 return returnElement ? Roo.get(newNode, true) : newNode;
492 * Creates new Dom element(s) and appends them to el
493 * @param {String/HTMLElement/Element} el The context element
494 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
495 * @param {Boolean} returnElement (optional) true to return a Roo.Element
496 * @return {HTMLElement/Roo.Element} The new node
498 append : function(el, o, returnElement){
501 if(this.useDom || o.ns){
502 newNode = createDom(o, null);
503 el.appendChild(newNode);
505 var html = createHtml(o);
506 newNode = this.insertHtml("beforeEnd", el, html);
508 return returnElement ? Roo.get(newNode, true) : newNode;
512 * Creates new Dom element(s) and overwrites the contents of el with them
513 * @param {String/HTMLElement/Element} el The context element
514 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
515 * @param {Boolean} returnElement (optional) true to return a Roo.Element
516 * @return {HTMLElement/Roo.Element} The new node
518 overwrite : function(el, o, returnElement)
523 while (el.childNodes.length) {
524 el.removeChild(el.firstChild);
528 el.innerHTML = createHtml(o);
531 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
535 * Creates a new Roo.DomHelper.Template from the Dom object spec
536 * @param {Object} o The Dom object spec (and children)
537 * @return {Roo.DomHelper.Template} The new template
539 createTemplate : function(o){
540 var html = createHtml(o);
541 return new Roo.Template(html);
544 * Updates the first element with the spec from the o (replacing if necessary)
545 * This iterates through the children, and updates attributes / children etc..
546 * @param {String/HTMLElement/Element} el The context element
547 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
550 update : function(el, o)
552 updateNode(Roo.getDom(el), createDom(o));