Roo.bootstrap.Component = function(config){
Roo.bootstrap.Component.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event childrenrendered
+ * Fires when the children have been rendered..
+ * @param {Roo.bootstrap.Component} this
+ */
+ "childrenrendered" : true
+
+
+
+ });
+
+
};
Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
}
var ret = false;
+ if (!build_from_html) {
+ return false;
+ }
+ // this i think handles overlaying multiple children of the same type
+ // with the sam eelement.. - which might be buggy..
while (true) {
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
// that match this xtype..
// note - when we render we create these as well..
// so we should check to see if body has xtype set.
- if (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
+ if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
-
-
+ if (echild) {
+ Roo.log(Roo.XComponent.build_from_html);
+ Roo.log("got echild:");
+ Roo.log(echild);
+ }
// 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.
}
cn.items = nitems;
-
+
+ this.fireEvent('childrenrendered', this);
+
return cn;
- }
-
-
+ }
});
/**
* @event click
* When a butotn is pressed
+ * @param {Roo.bootstrap.Button} this
* @param {Roo.EventObject} e
*/
"click" : true,
getAutoCreate : function(){
+
+
var cfg = {
tag: 'h' + (1 *this.level),
- html: this.html || 'fill in html'
+ html: this.html || ''
} ;
return cfg;
}
if(_e !== false){
this.fireEvent("beforeshow", this);
-
//xy = this.el.adjustForConstraints(xy);
}
- //this.el.setXY(xy);
+
//this.el.show();
this.hideMenuItems();
this.hidden = false;
this.triggerEl.addClass('open');
+
+ if(this.el.getWidth() + xy[0] > Roo.lib.Dom.getViewWidth()){
+ xy[0] = xy[0] - this.el.getWidth() + this.triggerEl.getWidth();
+ }
+
+ this.el.setXY(xy);
this.focus();
this.fireEvent("show", this);
},
/**
* @event click
* The raw click event for the entire grid.
+ * @param {Roo.bootstrap.MenuItem} this
* @param {Roo.EventObject} e
*/
"click" : true
/*
-<div class="modal fade">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
- <h4 class="modal-title">Modal title</h4>
- </div>
- <div class="modal-body">
- <p>One fine body…</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Save changes</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
+* Licence: LGPL
*/
-/*
- * - LGPL
- *
- * page contgainer.
- *
- */
/**
* @class Roo.bootstrap.Modal
* Bootstrap Modal class
* @cfg {String} title Title of dialog
* @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
- * @cfg {Roo.Template} tmpl - a template with variables.
+ * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
* @cfg {Boolean} specificTitle default false
* @cfg {Array} buttons Array of buttons or standard button set..
* @cfg {String} buttonPosition (left|right|center) default right
"btnclick" : true
});
this.buttons = this.buttons || [];
- Roo.log("init");
+
if (this.tmpl) {
this.tmpl = Roo.factory(this.tmpl);
}
buttons : false,
// set on load...
- body: false,
-
+
html: false,
tmp: false,
animate : true,
+
+ // private
+ bodyEl: false,
+ footerEl: false,
+ titleEl: false,
+ closeEl: false,
+
+
onRender : function(ct, position)
{
Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
}
//var type = this.el.dom.type;
+
+
+
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
+ this.bodyEl = this.el.select('.modal-body',true).first();
+ this.closeEl = this.el.select('.modal-header .close', true).first();
+ this.footerEl = this.el.select('.modal-footer',true).first();
+ this.titleEl = this.el.select('.modal-title',true).first();
+
+
this.maskEl = Roo.DomHelper.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
this.maskEl.enableDisplayMode("block");
this.maskEl.hide();
this.items = nitems;
- this.body = this.el.select('.modal-body',true).first();
- this.close = this.el.select('.modal-header .close', true).first();
- this.footer = this.el.select('.modal-footer',true).first();
+ // where are these used - they used to be body/close/footer
+
+
this.initEvents();
//this.el.addClass([this.fieldClass, this.cls]);
},
getChildContainer : function() {
- return this.el.select('.modal-body',true).first();
+ return this.bodyEl;
},
getButtonContainer : function() {
},
initEvents : function()
{
- this.el.select('.modal-header .close').on('click', this.hide, this);
-//
-// this.addxtype(this);
+ if (this.allow_close) {
+ this.closeEl.on('click', this.hide, this);
+ }
+
},
show : function() {
//Roo.log([a,b,c]);
this.fireEvent('btnclick', btn.name, e);
},
+ /**
+ * Set the title of the Dialog
+ * @param {String} str new Title
+ */
setTitle: function(str) {
- this.el.select('.modal-title',true).first().dom.innerHTML = str;
-
+ this.titleEl.dom.innerHTML = str;
+ },
+ /**
+ * Set the body of the Dialog
+ * @param {String} str new Title
+ */
+ setBody: function(str) {
+ this.bodyEl.dom.innerHTML = str;
+ },
+ /**
+ * Set the body of the Dialog using the template
+ * @param {Obj} data - apply this data to the template and replace the body contents.
+ */
+ applyBody: function(obj)
+ {
+ if (!this.tmpl) {
+ Roo.log("Error - using apply Body without a template");
+ //code
+ }
+ this.tmpl.overwrite(this.bodyEl, obj);
}
+
});
//dlg.footer.dom.style.display = 'none';
return width;
}
- dlg.footer.dom.style.display = '';
+ dlg.footerEl.dom.style.display = '';
for(var k in buttons){
if(typeof buttons[k] != "function"){
if(b[k]){
buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
Roo.log(buttons)
- bodyEl = dlg.body.createChild({
+ bodyEl = dlg.bodyEl.createChild({
html:'<span class="roo-mb-text"></span><br /><input type="text" class="roo-mb-input" />' +
'<textarea class="roo-mb-textarea"></textarea>' +
var d = this.getDialog();
opt = options;
d.setTitle(opt.title || " ");
- d.close.setDisplayed(opt.closable !== false);
+ d.closeEl.setDisplayed(opt.closable !== false);
activeTextEl = textboxEl;
opt.prompt = opt.prompt || (opt.multiline ? true : false);
if(opt.prompt){
* @cfg {Boolean} preventDefault (true | false) default false
* @cfg {String} tabId the tab that this item activates.
* @cfg {String} tagtype (a|span) render as a href or span?
+ * @cfg {Boolean} animateRef (true|false) link to element default false
* @constructor
* Create a new Navbar Item
* @param {boolean} state the new state
*/
- 'changed': true
+ 'changed': true,
+ /**
+ * @event scrollto
+ * Fires when scroll to element
+ * @param {Roo.bootstrap.NavItem} this
+ * @param {Object} options
+ * @param {Roo.EventObject} e
+
+ */
+ 'scrollto': true
});
};
tabId : false,
tagtype : 'a',
disabled : false,
-
+ animateRef : false,
was_active : false,
getAutoCreate : function(){
onClick : function(e)
{
- if(this.preventDefault || this.href == '#'){
+ if(
+ this.preventDefault ||
+ this.href == '#'
+ ){
+
e.preventDefault();
}
return;
}
- Roo.log("fire event clicked");
+
+
+ //Roo.log("fire event clicked");
if(this.fireEvent('click', this, e) === false){
return;
};
return;
}
- var p = this.parent();
+ //Roo.log(this.href);
+ var ael = this.el.select('a',true).first();
+ //Roo.log(ael);
+
+ if(ael && this.animateRef && this.href.indexOf('#') > -1){
+ //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
+ if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
+ return; // ignore... - it's a 'hash' to another page.
+ }
+
+ e.preventDefault();
+ this.scrollToElement(e);
+ }
+
+
+ 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 () {
tooltipEl : function()
{
return this.el.select('' + this.tagtype + '', true).first();
+ },
+
+ scrollToElement : function(e)
+ {
+ var c = document.body;
+
+ var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
+
+ if(!target){
+ return;
+ }
+
+ var o = target.calcOffsetsTo(c);
+
+ var options = {
+ target : target,
+ value : o[1]
+ }
+
+ this.fireEvent('scrollto', this, options, e);
+
+ Roo.get(c).scrollTo('top', options.value, true);
+
+ return;
}
});
* @cfg {String} html contents of the element
* @cfg {String} tag tag of the element
* @cfg {String} cls class of the element
+ * @cfg {Boolean} preventDefault (true|false) default false
+ * @cfg {Boolean} clickable (true|false) default false
*
* @constructor
* Create a new Element
Roo.bootstrap.Element = function(config){
Roo.bootstrap.Element.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * When a element is chick
+ * @param {Roo.bootstrap.Element} this
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
};
Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
tag: 'div',
cls: '',
html: '',
-
+ preventDefault: false,
+ clickable: false,
getAutoCreate : function(){
html: this.html
}
-
-
return cfg;
+ },
+
+ initEvents: function()
+ {
+ Roo.bootstrap.Element.superclass.initEvents.call(this);
+
+ if(this.clickable){
+ this.el.on('click', this.onClick, this);
+ }
+
+ },
+
+ onClick : function(e)
+ {
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+
+ this.fireEvent('click', this, e);
+ },
+
+ getValue : function()
+ {
+ return this.el.dom.innerHTML;
+ },
+
+ setValue : function(value)
+ {
+ this.el.dom.innerHTML = value;
}
});
c.tooltip = config.tooltip;
}
+ if(typeof(config.colspan) != 'undefined'){
+ c.colspan = config.colspan;
+ }
+
if(typeof(config.hidden) != 'undefined' && config.hidden){
c.style += ' display:none;';
}
c.style += ' width:' + config.width + 'px;';
}
+ if(typeof(config.cls) != 'undefined'){
+ c.cls = (typeof(c.cls) == 'undefined') ? config.cls : (c.cls + ' ' + config.cls);
+ }
+
header.cn.push(c)
}
td.id = id;
}
+ if(typeof(config.colspan) != 'undefined'){
+ td.colspan = config.colspan;
+ }
+
if(typeof(config.hidden) != 'undefined' && config.hidden){
td.style += ' display:none;';
}
if(typeof(config.cursor) != 'undefined'){
td.style += ' cursor:' + config.cursor + ';';
}
+
+ if(typeof(config.cls) != 'undefined'){
+ td.cls = (typeof(td.cls) == 'undefined') ? config.cls : (td.cls + ' ' + config.cls);
+ }
row.cn.push(td);
var inputblock = input;
+ var feedback = {
+ tag: 'span',
+ cls: 'glyphicon form-control-feedback'
+ };
+
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
- var feedback = {
- tag: 'span',
- cls: 'glyphicon form-control-feedback'
- };
-
inputblock = {
cls : 'has-feedback',
cn : [
]
};
}
-
-// var inputblock = input;
if (this.before || this.after) {
inputblock.cn.push(input);
- if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
- inputblock.cls += ' has-feedback';
- inputblock.cn.push(feedback);
- }
-
if (this.after && typeof(this.after) == 'string') {
inputblock.cn.push({
tag :'span',
(this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
});
}
+
+ if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
+ inputblock.cls += ' has-feedback';
+ inputblock.cn.push(feedback);
+ }
};
if (align ==='left' && this.fieldLabel.length) {
* Fires when the remove value from the combobox array
* @param {Roo.bootstrap.ComboBox} combo This combo box
*/
- 'remove' : true
+ 'remove' : true,
+ /**
+ * @event specialfilter
+ * Fires when specialfilter
+ * @param {Roo.bootstrap.ComboBox} combo This combo box
+ */
+ 'specialfilter' : true
});
* mode = 'remote' or 'text' if mode = 'local')
*/
displayField: undefined,
+
/**
* @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
* mode = 'remote' or 'value' if mode = 'local').
*/
validClass : "has-success",
+ /**
+ * @cfg {Boolean} specialFilter (true|false) special filter default false
+ */
+ specialFilter : false,
+
//private
addicon : false,
editicon: false,
cls : 'form-group roo-combobox-tickable' //input-group
};
-
var buttons = {
tag : 'div',
cls : 'tickable-buttons',
]
};
+ if(this.editable){
+ buttons.cn.unshift({
+ tag: 'input',
+ cls: 'select2-search-field-input'
+ });
+ }
+
var _this = this;
+
Roo.each(buttons.cn, function(c){
if (_this.size) {
c.cls += ' btn-' + _this.size;
this.store.on('load', this.onLoad, this);
this.store.on('loadexception', this.onLoadException, this);
-// this.keyNav = new Roo.KeyNav(this.inputEl(), {
-// "up" : function(e){
-// this.inKeyMode = true;
-// this.selectPrev();
-// },
-//
-// "down" : function(e){
-// if(!this.isExpanded()){
-// this.onTriggerClick();
-// }else{
-// this.inKeyMode = true;
-// this.selectNext();
-// }
-// },
-//
-// "enter" : function(e){
-//// this.onViewClick();
-// //return true;
-// this.collapse();
-//
-// if(this.fireEvent("specialkey", this, e)){
-// this.onViewClick(false);
-// }
-//
-// return true;
-// },
-//
-// "esc" : function(e){
-// this.collapse();
-// },
-//
-// "tab" : function(e){
-// this.collapse();
-//
-// if(this.fireEvent("specialkey", this, e)){
-// this.onViewClick(false);
-// }
-//
-// return true;
-// },
-//
-// scope : this,
-//
-// doRelay : function(foo, bar, hname){
-// if(hname == 'down' || this.scope.isExpanded()){
-// return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
-// }
-// return true;
-// },
-//
-// forceKeyDown: true
-// });
-
+ if(this.editable){
+ this.keyNav = new Roo.KeyNav(this.tickableInputEl(), {
+ "up" : function(e){
+ this.inKeyMode = true;
+ this.selectPrev();
+ },
+
+ "down" : function(e){
+ this.inKeyMode = true;
+ this.selectNext();
+ },
+
+ "enter" : function(e){
+ if(this.fireEvent("specialkey", this, e)){
+ this.onViewClick(false);
+ }
+
+ return true;
+ },
+
+ "esc" : function(e){
+ this.onTickableFooterButtonClick(e, false, false);
+ },
+
+ "tab" : function(e){
+ this.fireEvent("specialkey", this, e);
+
+ this.onTickableFooterButtonClick(e, false, false);
+
+ return true;
+ },
+
+ scope : this,
+
+ doRelay : function(e, fn, key){
+ if(this.scope.isExpanded()){
+ return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+ }
+ return true;
+ },
+
+ forceKeyDown: true
+ });
+ }
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
+ if(this.editable !== false){
+ this.tickableInputEl().on("keyup", this.onKeyUp, this);
+ }
+
},
onDestroy : function(){
if(typeof(this.loading) !== 'undefined' && this.loading !== null){
this.loading.hide();
}
-
+
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 && (typeof(this.store.lastOptions.add) == 'undefined' ||
- this.store.lastOptions.add != true)
+ this.autoFocus &&
+ (
+ !this.store.lastOptions ||
+ typeof(this.store.lastOptions.add) == 'undefined' ||
+ this.store.lastOptions.add != true
+ )
){
this.select(0, true);
}
this.loading.hide();
}
+ if(this.tickable && this.editable){
+ return;
+ }
+
this.collapse();
+
Roo.log(this.store.reader.jsonData);
if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
// fixme
// private
reset : function(){
// overridden so that last data is reset..
+
+ if(this.multiple){
+ this.clearItem();
+ return;
+ }
+
this.setValue(this.originalValue);
this.clearInvalid();
this.lastData = false;
if(this.tickable){
- if(e.getTarget().nodeName.toLowerCase() != 'input'){
+ if(typeof(e) != 'undefined' && e.getTarget().nodeName.toLowerCase() != 'input'){
return;
}
if(typeof(v) != 'undefined' && v[_this.valueField] == r.data[_this.valueField]){
_this.tickItems.splice(k, 1);
+
+ if(typeof(e) == 'undefined' && view == false){
+ Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = false;
+ }
+
rm = true;
return;
}
}
this.tickItems.push(r.data);
+
+ if(typeof(e) == 'undefined' && view == false){
+ Roo.get(_this.view.getNodes(index, index)[0]).select('input', true).first().dom.checked = true;
+ }
+
return;
}
// private
onEmptyResults : function(){
+
+ if(this.tickable && this.editable){
+ this.restrictHeight();
+ return;
+ }
+
this.collapse();
},
this.view.select(index);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
- if(el && !this.multiple && !this.tickable){
+ /*
+ * el && !this.multiple && !this.tickable // not sure why we disable multiple before..
+ */
+ if(el){
this.list.scrollChildIntoView(el, false);
}
}
// private
initQuery : function(){
- this.doQuery(this.getRawValue());
+
+ var v = this.getRawValue();
+
+ if(this.tickable && this.editable){
+ v = this.tickableInputEl().getValue();
+ }
+
+ this.doQuery(v);
},
// private
if(forceAll){
this.store.clearFilter();
}else{
+
+ if(this.specialFilter){
+ this.fireEvent('specialfilter', this);
+ this.onLoad();
+ return;
+ }
+
this.store.filter(this.displayField, q);
}
+
+ this.store.fireEvent("datachanged", this.store);
+
this.onLoad();
+
+
}else{
+
this.store.baseParams[this.queryParam] = q;
var options = {params : this.getParams(q)};
}
this.store.load(options);
+
/*
* this code will make the page width larger, at the beginning, the list not align correctly,
* we should expand the list on onLoad
this.loadNext = false;
},
-
+
// private
getParams : function(q){
var p = {};
this.okBtn.hide();
this.cancelBtn.hide();
this.trigger.show();
+
+ if(this.editable){
+ this.tickableInputEl().dom.value = '';
+ this.tickableInputEl().blur();
+ }
+
}
Roo.get(document).un('mousedown', this.collapseIf, this);
this.cancelBtn.show();
this.trigger.hide();
+ if(this.editable){
+ this.tickableInputEl().focus();
+ }
+
}
Roo.get(document).on('mousedown', this.collapseIf, this);
if(this.hiddenField){
this.hiddenField.dom.value = this.value;
}
+
+ this.store.fireEvent("datachanged", this.store);
},
clearItem : function()
this.markInvalid();
return false;
+ },
+
+ tickableInputEl : function()
+ {
+ if(!this.tickable || !this.editable){
+ return this.inputEl();
+ }
+
+ return this.inputEl().select('.select2-search-field-input', true).first();
}
* Bootstrap Column class
* @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
* @cfg {Boolean} carousel true to make the group behave like a carousel
+ * @cfg {Number} bullets show the panel pointer.. default 0
+ * @cfg {Boolena} autoslide (true|false) auto slide .. default false
+ * @cfg {Number} timer auto slide timer .. default 0 millisecond
*
* @constructor
* Create a new TabGroup
carousel : false,
transition : false,
-
+ bullets : 0,
+ timer : 0,
+ autoslide : false,
+ slideFn : false,
+
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
cfg.cls += ' tab-content';
+ Roo.log('get auto create...............');
+
if (this.carousel) {
cfg.cls += ' carousel slide';
+
cfg.cn = [{
cls : 'carousel-inner'
- }]
- }
+ }];
+ if(this.bullets > 0){
+
+ var bullets = {
+ cls : 'carousel-bullets hidden-xs',
+ cn : []
+ };
+
+ if(this.bullets_cls){
+ bullets.cls = bullets.cls + ' ' + this.bullets_cls;
+ }
+
+ for (var i = 0; i < this.bullets; i++){
+ bullets.cn.push({
+ cls : 'bullet bullet-' + i
+ });
+ }
+
+ bullets.cn.push({
+ cls : 'clear'
+ });
+
+ cfg.cn[0].cn = bullets;
+ }
+ }
return cfg;
},
+
+ initEvents: function()
+ {
+ Roo.log('-------- init events on tab group ---------');
+
+ var _this = this;
+
+ if(this.bullets > 0){
+
+ for (var i = 0; i < this.bullets; i++){
+ var bullet = this.el.select('.bullet-' + i, true).first();
+
+ if(!bullet){
+ continue;
+ }
+
+ bullet.on('click', (function(e, el, o, ii, t){
+
+ e.preventDefault();
+
+ _this.showPanel(ii);
+
+ if(_this.autoslide && _this.slideFn){
+ clearInterval(_this.slideFn);
+ _this.slideFn = window.setInterval(function() {
+ _this.showPanelNext();
+ }, _this.timer);
+ }
+
+ }).createDelegate(this, [i, bullet], true));
+ }
+ }
+
+ if(this.autoslide){
+ this.slideFn = window.setInterval(function() {
+ _this.showPanelNext();
+ }, this.timer);
+ }
+ },
+
getChildContainer : function()
{
return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
*/
showPanel : function (pan)
{
+ if(this.transition){
+ Roo.log("waiting for the transitionend");
+ return;
+ }
if (typeof(pan) == 'number') {
pan = this.tabs[pan];
return false;
}
+ if(this.bullets > 0){
+ this.setActiveBullet(this.indexOfPanel(pan));
+ }
+
if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
this.transition = true;
_this.transition = false;
}, this, { single: true } );
+
return true;
}
cur.setActive(false);
pan.setActive(true);
+
return true;
},
showPanelNext : function()
{
var i = this.indexOfPanel(this.getActivePanel());
- if (i > this.tabs.length) {
+
+ if (i >= this.tabs.length - 1 && !this.autoslide) {
return;
}
+
+ if (i >= this.tabs.length - 1 && this.autoslide) {
+ i = -1;
+ }
+
this.showPanel(this.tabs[i+1]);
},
+
showPanelPrev : function()
{
var i = this.indexOfPanel(this.getActivePanel());
- if (i < 1) {
+
+ if (i < 1 && !this.autoslide) {
return;
}
+
+ if (i < 1 && this.autoslide) {
+ i = this.tabs.length;
+ }
+
this.showPanel(this.tabs[i-1]);
+ },
+
+ setActiveBullet : function(i)
+ {
+ Roo.each(this.el.select('.bullet', true).elements, function(el){
+ el.removeClass('selected');
+ });
+
+ var bullet = this.el.select('.bullet-' + i, true).first();
+
+ if(!bullet){
+ return;
+ }
+
+ bullet.addClass('selected');
}
var tg = Roo.bootstrap.TabGroup.get(this.navId);
Roo.log(['register', tg, this]);
tg.register(this);
+
+ var i = tg.tabs.length - 1;
+
+ if(this.active && tg.bullets > 0 && i < tg.bullets){
+ tg.setActiveBullet(i);
+ }
}
+
},
} else if (!this.el.hasClass('active')) {
this.el.addClass('active');
}
+
this.fireEvent('changed', this, state);
}
*/
markValid : function()
{
+ if(this.allowBlank){
+ return;
+ }
+
var _this = this;
this.fireEvent('valid', this);
*/
markInvalid : function(msg)
{
+ if(this.allowBlank){
+ return;
+ }
+
var _this = this;
this.fireEvent('invalid', this, msg);
enter : function(ev)
{
var dom = ev.getTarget();
+
//Roo.log(['enter',dom]);
var el = Roo.fly(dom);
if (this.currentEl) {
if (this.currentTip.el) {
this.currentTip.el.hide(); // force hiding...
}
- //Roo.log(el);
- if (!el.attr('tooltip')) { // parents who have tip?
- return;
+ //Roo.log(ev);
+ var bindEl = el;
+
+ // you can not look for children, as if el is the body.. then everythign is the child..
+ if (!el.attr('tooltip')) { //
+ if (!el.select("[tooltip]").elements.length) {
+ return;
+ }
+ // is the mouse over this child...?
+ bindEl = el.select("[tooltip]").first();
+ var xy = ev.getXY();
+ if (!bindEl.getRegion().contains( { top : xy[1] ,right : xy[0] , bottom : xy[1], left : xy[0]})) {
+ //Roo.log("not in region.");
+ return;
+ }
+ //Roo.log("child element over..");
+
}
- this.currentEl = el;
- this.currentTip.bind(el);
+ this.currentEl = bindEl;
+ this.currentTip.bind(bindEl);
this.currentRegion = Roo.lib.Region.getRegion(dom);
this.currentTip.enter();
this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
- return
+ return;
}
var _t = this;
_t.hide();
Roo.bootstrap.Tooltip.currentEl = false;
}
- }, delay)
+ }, delay);
},
show : function ()
}
// set content.
//Roo.log([this.bindEl, this.bindEl.attr('tooltip')]);
- this.el.select('.tooltip-inner',true).first().dom.innerHTML = this.bindEl.attr('tooltip');
+
+ var tip = this.bindEl.attr('tooltip') || this.bindEl.select("[tooltip]").first().attr('tooltip');
+
+ this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
locationName: this.locationName,
draggable: this.draggable,
enableAutocomplete: this.enableAutocomplete,
- enableReverseGeocode: this.enableReverseGeocode,
+ enableReverseGeocode: this.enableReverseGeocode
});
var _marker = new google.maps.Marker({
}
-});
\ No newline at end of file
+});/*
+ * - LGPL
+ *
+ * Alert
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.Alert
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Alert class
+ * @cfg {String} title The title of alert
+ * @cfg {String} html The content of alert
+ * @cfg {String} weight ( success | info | warning | danger )
+ * @cfg {String} faicon font-awesomeicon
+ *
+ * @constructor
+ * Create a new alert
+ * @param {Object} config The config object
+ */
+
+
+Roo.bootstrap.Alert = function(config){
+ Roo.bootstrap.Alert.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component, {
+
+ title: '',
+ html: '',
+ weight: false,
+ faicon: false,
+
+ getAutoCreate : function()
+ {
+
+ var cfg = {
+ tag : 'div',
+ cls : 'alert',
+ cn : [
+ {
+ tag : 'i',
+ cls : 'roo-alert-icon'
+
+ },
+ {
+ tag : 'b',
+ cls : 'roo-alert-title',
+ html : this.title
+ },
+ {
+ tag : 'span',
+ cls : 'roo-alert-text',
+ html : this.html
+ }
+ ]
+ };
+
+ if(this.faicon){
+ cfg.cn[0].cls += ' fa ' + this.faicon;
+ }
+
+ if(this.weight){
+ cfg.cls += ' alert-' + this.weight;
+ }
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ this.el.setVisibilityMode(Roo.Element.DISPLAY);
+ },
+
+ setTitle : function(str)
+ {
+ this.el.select('.roo-alert-title',true).first().dom.innerHTML = str;
+ },
+
+ setText : function(str)
+ {
+ this.el.select('.roo-alert-text',true).first().dom.innerHTML = str;
+ },
+
+ setWeight : function(weight)
+ {
+ if(this.weight){
+ this.el.select('.alert',true).first().removeClass('alert-' + this.weight);
+ }
+
+ this.weight = weight;
+
+ this.el.select('.alert',true).first().addClass('alert-' + this.weight);
+ },
+
+ setIcon : function(icon)
+ {
+ if(this.faicon){
+ this.el.select('.roo-alert-icon',true).first().removeClass(['fa', 'fa-' + this.faicon]);
+ }
+
+ this.faicon = icon
+
+ this.el.select('.roo-alert-icon',true).first().addClass(['fa', 'fa-' + this.faicon]);
+ },
+
+ hide: function()
+ {
+ this.el.hide();
+ },
+
+ show: function()
+ {
+ this.el.show();
+ }
+
+});
+
+
\ No newline at end of file