-
+ skip_children = false;
// render the element if it's not BODY.
if (tree.xtype != 'Body') {
var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
+
+ // there is a scenario where some of the child elements are flexy:if (and all of the same type)
+ // and are not displayed -this causes this to use up the wrong element when matching.
+ // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
+
+
if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
// Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
//echild.dom.removeAttribute('xtype');
} else {
Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
-
+ Roo.log(self_cntr_el);
+ Roo.log(echild);
+ Roo.log(cn);
}
}
-
+
// if object has flexy:if - then it may or may not be rendered.
if (build_from_html && has_flexy && !cn.el && cn.can_build_overlaid) {
// skip a flexy if element.
Roo.log('skipping render');
+ Roo.log(tree);
+ if (!cn.el) {
+ Roo.log('skipping all children');
+ skip_children = true;
+ }
+
} else {
// actually if flexy:foreach is found, we really want to create
//Roo.log(items.length);
// add the items..
- for(var i =0;i < items.length;i++) {
- nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+ if (!skip_children) {
+ for(var i =0;i < items.length;i++) {
+ nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+ }
}
-
+
cn.items = nitems;
return cn;
* @class Roo.bootstrap.Column
* @extends Roo.bootstrap.Component
* Bootstrap Column class
- * @cfg {Number} xs colspan out of 12 for mobile-sized screens
- * @cfg {Number} sm colspan out of 12 for tablet-sized screens
- * @cfg {Number} md colspan out of 12 for computer-sized screens
- * @cfg {Number} lg colspan out of 12 for large computer-sized screens
+ * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
+ * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
+ * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
+ * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
+ * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
+ * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
+ * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
+ * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
+ *
+ *
+ * @cfg {Boolean} hidden (true|false) hide the element
+ * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
+ * @cfg {String} fa (ban|check|...) font awesome icon
+ * @cfg {Number} fasize (1|2|....) font awsome size
+
+ * @cfg {String} icon (info-sign|check|...) glyphicon name
+
* @cfg {String} html content of column.
*
* @constructor
Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component, {
- xs: null,
- sm: null,
- md: null,
- lg: null,
+ xs: false,
+ sm: false,
+ md: false,
+ lg: false,
+ xsoff: false,
+ smoff: false,
+ mdoff: false,
+ lgoff: false,
html: '',
offset: 0,
+ alert: false,
+ fa: false,
+ icon : false,
+ hidden : false,
+ fasize : 1,
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
var settings=this;
['xs','sm','md','lg'].map(function(size){
- if (settings[size]) {
- cfg.cls += ' col-' + size + '-' + settings[size];
+ //Roo.log( size + ':' + settings[size]);
+
+ if (settings[size+'off'] !== false) {
+ cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
+ }
+
+ if (settings[size] === false) {
+ return;
}
+ Roo.log(settings[size]);
+ if (!settings[size]) { // 0 = hidden
+ cfg.cls += ' hidden-' + size;
+ return;
+ }
+ cfg.cls += ' col-' + size + '-' + settings[size];
+
});
+
+ if (this.hidden) {
+ cfg.cls += ' hidden';
+ }
+
+ if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
+ cfg.cls +=' alert alert-' + this.alert;
+ }
+
+
if (this.html.length) {
cfg.html = this.html;
}
-
+ if (this.fa) {
+ var fasize = '';
+ if (this.fasize > 1) {
+ fasize = ' fa-' + this.fasize + 'x';
+ }
+ cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
+
+
+ }
+ if (this.icon) {
+ cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
+ }
+
return cfg;
}
* @cfg {String} footer content of footer (for panel)
* @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
* @cfg {String} tag (header|aside|section) type of HTML tag.
+ * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
+ * @cfg {String} fa (ban|check|...) font awesome icon
+ * @cfg {String} icon (info-sign|check|...) glyphicon name
+ * @cfg {Boolean} hidden (true|false) hide the element
*
* @constructor
footer : '',
sticky: '',
tag : false,
+ alert : false,
+ fa: false,
+ icon : false,
getChildContainer : function() {
if (this.jumbotron) {
cfg.cls = 'jumbotron';
}
+
+
+
// - this is applied by the parent..
//if (this.cls) {
// cfg.cls = this.cls + '';
}
}
+ if (this.hidden) {
+ cfg.cls += ' hidden';
+ }
+
+
+ if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
+ cfg.cls +=' alert alert-' + this.alert;
+ }
+
var body = cfg;
if (this.panel.length) {
if (body) {
body.html = this.html || cfg.html;
+ // prefix with the icons..
+ if (this.fa) {
+ body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
+ }
+ if (this.icon) {
+ body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
+ }
+
+
}
if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
cfg.cls = 'container';
* @cfg {String} href a tag href
* @cfg {String} target (_self|_blank|_parent|_top) target for a href.
* @cfg {String} html the content of the link.
+ * @cfg {String} anchor name for the anchor link
+
* @cfg {Boolean} preventDefault (true | false) default false
*
href: false,
target: false,
preventDefault: false,
+ anchor : false,
+ alt : false,
- getAutoCreate : function(){
+ getAutoCreate : function()
+ {
var cfg = {
- tag: 'a',
- html : this.html || 'html-missing'
+ tag: 'a'
+ };
+ // anchor's do not require html/href...
+ if (this.anchor === false) {
+ cfg.html = this.html || 'html-missing';
+ cfg.href = this.href || '#';
+ } else {
+ cfg.name = this.anchor;
+ if (this.html !== false) {
+ cfg.html = this.html;
+ }
+ if (this.href !== false) {
+ cfg.href = this.href;
+ }
}
-
- if(this.alt){
+ if(this.alt !== false){
cfg.alt = this.alt;
}
- cfg.href = this.href || '#';
- if(this.target){
+
+
+ if(this.target !== false) {
cfg.target = this.target;
}
* @cfg {String} position (fixed-top|fixed-bottom|static-top) position
* @cfg {String} brand_href href of the brand
* @cfg {Boolean} srButton generate the sr-only button (true | false) default true
+ * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
*
* @constructor
* Create a new Sidebar
brand: '',
brand_href: false,
srButton : true,
-
+ autohide : false,
getAutoCreate : function(){
return cfg;
- }
-
+ },
+ initEvents : function()
+ {
+ Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
+
+ if (this.autohide) {
+
+ var prevScroll = 0;
+ var ft = this.el;
+
+ Roo.get(document).on('scroll',function(e) {
+ var ns = Roo.get(document).getScroll().top;
+ var os = prevScroll;
+ prevScroll = ns;
+
+ if(ns > os){
+ ft.removeClass('slideDown');
+ ft.addClass('slideUp');
+ return;
+ }
+ ft.removeClass('slideUp');
+ ft.addClass('slideDown');
+
+
+ },this);
+ }
+ }
+
+
});
* @event changed
* Fires when the active item changes
* @param {Roo.bootstrap.NavGroup} this
- * @param {Roo.bootstrap.Navbar.Item} item The item selected
- * @param {Roo.bootstrap.Navbar.Item} item The previously selected item
+ * @param {Roo.bootstrap.Navbar.Item} selected The item selected
+ * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
*/
'changed': true
});
item.navId = this.navId;
},
-
+
+ /**
+ * clear all the Navigation item
+ */
+
+ clearAll : function()
+ {
+ this.navItems = [];
+ this.el.dom.innerHTML = '';
+ },
getNavItem: function(tabId)
{
return;
}
this.setActiveItem(this.navItems[i-1]);
+ },
+ clearWasActive : function(except) {
+ Roo.each(this.navItems, function(e) {
+ if (e.tabId != except.tabId && e.was_active) {
+ e.was_active = false;
+ return false;
+ }
+ return true;
+
+ });
+ },
+ getWasActive : function ()
+ {
+ var r = false;
+ Roo.each(this.navItems, function(e) {
+ if (e.was_active) {
+ r = e;
+ return false;
+ }
+ return true;
+
+ });
+ return r;
}
tagtype : 'a',
disabled : false,
+ was_active : false,
+
getAutoCreate : function(){
var cfg = {
if (this.disabled) {
return;
}
+
+ var tg = Roo.bootstrap.TabGroup.get(this.navId);
+ if (tg && tg.transition) {
+ Roo.log("waiting for the transitionend");
+ return;
+ }
+
Roo.log("fire event clicked");
if(this.fireEvent('click', this, e) === false){
return;
};
-
- if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
- if (typeof(this.parent().setActiveItem) !== 'undefined') {
- this.parent().setActiveItem(this);
+ var p = this.parent();
+ if (['tabs','pills'].indexOf(p.type)!==-1) {
+ if (typeof(p.setActiveItem) !== 'undefined') {
+ p.setActiveItem(this);
}
-
-
-
- }
+ }
+ // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
+ if (p.parentType == 'NavHeaderbar' && !this.menu) {
+ // remove the collapsed menu expand...
+ p.parent().el.select('.navbar-collapse',true).removeClass('in');
+ }
+
},
isActive: function () {
return this.active
},
- setActive : function(state, fire)
+ setActive : function(state, fire, is_was_active)
{
+ if (this.active && !state & this.navId) {
+ this.was_active = true;
+ var nv = Roo.bootstrap.NavGroup.get(this.navId);
+ if (nv) {
+ nv.clearWasActive(this);
+ }
+
+ }
this.active = state;
+
if (!state ) {
this.el.removeClass('active');
} else if (!this.el.hasClass('active')) {
// show a panel if it's registered and related..
- if (!this.navId || !this.tabId || !state) {
+ if (!this.navId || !this.tabId || !state || is_was_active) {
return;
}
if (!pan) {
return;
}
- tg.showPanel(pan);
+ // if we can not flip to new panel - go back to old nav highlight..
+ if (false == tg.showPanel(pan)) {
+ var nv = Roo.bootstrap.NavGroup.get(this.navId);
+ if (nv) {
+ var onav = nv.getWasActive();
+ if (onav) {
+ onav.setActive(true, false, true);
+ }
+ }
+
+ }
c.cls = 'sortable';
}
-// if(typeof(config.align) != 'undefined' && config.align.length){
-// c.style += ' text-align:' + config.align + ';';
-// }
+ if(typeof(config.align) != 'undefined' && config.align.length){
+ c.style += ' text-align:' + config.align + ';';
+ }
if(typeof(config.width) != 'undefined'){
c.style += ' width:' + config.width + 'px;';
});
var tbody = this.mainBody;
-
- var renders = [];
-
+
if(ds.getCount() > 0){
ds.data.each(function(d,rowIndex){
var row = this.renderRow(cm, ds, rowIndex);
var row = this.renderRow(this.cm, this.store, rowIndex);
// insert before rowIndex..
var e = this.mainBody.createChild(row,this.getRowDom(rowIndex));
- Roo.log(e);
var _this = this;
* Bootstrap Form class
* @cfg {String} method GET | POST (default POST)
* @cfg {String} labelAlign top | left (default top)
- * @cfg {String} align left | right - for navbars
+ * @cfg {String} align left | right - for navbars
+ * @cfg {Boolean} loadMask load mask when submit (default true)
*
* @constructor
*/
waitMsgTarget : false,
-
-
- /**
- * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
- * element by passing it or its id or mask the form itself by passing in true.
- * @type Mixed
- */
+ loadMask : true,
getAutoCreate : function(){
beforeAction : function(action){
var o = action.options;
+ if(this.loadMask){
+ this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ }
// not really supported yet.. ??
//if(this.waitMsgTarget === true){
- this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+ // this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
//}else if(this.waitMsgTarget){
// this.waitMsgTarget = Roo.get(this.waitMsgTarget);
// this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
getAutoCreate : function(){
- var parent = this.parent();
-
var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
var combobox = {
cls: 'select2-container input-group',
cn: [
- box,
- {
- tag: 'ul',
- cls: 'typeahead typeahead-long dropdown-menu',
- style: 'display:none'
- }
+ box
+// {
+// tag: 'ul',
+// cls: 'typeahead typeahead-long dropdown-menu',
+// style: 'display:none'
+// }
]
};
- if(!this.multiple){
+ if(!this.multiple && this.showToggleBtn){
combobox.cn.push({
tag :'span',
cls : 'input-group-addon btn dropdown-toggle',
// private
initEvents : function(){
+ this.createList();
+
Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
//this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
- if(!this.multiple){
+ if(!this.multiple && this.showToggleBtn){
this.trigger = this.el.select('span.dropdown-toggle',true).first();
if(this.hideTrigger){
this.trigger.setDisplayed(false);
// this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
//}
},
+
+ createList : function()
+ {
+ this.list = Roo.get(document.body).createChild({
+ tag: 'ul',
+ cls: 'typeahead typeahead-long dropdown-menu',
+ style: 'display:none'
+ });
+
+ this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
+
+ },
// private
initTrigger : function(){
* @cfg {Boolean} append (true|false) default false
* @cfg {Boolean} autoFocus (true|false) auto focus the first item, default true
* @cfg {Boolean} tickable ComboBox with tickable selections (true|false), default false
+ * @cfg {Boolean} triggerList trigger show the list or not (true|false) default true
+ * @cfg {Boolean} showToggleBtn show toggle button or not (true|false) default true
* @cfg {String} btnPosition set the position of the trigger button (left | right) default right
* @constructor
* Create a new ComboBox.
autoFocus : true,
tickable : false,
btnPosition : 'right',
-
+ triggerList : true,
+ showToggleBtn : true,
// element that contains real text value.. (when hidden is used..)
getAutoCreate : function()
var combobox = {
cls: 'select2-container input-group select2-container-multi',
cn: [
- box,
- {
- tag: 'ul',
- cls: 'typeahead typeahead-long dropdown-menu',
- style: 'display:none; max-height:' + this.maxHeight + 'px;'
- }
+ box
+// {
+// tag: 'ul',
+// cls: 'typeahead typeahead-long dropdown-menu',
+// style: 'display:none; max-height:' + this.maxHeight + 'px;'
+// }
]
};
this.store = Roo.factory(this.store, Roo.data);
if(this.tickable){
- this.initTickableEvnets();
+ this.initTickableEvents();
return;
}
Roo.bootstrap.ComboBox.superclass.initEvents.call(this);
-
if(this.hiddenName){
this.hiddenField = this.el.select('input.form-hidden-field',true).first();
//if(Roo.isGecko){
// this.el.dom.setAttribute('autocomplete', 'off');
//}
-
+
var cls = 'x-combo-list';
- this.list = this.el.select('ul.dropdown-menu',true).first();
-
+
//this.list = new Roo.Layer({
// shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
//});
this.tpl = '<li><a href="#">{' + this.displayField + '}</a></li>';
}
- this.view = new Roo.View(this.el.select('ul.dropdown-menu',true).first(), this.tpl, {
+ this.view = new Roo.View(this.list, this.tpl, {
singleSelect:true, store: this.store, selectedClass: this.selectedClass
});
//this.view.wrapEl.setDisplayed(false);
}
},
- initTickableEvnets: function()
+ initTickableEvents: function()
{
+ this.createList();
+
if(this.hiddenName){
this.hiddenField = this.el.select('input.form-hidden-field',true).first();
}
- this.list = this.el.select('ul.dropdown-menu',true).first();
+// this.list = this.el.select('ul.dropdown-menu',true).first();
this.choices = this.el.select('ul.select2-choices', true).first();
this.searchField = this.el.select('ul li.select2-search-field', true).first();
-
- this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
+ if(this.triggerList){
+ this.searchField.on("click", this.onSearchFieldClick, this, {preventDefault:true});
+ }
this.trigger = this.el.select('.tickable-buttons > .btn-edit', true).first();
this.trigger.on("click", this.onTickableTriggerClick, this, {preventDefault:true});
this.tpl = '<li class="select2-result"><div class="checkbox"><input id="{roo-id}" type="checkbox" {roo-data-checked}><label for="{roo-id}"><b>{' + this.displayField + '}</b></label></li>';
}
- this.view = new Roo.View(this.el.select('ul.dropdown-menu',true).first(), this.tpl, {
+ this.view = new Roo.View(this.list, this.tpl, {
singleSelect:true, tickable:true, parent:this, store: this.store, selectedClass: this.selectedClass
});
if(this.store.getCount() > 0){
this.expand();
- this.restrictHeight();
+// this.restrictHeight();
if(this.lastQuery == this.allQuery){
if(this.editable && !this.tickable){
this.inputEl().dom.select();
}
- if(!this.selectByValue(this.value, true) && this.autoFocus){
+
+ if(
+ !this.selectByValue(this.value, true) &&
+ this.autoFocus && (typeof(this.store.lastOptions.add) == 'undefined' ||
+ this.store.lastOptions.add != true)
+ ){
this.select(0, true);
}
}else{
setFromData : function(o){
if(this.multiple){
+ if(typeof o.display_name !== 'string'){
+ for(var i=0;i<o.display_name.length;i++){
+ this.addItem({'id':o.id[i],'display_name':o.display_name[i]});
+ }
+ return;
+ }
this.addItem(o);
return;
}
//this.list.beginUpdate();
//this.list.setHeight(this.innerList.getHeight()+this.list.getFrameWidth('tb')+(this.resizable?this.handleHeight:0)+this.assetHeight);
this.list.alignTo(this.inputEl(), this.listAlign);
+ this.list.alignTo(this.inputEl(), this.listAlign);
//this.list.endUpdate();
},
this.view.select(index);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
- if(el){
- //this.innerList.scrollChildIntoView(el, false);
-
+ if(el && !this.multiple && !this.tickable){
+ this.list.scrollChildIntoView(el, false);
}
}
},
return;
}
- this.hasFocus = false;
-
this.list.hide();
if(this.tickable){
collapseIf : function(e){
var in_combo = e.within(this.el);
var in_list = e.within(this.list);
+ var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
- if (in_combo || in_list) {
+ if (in_combo || in_list || is_list) {
//e.stopPropagation();
return;
}
if(this.isExpanded() || !this.hasFocus){
return;
}
+
+ var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
+ this.list.setWidth(lw);
+
+
Roo.log('expand');
- this.list.alignTo(this.inputEl(), this.listAlign);
+
this.list.show();
+ this.restrictHeight();
+
if(this.tickable){
this.tickItems = Roo.apply([], this.item);
{
Roo.log('trigger click');
- if(this.disabled){
+ if(this.disabled || !this.triggerList){
return;
}
onViewScroll : function(e, t){
- if(this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
+ if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
return;
}
Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, {
carousel : false,
+ transition : false,
getAutoCreate : function()
{
});
return r;
},
+ /**
+ * show a specific panel
+ * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
+ * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
+ */
showPanel : function (pan)
{
+
if (typeof(pan) == 'number') {
pan = this.tabs[pan];
}
pan = this.getPanelByName(pan);
}
if (pan.tabId == this.getActivePanel().tabId) {
- return;
+ return true;
}
var cur = this.getActivePanel();
+
+ if (false === cur.fireEvent('beforedeactivate')) {
+ return false;
+ }
+
if (this.carousel) {
+ this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
pan.el.addClass(dir); // or prev
pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
cur.el.addClass(lr); // or right
pan.el.addClass(lr);
+
+ var _this = this;
cur.el.on('transitionend', function() {
Roo.log("trans end?");
+
pan.el.removeClass([lr,dir]);
pan.setActive(true);
- cur.active = false;
- cur.el.removeClass([lr, 'active']);
+ cur.el.removeClass([lr]);
+ cur.setActive(false);
+ _this.transition = false;
}, this, { single: true } );
- return;
+ return true;
}
cur.setActive(false);
pan.setActive(true);
+ return true;
},
showPanelNext : function()
Roo.bootstrap.TabPanel = function(config){
Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
- this.addEvents({
+ this.addEvents({
/**
* @event changed
* Fires when the active status changes
* @param {Boolean} state the new state
*/
- 'changed': true
+ 'changed': true,
+ /**
+ * @event beforedeactivate
+ * Fires before a tab is de-activated - can be used to do validation on a form.
+ * @param {Roo.bootstrap.TabPanel} this
+ * @return {Boolean} false if there is an error
+
+ */
+ 'beforedeactivate': true
});
+
this.tabId = this.tabId || Roo.id();
};
getAutoCreate : function(){
var cfg = {
tag: 'div',
- cls: 'tab-pane',
+ // item is needed for carousel - not sure if it has any effect otherwise
+ cls: 'tab-pane item',
html: this.html || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
if (typeof(this.navId) != 'undefined') {
// not really needed.. but just in case.. parent should be a NavGroup.
var tg = Roo.bootstrap.TabGroup.get(this.navId);
- Roo.log(['register', tg, this]);
+ Roo.log(['register', tg, this]);
tg.register(this);
}
},
},
+
setActive: function(state)
{
Roo.log("panel - set active " + this.tabId + "=" + state);
}
}
- this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
+
+// this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
picker : function()
{
- return this.el.select('.datepicker', true).first();
+ return this.pickerEl;
+// return this.el.select('.datepicker', true).first();
},
fillDow: function()
update: function()
{
-
- this.date = (typeof(this.date) === 'undefined') ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
+ this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
if (this.date < this.startDate) {
this.viewDate = new Date(this.startDate);
*/
this.picker().addClass('top');
- this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
+ this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
return;
}
this.picker().addClass('bottom');
- this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
+ this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
},
parseDate : function(value)
var d = this.inputEl().getValue();
- if(d && d.length){
- this.setValue(d);
- }
+ this.setValue(d);
this.hide();
},
setValue: function(v)
{
- Roo.bootstrap.DateField.superclass.setValue.call(this, v);
-
- var d = new Date(v);
+ var d = new Date(v).clearTime();
if(isNaN(d.getTime())){
+ this.date = this.viewDate = '';
+ Roo.bootstrap.DateField.superclass.setValue.call(this, '');
return;
}
+ v = this.formatDate(d);
+
+ Roo.bootstrap.DateField.superclass.setValue.call(this, v);
+
this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
-
+
this.update();
this.fireEvent('select', this, this.date);
Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+
+
this.addEvents({
/**
* @event initialize
*/
editorevent: true
});
-
+
+ // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+
+ // defaults : white / black...
+ this.applyBlacklists();
+
+
+
};
clearUp: true,
+ // blacklist + whitelisted elements..
+ black: false,
+ white: false,
this.doc = iframe.contentWindow.document;
this.win = iframe.contentWindow;
} else {
- if (!Roo.get(this.frameId)) {
+// if (!Roo.get(this.frameId)) {
+// return;
+// }
+// this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+// this.win = Roo.get(this.frameId).dom.contentWindow;
+
+ if (!Roo.get(this.frameId) && !iframe.contentDocument) {
return;
}
+
this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
- this.win = Roo.get(this.frameId).dom.contentWindow;
+ this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
}
},
// clean up silly Windows -- stuff?
return;
}
+ var lcname = node.tagName.toLowerCase();
+ // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
+ // whitelist of tags..
- if (Roo.HtmlEditorCore.black.indexOf(node.tagName.toLowerCase()) > -1 && this.clearUp) {
+ if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
// remove node.
node.parentNode.removeChild(node);
return;
}
+ var cwhite = this.cwhite;
+ var cblack = this.cblack;
+
function cleanStyle(n,v)
{
if (v.match(/expression/)) { //XSS?? should we even bother..
node.removeAttribute(n);
return;
}
- var cwhite = typeof(ed.cwhite) == 'undefined' ? Roo.HtmlEditorCore.cwhite : ed.cwhite;
- var cblack = typeof(ed.cblack) == 'undefined' ? Roo.HtmlEditorCore.cblack : ed.cblack;
-
var parts = v.split(/;/);
var clean = [];
var l = p.split(':').shift().replace(/\s+/g,'');
l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
- if ( cblack.indexOf(l) > -1) {
+ if ( cwhite.length && cblack.indexOf(l) > -1) {
// Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
//node.removeAttribute(n);
return true;
},
domToHTML : function(currentElement, depth, nopadtext) {
- depth = depth || 0;
- nopadtext = nopadtext || false;
+ depth = depth || 0;
+ nopadtext = nopadtext || false;
+
+ if (!currentElement) {
+ return this.domToHTML(this.doc.body);
+ }
+
+ //Roo.log(currentElement);
+ var j;
+ var allText = false;
+ var nodeName = currentElement.nodeName;
+ var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
+
+ if (nodeName == '#text') {
+ return currentElement.nodeValue;
+ }
- if (!currentElement) {
- return this.domToHTML(this.doc.body);
+
+ var ret = '';
+ if (nodeName != 'BODY') {
+
+ var i = 0;
+ // Prints the node tagName, such as <A>, <IMG>, etc
+ if (tagName) {
+ var attr = [];
+ for(i = 0; i < currentElement.attributes.length;i++) {
+ // quoting?
+ var aname = currentElement.attributes.item(i).name;
+ if (!currentElement.attributes.item(i).value.length) {
+ continue;
+ }
+ attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
+ }
+
+ ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
+ }
+ else {
+
+ // eack
}
-
- //Roo.log(currentElement);
- var j;
- var allText = false;
- var nodeName = currentElement.nodeName;
- var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
-
- if (nodeName == '#text') {
- return currentElement.nodeValue;
+ } else {
+ tagName = false;
+ }
+ if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
+ return ret;
+ }
+ if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
+ nopadtext = true;
+ }
+
+
+ // Traverse the tree
+ i = 0;
+ 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;
}
-
-
- var ret = '';
- if (nodeName != 'BODY') {
-
- var i = 0;
- // Prints the node tagName, such as <A>, <IMG>, etc
- if (tagName) {
- var attr = [];
- for(i = 0; i < currentElement.attributes.length;i++) {
- // quoting?
- var aname = currentElement.attributes.item(i).name;
- if (!currentElement.attributes.item(i).value.length) {
- continue;
- }
- attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
- }
-
- ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
- }
- else {
-
- // eack
+ // text
+ if (currentElementChild.nodeName == '#text') {
+ var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
+ if (!nopad && toadd.length > 80) {
+ innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
}
- } else {
- tagName = false;
+ innerHTML += toadd;
+
+ i++;
+ currentElementChild = currentElement.childNodes.item(i);
+ lastNode = '';
+ continue;
}
- if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
- return ret;
+ allText = false;
+
+ 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);
+ }
+
+ ret += innerHTML;
+
+ if (!allText) {
+ // The remaining code is mostly for formatting the tree
+ ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
+ }
+
+
+ if (tagName) {
+ ret+= "</"+tagName+">";
+ }
+ return ret;
+
+ },
+
+ applyBlacklists : function()
+ {
+ var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white : [];
+ var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black : [];
+
+ this.white = [];
+ this.black = [];
+ Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
- if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
- nopadtext = true;
+ this.white.push(tag);
+
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ if (this.white.indexOf(tag) > -1) {
+ return;
}
+ this.white.push(tag);
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
- // Traverse the tree
- i = 0;
- 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 (!nopad && toadd.length > 80) {
- innerHTML += "\n" + (new Array( depth + 1 )).join( " " );
- }
- innerHTML += toadd;
-
- i++;
- currentElementChild = currentElement.childNodes.item(i);
- lastNode = '';
- continue;
- }
- allText = false;
-
- 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);
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
+ if (this.black.indexOf(tag) > -1) {
+ return;
+ }
+ this.black.push(tag);
- ret += innerHTML;
+ }, this);
+
+
+ w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite : [];
+ b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack : [];
+
+ this.cwhite = [];
+ this.cblack = [];
+ Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
- if (!allText) {
- // The remaining code is mostly for formatting the tree
- ret+= nopadtext ? '' : "\n" + (new Array( depth )).join( " " );
+ }, this);
+
+ Roo.each(w, function(tag) {
+ if (b.indexOf(tag) > -1) {
+ return;
}
+ if (this.cwhite.indexOf(tag) > -1) {
+ return;
+ }
+ this.cwhite.push(tag);
+ }, this);
+
+
+ Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
- if (tagName) {
- ret+= "</"+tagName+">";
+ }, this);
+
+ Roo.each(b, function(tag) {
+ if (w.indexOf(tag) > -1) {
+ return;
}
- return ret;
+ if (this.cblack.indexOf(tag) > -1) {
+ return;
+ }
+ this.cblack.push(tag);
- }
+ }, this);
+ }
// hide stuff that is not compatible
/**
* Bootstrap TabBox class
* @cfg {String} title Title of the TabBox
* @cfg {String} icon Icon of the TabBox
+ * @cfg {Boolean} showtabs (true|false) show the tabs default true
*
* @constructor
* Create a new TabBox
title : '',
icon : false,
+ showtabs : true,
getChildContainer : function()
{
//Roo.log('addpane');
//Roo.log(pane);
// tabs are rendere left to right..
+ if(!this.showtabs){
+ return;
+ }
+
var ctr = this.el.select('.nav-tabs', true).first();
Roo.bootstrap.dash.TabPane = function(config){
Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
+ this.addEvents({
+ // raw events
+ /**
+ * @event activate
+ * When a pane is activated
+ * @param {Roo.bootstrap.dash.TabPane} pane
+ */
+ "activate" : true
+
+ });
};
Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component, {
return;
}
this.title = str;
- this.tab.select('a'.true).first().dom.innerHTML = str;
+ this.tab.select('a', true).first().dom.innerHTML = str;
}
projects / roojs1 / blobdiff