-/*
+/**
+ * set the version of bootstrap based on the stylesheet...
+ *
+ */
+
+Roo.bootstrap.version = (
+ function() {
+ var ret=3;
+ Roo.each(document.styleSheets[0], function(s) {
+ if (s.href.match(/css-bootstrap4/)) {
+ ret=4;
+ }
+ });
+ return ret;
+})();/*
* - LGPL
*
* base class for bootstrap elements.
}
return cfg;
+ },
+ /**
+ * Add a button to the group (similar to NavItem API.)
+ */
+ addItem : function(cfg)
+ {
+ var cn = new Roo.bootstrap.Button(cfg);
+ //this.register(cn);
+ cn.parentId = this.id;
+ cn.onRender(this.el, null);
+ return cn;
}
});
if (this.registerMenu && this.type != 'treeview') {
Roo.bootstrap.MenuMgr.register(this);
}
+
+
this.addEvents({
/**
* @event beforeshow
this.triggerEl.on(Roo.isTouch ? 'touchstart' : 'mouseup', this.onTriggerPress, this);
- this.triggerEl.addClass('dropdown-toggle');
-
+
+ if (this.triggerEl.hasClass('nav-item')) {
+ // dropdown toggle on the 'a' in BS4?
+ this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
+ } else {
+ this.triggerEl.addClass('dropdown-toggle');
+ }
if (Roo.isTouch) {
this.el.on('touchstart' , this.onTouch, this);
}
this.hideMenuItems();
this.hidden = false;
this.triggerEl.addClass('open');
+ this.el.addClass('show');
// reassign x when hitting right
if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
this.activeItem = null;
}
this.triggerEl.removeClass('open');;
+ this.el.removeClass('show');
this.hidden = true;
this.fireEvent("hide", this);
}
if(this.isContainer){
return {
tag: 'li',
- cls: 'dropdown-menu-item'
+ cls: 'dropdown-menu-item dropdown-item'
};
}
var ctag = {
var cfg= {
tag: 'li',
- cls: 'dropdown-menu-item',
+ cls: 'dropdown-menu-item dropdown-item',
cn: [ anc ]
};
if (this.parent().type == 'treeview') {
};
var header = [];
- if (this.allow_close) {
+ if (this.allow_close && Roo.bootstrap.version == 3) {
header.push({
tag: 'button',
cls : 'close',
header.push(title);
+ if (this.allow_close && Roo.bootstrap.version == 4) {
+ header.push({
+ tag: 'button',
+ cls : 'close',
+ html : '×'
+ });
+ }
+
var size = '';
if(this.size.length){
//this.el.setStyle('display', 'block');
this.el.removeClass('hideing');
- this.el.addClass('show');
+ this.el.addClass('show d-block');
+ Roo.get(document.body).addClass('modal-open');
if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay?
var _this = this;
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
- this.maskEl.addClass('show');
+ this.maskEl.addClass('show d-block');
this.resize();
hide : function()
{
if(this.fireEvent("beforehide", this) !== false){
- this.maskEl.removeClass('show');
+ this.maskEl.removeClass('show d-block');
Roo.get(document.body).removeClass("x-body-masked");
this.el.removeClass('in');
this.el.select('.modal-dialog', true).first().setStyle('transform','');
if (!this.el.hasClass('hideing')) {
return; // it's been shown again...
}
- this.el.removeClass('show');
+ this.el.removeClass('show d-block');
+
+ Roo.get(document.body).removeClass('modal-open');
this.el.removeClass('hideing');
}).defer(150,this);
}else{
- this.el.removeClass('show');
+ this.el.removeClass('show d-block');
+ Roo.get(document.body).removeClass('modal-open');
+
}
this.fireEvent('hide', this);
}
* - LGPL
*
* navbar
- *
+ * navbar-fixed-top
+ * navbar-expand-md fixed-top
*/
/**
var cfg = {
tag: this.nav || 'nav',
- cls: 'navbar',
+ cls: 'navbar navbar-expand-md',
role: 'navigation',
cn: []
};
{
tag: 'button',
type: 'button',
- cls: 'navbar-toggle',
+ cls: 'navbar-toggle navbar-toggler',
'data-toggle': 'collapse',
cn: [
{
},
{
tag: 'span',
- cls: 'icon-bar'
+ cls: 'icon-bar navbar-toggler-icon'
},
{
tag: 'span',
cn : []
});
- cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
+ cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
- cfg.cls += ' navbar-' + this.position;
+ cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
// tag can override this..
};
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
+ cfg.cls += ' navbar-right ml-md-auto';
} else {
cfg.cls += ' navbar-left';
}
}
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
- }
+ cfg.cls += ' navbar-right ml-md-auto';
+ } else {
+ cfg.cls += ' mr-auto';
+ }
if (this.inverse) {
cfg.cls += ' navbar-inverse';
html: this.html || ''
}
];
-
+ if (this.tagtype == 'a') {
+ cfg.cn[0].cls = 'nav-link';
+ }
if (this.icon) {
cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
}
if (this.badge !== '') {
- cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+ cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
}
}
"col-"+size_cls[0]+"-"+size_cls[1]
);
- this.colModel.config[col_index][size_cls[0]] = size_cls[1];
- }
-
- Roo.log(rows);
-
- for(var i = 0; i < rows.length; i++) {
-
- for(var j = 0; j < w.length; j++) {
+ for(var i = 0; i < rows.length; i++) {
var size_cls = w[j].split("-");
"col-"+size_cls[0]+"-"+size_cls[1]
);
}
+
+ this.colModel.config[col_index][size_cls[0]] = size_cls[1];
}
}
});
case 18: // alt
break;
default :
- this.hide();
+ this.hidePopup();
}
},
this.bind(this.ds);
}
- this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ if (Roo.bootstrap.version == 4) {
+ this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
+ } else {
+ this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ }
};
this.first = this.navgroup.addItem({
tooltip: this.firstText,
- cls: "prev",
- icon : 'fa fa-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-step-backward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["first"]) }
this.prev = this.navgroup.addItem({
tooltip: this.prevText,
- cls: "prev",
- icon : 'fa fa-step-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-backward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
var field = this.navgroup.addItem( {
tagtype : 'span',
- cls : 'x-paging-position',
-
+ cls : 'x-paging-position btn-outline-secondary',
+ disabled: true,
html : this.beforePageText +
'<input type="text" size="3" value="1" class="x-grid-page-number">' +
'<span class="x-paging-after">' + String.format(this.afterPageText, 1) + '</span>'
//this.addSeparator();
this.next = this.navgroup.addItem({
tooltip: this.nextText,
- cls: "next",
- html : ' <i class="fa fa-step-forward">',
+ cls: "next btn-outline-secondary",
+ html : ' <i class="fa fa-forward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["next"]) }
});
this.last = this.navgroup.addItem({
tooltip: this.lastText,
- icon : 'fa fa-forward',
- cls: "next",
+ html : ' <i class="fa fa-step-forward"></i>',
+ cls: "next btn-outline-secondary",
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["last"]) }
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
- icon: 'fa fa-refresh',
+ cls: "btn-outline-secondary",
+ html : ' <i class="fa fa-refresh"></i>',
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
allowed: '0123456789',
+ max_length: 15,
+
/**
* @cfg {String} defaultDialCode The default dial code when initializing the input
*/
var input = {
tag: 'input',
id : id,
+ // type: 'number', -- do not use number - we get the flaky up/down arrows.
+ maxlength: this.max_length,
cls : 'form-control tel-input',
autocomplete: 'new-password'
};
this.list.on('mouseover', this.onViewOver, this);
this.list.on('mousemove', this.onViewMove, this);
this.inputEl().on("keyup", this.onKeyUp, this);
+ this.inputEl().on("keypress", this.onKeyPress, this);
this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
return this.el.select('input.hidden-tel-input',true).first();
},
+ // after setting val
onKeyUp : function(e){
-
- var k = e.getKey();
- var c = e.getCharCode();
-
- if(
- (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
- this.allowed.indexOf(String.fromCharCode(c)) === -1
- ){
- e.stopEvent();
- }
-
- // if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
- // return;
- // }
- if(this.allowed.indexOf(String.fromCharCode(c)) === -1){
+ this.setValue(this.getValue());
+ },
+
+ onKeyPress : function(e){
+ if(this.allowed.indexOf(String.fromCharCode(e.getCharCode())) === -1){
e.stopEvent();
}
-
- this.setValue(this.getValue());
}
});
* @cfg {String} thousandsDelimiter Symbol of thousandsDelimiter
*/
thousandsDelimiter : false,
-
+ /**
+ * @cfg {Number} max_length Maximum input field length allowed (defaults to Number.MAX_VALUE)
+ */
+ max_length: false,
inputlg : 9,
inputmd : 9,
cls: 'hidden-number-input'
};
+ if(this.max_length) {
+ input.maxlength = this.max_length;
+ }
+
if (this.name) {
hiddenInput.name = this.name;
}
projects / roojs1 / blobdiff