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) {
269 if (!from.parentNode) {
270 // not sure why this is happening?
273 // assume 'to' doesnt have '1/3 nodetypes!
274 // not sure why, by from, parent node might not exist?
275 if (from.nodeType !=1 || from.tagName != to.tagName) {
276 Roo.log(["ReplaceChild" , from, to ]);
278 from.parentNode.replaceChild(to, from);
281 // compare attributes
282 var ar = Array.from(from.attributes);
283 for(var i = 0; i< ar.length;i++) {
284 if (to.hasAttribute(ar[i].name)) {
287 if (ar[i].name == 'id') { // always keep ids?
290 //if (ar[i].name == 'style') {
291 // throw "style removed?";
293 Roo.log("removeAttribute" + ar[i].name);
294 from.removeAttribute(ar[i].name);
297 for(var i = 0; i< ar.length;i++) {
298 if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
299 Roo.log("skipAttribute " + ar[i].name + '=' + to.getAttribute(ar[i].name));
302 Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
303 from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
306 var far = Array.from(from.childNodes);
307 var tar = Array.from(to.childNodes);
308 // if the lengths are different.. then it's probably a editable content change, rather than
309 // a change of the block definition..
311 // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
312 /*if (from.innerHTML == to.innerHTML) {
315 if (far.length != tar.length) {
316 from.innerHTML = to.innerHTML;
321 for(var i = 0; i < Math.max(tar.length, far.length); i++) {
322 if (i >= far.length) {
323 from.appendChild(tar[i]);
324 Roo.log(["add", tar[i]]);
326 } else if ( i >= tar.length) {
327 from.removeChild(far[i]);
328 Roo.log(["remove", far[i]]);
331 updateNode(far[i], tar[i]);
343 /** True to force the use of DOM instead of html fragments @type Boolean */
347 * Returns the markup for the passed Element(s) config
348 * @param {Object} o The Dom object spec (and children)
351 markup : function(o){
352 return createHtml(o);
356 * Applies a style specification to an element
357 * @param {String/HTMLElement} el The element to apply styles to
358 * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
359 * a function which returns such a specification.
361 applyStyles : function(el, styles){
364 if(typeof styles == "string"){
365 var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
367 while ((matches = re.exec(styles)) != null){
368 el.setStyle(matches[1], matches[2]);
370 }else if (typeof styles == "object"){
371 for (var style in styles){
372 el.setStyle(style, styles[style]);
374 }else if (typeof styles == "function"){
375 Roo.DomHelper.applyStyles(el, styles.call());
381 * Inserts an HTML fragment into the Dom
382 * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
383 * @param {HTMLElement} el The context element
384 * @param {String} html The HTML fragmenet
385 * @return {HTMLElement} The new node
387 insertHtml : function(where, el, html){
388 where = where.toLowerCase();
389 if(el.insertAdjacentHTML){
390 if(tableRe.test(el.tagName)){
392 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
398 el.insertAdjacentHTML('BeforeBegin', html);
399 return el.previousSibling;
401 el.insertAdjacentHTML('AfterBegin', html);
402 return el.firstChild;
404 el.insertAdjacentHTML('BeforeEnd', html);
407 el.insertAdjacentHTML('AfterEnd', html);
408 return el.nextSibling;
410 throw 'Illegal insertion point -> "' + where + '"';
412 var range = el.ownerDocument.createRange();
416 range.setStartBefore(el);
417 frag = range.createContextualFragment(html);
418 el.parentNode.insertBefore(frag, el);
419 return el.previousSibling;
422 range.setStartBefore(el.firstChild);
423 frag = range.createContextualFragment(html);
424 el.insertBefore(frag, el.firstChild);
425 return el.firstChild;
428 return el.firstChild;
432 range.setStartAfter(el.lastChild);
433 frag = range.createContextualFragment(html);
434 el.appendChild(frag);
441 range.setStartAfter(el);
442 frag = range.createContextualFragment(html);
443 el.parentNode.insertBefore(frag, el.nextSibling);
444 return el.nextSibling;
446 throw 'Illegal insertion point -> "' + where + '"';
450 * Creates new Dom element(s) and inserts them before el
451 * @param {String/HTMLElement/Element} el The context element
452 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
453 * @param {Boolean} returnElement (optional) true to return a Roo.Element
454 * @return {HTMLElement/Roo.Element} The new node
456 insertBefore : function(el, o, returnElement){
457 return this.doInsert(el, o, returnElement, "beforeBegin");
461 * Creates new Dom element(s) and inserts them after el
462 * @param {String/HTMLElement/Element} el The context element
463 * @param {Object} o The Dom object spec (and children)
464 * @param {Boolean} returnElement (optional) true to return a Roo.Element
465 * @return {HTMLElement/Roo.Element} The new node
467 insertAfter : function(el, o, returnElement){
468 return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
472 * Creates new Dom element(s) and inserts them as the first child of el
473 * @param {String/HTMLElement/Element} el The context element
474 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
475 * @param {Boolean} returnElement (optional) true to return a Roo.Element
476 * @return {HTMLElement/Roo.Element} The new node
478 insertFirst : function(el, o, returnElement){
479 return this.doInsert(el, o, returnElement, "afterBegin");
483 doInsert : function(el, o, returnElement, pos, sibling){
486 if(this.useDom || o.ns){
487 newNode = createDom(o, null);
488 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
490 var html = createHtml(o);
491 newNode = this.insertHtml(pos, el, html);
493 return returnElement ? Roo.get(newNode, true) : newNode;
497 * Creates new Dom element(s) and appends them to el
498 * @param {String/HTMLElement/Element} el The context element
499 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
500 * @param {Boolean} returnElement (optional) true to return a Roo.Element
501 * @return {HTMLElement/Roo.Element} The new node
503 append : function(el, o, returnElement){
506 if(this.useDom || o.ns){
507 newNode = createDom(o, null);
508 el.appendChild(newNode);
510 var html = createHtml(o);
511 newNode = this.insertHtml("beforeEnd", el, html);
513 return returnElement ? Roo.get(newNode, true) : newNode;
517 * Creates new Dom element(s) and overwrites the contents of el with them
518 * @param {String/HTMLElement/Element} el The context element
519 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
520 * @param {Boolean} returnElement (optional) true to return a Roo.Element
521 * @return {HTMLElement/Roo.Element} The new node
523 overwrite : function(el, o, returnElement)
528 while (el.childNodes.length) {
529 el.removeChild(el.firstChild);
533 el.innerHTML = createHtml(o);
536 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
540 * Creates a new Roo.DomHelper.Template from the Dom object spec
541 * @param {Object} o The Dom object spec (and children)
542 * @return {Roo.DomHelper.Template} The new template
544 createTemplate : function(o){
545 var html = createHtml(o);
546 return new Roo.Template(html);
549 * Updates the first element with the spec from the o (replacing if necessary)
550 * This iterates through the children, and updates attributes / children etc..
551 * @param {String/HTMLElement/Element} el The context element
552 * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
555 update : function(el, o)
557 updateNode(Roo.getDom(el), createDom(o));