/**
* Sets or Returns the value the dom attribute value
- * @param {String} name The attribute name
+ * @param {String|Object} name The attribute name (or object to set multiple attributes)
* @param {String} value (optional) The value to set the attribute to
* @return {String} The attribute value
*/
this.dom.setAttribute(name, arguments[1]);
return arguments[1];
}
+ if (typeof(name) == 'object') {
+ for(var i in name) {
+ this.attr(i, name[i]);
+ }
+ return name;
+ }
+
+
if (!this.dom.hasAttribute(name)) {
return undefined;
}
* @class Roo.XComponent
* A delayed Element creator...
* Or a way to group chunks of interface together.
+ * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
+ * used in conjunction with XComponent.build() it will create an instance of each element,
+ * then call addxtype() to build the User interface.
*
* Mypart.xyx = new Roo.XComponent({
* It can be used to build a big heiracy, with parent etc.
* or you can just use this to render a single compoent to a dom element
* MYPART.render(Roo.Element | String(id) | dom_element )
+ *
+ *
+ * Usage patterns.
+ *
+ * Classic Roo
+ *
+ * Roo is designed primarily as a single page application, so the UI build for a standard interface will
+ * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
+ *
+ * Each sub module is expected to have a parent pointing to the class name of it's parent module.
+ *
+ * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
+ * - if mulitple topModules exist, the last one is defined as the top module.
+ *
+ * Embeded Roo
+ *
+ * When the top level or multiple modules are to embedded into a existing HTML page,
+ * the parent element can container '#id' of the element where the module will be drawn.
+ *
+ * Bootstrap Roo
+ *
+ * Unlike classic Roo, the bootstrap tends not to be used as a single page.
+ * it relies more on a include mechanism, where sub modules are included into an outer page.
+ * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
+ *
+ * Bootstrap Roo Included elements
+ *
+ * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
+ * hence confusing the component builder as it thinks there are multiple top level elements.
+ *
+ *
*
* @extends Roo.util.Observable
* @constructor
el = el || false;
var hp = this.parent ? 1 : 0;
+ Roo.log(this);
if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
// if parent is a '#.....' string, then let's use that..
- var ename = this.parent.substr(1)
- this.parent = (this.parent == '#bootstrap') ? { el : true} : false; // flags it as a top module...
- el = Roo.get(ename);
+ var ename = this.parent.substr(1);
+ this.parent = false;
+ Roo.log(ename);
+ switch (ename) {
+ case 'bootstrap-body' :
+ if (typeof(Roo.bootstrap.Body) != 'undefined') {
+ this.parent = { el : new Roo.bootstrap.Body() };
+ Roo.log("setting el to doc body");
+
+ } else {
+ throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
+ }
+ break;
+ case 'bootstrap':
+ this.parent = { el : true};
+ // fall through
+ default:
+ el = Roo.get(ename);
+ break;
+ }
+
+
if (!el && !this.parent) {
Roo.log("Warning - element can not be found :#" + ename );
return;
}
}
+ Roo.log("EL:");Roo.log(el);
+ Roo.log("this.parent.el:");Roo.log(this.parent.el);
+
var tree = this._tree ? this._tree() : this.tree();
+ // altertive root elements ??? - we need a better way to indicate these.
+ var is_alt = (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
+ (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
- if (!this.parent && typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) {
+ if (!this.parent && is_alt) {
//el = Roo.get(document.body);
this.parent = { el : true };
}
autoSize : function(){
//this.el.beginMeasure();
this.textEl.setWidth(1);
- this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr"));
+ /*
+ * #2804 [new] Tabs in Roojs
+ * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
+ */
+ this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
//this.el.endMeasure();
},
//var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
// this copies styles from the containing element into thsi one..
// not sure why we need all of this..
- var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
- ss['background-attachment'] = 'fixed'; // w3c
+ //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+
+ //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+ //ss['background-attachment'] = 'fixed'; // w3c
dbody.bgProperties = 'fixed'; // ie
- Roo.DomHelper.applyStyles(dbody, ss);
+ //Roo.DomHelper.applyStyles(dbody, ss);
Roo.EventManager.on(this.doc, {
//'mousedown': this.onEditorEvent,
'mouseup': this.onEditorEvent,
}
// remove - but keep children..
- if (node.tagName.toLowerCase().match(/^(meta|link|span|\\?xml:|st1:|o:|font)/)) {
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
while (node.childNodes.length) {
var cn = node.childNodes[0];
node.removeChild(cn);
if (cls.match(/Mso[a-zA-Z]+/)) {
return;
}
- cna.push(cn);
+ cna.push(cls);
});
node.className = cna.length ? cna.join(' ') : '';
if (!cna.length) {
if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
return ret;
}
- if (['PRE', 'TEXTAREA', 'TD', 'A'].indexOf(tagName) > -1) { // or code?
+ if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
nopadtext = true;
}
var currentElementChild = currentElement.childNodes.item(i);
var allText = true;
var innerHTML = '';
+ lastnode = '';
while (currentElementChild) {
// Formatting code (indent the tree so it looks nice on the screen)
-
+ var nopad = nopadtext;
+ if (lastnode == 'SPAN') {
+ nopad = true;
+ }
+ // text
if (currentElementChild.nodeName == '#text') {
var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
- if (!nopadtext && toadd.length > 80) {
+ if (!nopad && toadd.length > 80) {
innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
}
innerHTML += toadd;
i++;
currentElementChild = currentElement.childNodes.item(i);
+ lastNode = '';
continue;
- }
+ }
allText = false;
- innerHTML += nopadtext ? '' : "\n" + (new Array( depth + 1 )).join( " " );
+
+ innerHTML += nopad ? '' : "\n" + (new Array( depth + 1 )).join( " " );
// Recursively traverse the tree structure of the child node
innerHTML += this.domToHTML(currentElementChild, depth+1, nopadtext);
+ lastnode = currentElementChild.nodeName;
i++;
currentElementChild=currentElement.childNodes.item(i);
}
c.select('[style]').each(function(s) {
s.dom.style.removeProperty(a.actiontype);
});
-
+ editorcore.syncValue();
},
tabIndex:-1
});
html: 'Remove MS Word Formating',
handler: function(a,b) {
editorcore.cleanWord();
-
+ editorcore.syncValue();
},
tabIndex:-1
});
c.select('[style]').each(function(s) {
s.dom.removeAttribute('style');
});
-
+ editorcore.syncValue();
},
tabIndex:-1
});
html: 'Tidy HTML Source',
handler: function(a,b) {
editorcore.doc.body.innerHTML = editorcore.domToHTML();
-
+ editorcore.syncValue();
},
tabIndex:-1
});
projects / roojs1 / blobdiff