X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=0fae497ca4962016b4145cb2aa0336f870ab26b9;hp=0782053474cb750bfc8e2f67c2496d90fe6dd78c;hb=d59b277dae414c8ed4dbc3522847f5f1b495081a;hpb=d067cb6878ea4e2ef59f9d602f872d356654e1d8 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 0782053474..0fae497ca4 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -413,7 +413,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().removeClass('hidden'); + this.getVisibilityEl().removeClass(['hidden','d-none']); this.fireEvent('show', this); @@ -428,7 +428,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().addClass('hidden'); + this.getVisibilityEl().addClass(['hidden','d-none']); this.fireEvent('hide', this); @@ -589,7 +589,8 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @cfg {String} href empty or href * @cfg {Boolean} disabled default false; * @cfg {Boolean} isClose default false; - * @cfg {String} glyphicon depricated - use fs + * @cfg {String} glyphicon depricated - use fa + * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc.. * @cfg {String} badge text for badge * @cfg {String} theme (default|glow) * @cfg {Boolean} inverse dark themed version @@ -2409,7 +2410,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, false, false); + this.show(this.triggerEl, '?', false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ @@ -2641,7 +2642,7 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, { * @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 + * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left * @cfg {Boolean} animate default true * @cfg {Boolean} allow_close default true * @cfg {Boolean} fitwindow default false @@ -2767,7 +2768,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); },this); } @@ -2809,7 +2810,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; if (this.allow_close && Roo.bootstrap.version == 3) { @@ -2835,7 +2836,26 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.size.length){ size = 'modal-' + this.size; } + + var footer = Roo.bootstrap.version == 3 ? + { + cls : 'modal-footer', + cn : [ + { + tag: 'div', + cls: 'btn-' + this.buttonPosition + } + ] + + } : + { // BS4 uses mr-auto on left buttons.... + cls : 'modal-footer' + }; + + + + var modal = { cls: "modal", cn : [ @@ -2850,18 +2870,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -2884,7 +2893,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, getButtonContainer : function() { - return this.el.select('.modal-footer div',true).first(); + + return Roo.bootstrap.version == 4 ? + this.el.select('.modal-footer',true).first() + : this.el.select('.modal-footer div',true).first(); }, initEvents : function() @@ -2896,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2905,9 +2918,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { ); if (this.fitwindow) { + + this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, - this.height || Roo.lib.Dom.getViewportHeight(true) - 60 + this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 ); return; } @@ -2968,7 +2983,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { 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; + (function(){ this.el.addClass('show'); this.el.addClass('in'); @@ -3060,7 +3075,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); return btn; @@ -3070,22 +3085,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { //this.el.select('.modal-footer').() }, - diff : false, resizeTo: function(w,h) { - // skip.. ?? why?? - this.dialogEl.setWidth(w); - if (this.diff === false) { - this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight(); - } - - this.bodyEl.setHeight(h - this.diff); + + var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30 + this.bodyEl.setHeight(h - diff); + this.fireEvent('resize', this); - }, + setContentSize : function(w, h) { @@ -3312,10 +3323,11 @@ Roo.bootstrap.MessageBox = function(){ buttons["cancel"].hide(); buttons["yes"].hide(); buttons["no"].hide(); - //dlg.footer.dom.style.display = 'none'; + dlg.footerEl.hide(); + return width; } - dlg.footerEl.dom.style.display = ''; + dlg.footerEl.show(); for(var k in buttons){ if(typeof buttons[k] != "function"){ if(b[k]){ @@ -3592,6 +3604,9 @@ Roo.Msg.show({ textareaEl.hide(); } progressEl.setDisplayed(opt.progress === true); + if (opt.progress) { + d.animate = false; // do not animate progress, as it may not have finished animating before we close it.. + } this.updateProgress(0); activeTextEl.dom.value = opt.value || ""; if(opt.prompt){ @@ -4004,14 +4019,23 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar navbar-expand-lg' + cls : 'navbar navbar-expand-lg roo-navbar-simple' }; if (['light','white'].indexOf(this.weight) > -1) { cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; } cfg.cls += ' bg-' + this.weight; - + if (this.inverse) { + cfg.cls += ' navbar-inverse'; + + } + + // i'm not actually sure these are really used - normally we add a navGroup to a navbar + + //if (Roo.bootstrap.version == 4) { + // return cfg; + //} cfg.cn = [ { @@ -4022,7 +4046,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { this.type = this.type || 'nav'; - if (['tabs','pills'].indexOf(this.type)!==-1) { + if (['tabs','pills'].indexOf(this.type) != -1) { cfg.cn[0].cls += ' nav-' + this.type @@ -4036,7 +4060,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { - if (['stacked','justified'].indexOf(this.arrangement)!==-1) { + if (['stacked','justified'].indexOf(this.arrangement) != -1) { cfg.cn[0].cls += ' nav-' + this.arrangement; } @@ -4045,10 +4069,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { cfg.cn[0].cls += ' navbar-right'; } - if (this.inverse) { - cfg.cls += ' navbar-inverse'; - - } + return cfg; @@ -4166,6 +4187,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default'; + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) { cfg.cls += ' navbar-' + this.position + ' ' + this.position ; @@ -4342,15 +4369,22 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { tag : 'ul', cls: 'nav' }; - - if (['tabs','pills'].indexOf(this.type)!==-1) { - cfg.cls += ' nav-' + this.type - } else { - if (this.type!=='nav') { - Roo.log('nav type must be nav/tabs/pills') - } - cfg.cls += ' navbar-nav' - } + if (Roo.bootstrap.version == 4) { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type; + } else { + cfg.cls += ' navbar-nav'; + } + } else { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type + } else { + if (this.type !== 'nav') { + Roo.log('nav type must be nav/tabs/pills') + } + cfg.cls += ' navbar-nav' + } + } if (this.parent() && this.parent().sidebar) { cfg = { @@ -4364,7 +4398,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { if (this.form === true) { cfg = { tag: 'form', - cls: 'navbar-form' + cls: 'navbar-form form-inline' }; if (this.align === 'right') { @@ -4451,7 +4485,10 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { */ addItem : function(cfg) { - var cn = new Roo.bootstrap.NavItem(cfg); + if (this.form && Roo.bootstrap.version == 4) { + cfg.tag = 'div'; + } + var cn = new Roo.bootstrap.NavItem(cfg); this.register(cn); cn.parentId = this.id; cn.onRender(this.el, null); @@ -4577,6 +4614,8 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @extends Roo.bootstrap.Component * Bootstrap Navbar.NavItem class * @cfg {String} href link to + * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none + * @cfg {String} html content of button * @cfg {String} badge text inside badge * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge @@ -4638,16 +4677,20 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { preventDefault : false, tabId : false, tagtype : 'a', + tag: 'li', disabled : false, animateRef : false, was_active : false, + button_weight : '', + button_outline : false, + + navLink: false, getAutoCreate : function(){ var cfg = { - tag: 'li', + tag: this.tag, cls: 'nav-item' - }; if (this.active) { @@ -4656,6 +4699,27 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (this.disabled) { cfg.cls += ' disabled'; } + + // BS4 only? + if (this.button_weight.length) { + cfg.tag = this.href ? 'a' : 'button'; + cfg.html = this.html || ''; + cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight; + if (this.href) { + cfg.href = this.href; + } + if (this.fa) { + cfg.html = ' ' + this.html + ''; + } + + // menu .. should add dropdown-menu class - so no need for carat.. + + if (this.badge !== '') { + + cfg.html += ' ' + this.badge + ''; + } + return cfg; + } if (this.href || this.html || this.glyphicon || this.icon || this.fa) { cfg.cn = [ @@ -4669,10 +4733,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.cn[0].cls = 'nav-link'; } if (this.icon) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if (this.fa) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; @@ -4694,6 +4758,19 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { return cfg; }, + onRender : function(ct, position) + { + // Roo.log("Call onRender: " + this.xtype); + if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') { + this.tag = 'div'; + } + + var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + this.navLink = this.el.select('.nav-link',true).first(); + return ret; + }, + + initEvents: function() { if (typeof (this.menu) != 'undefined') { @@ -4795,8 +4872,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (!state ) { this.el.removeClass('active'); + this.navLink ? this.navLink.removeClass('active') : false; } else if (!this.el.hasClass('active')) { + this.el.addClass('active'); + if (Roo.bootstrap.version == 4 && this.navLink ) { + this.navLink.addClass('active'); + } + } if (fire) { this.fireEvent('changed', this, state); @@ -8949,12 +9032,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid */ invalidClass : "has-warning", /** - * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid") + * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid */ validClass : "has-success", @@ -9233,7 +9316,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -9367,9 +9450,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { cfg.cls += ' navbar-form'; } - if (this.parentType === 'NavGroup') { - cfg.cls += ' navbar-form'; - cfg.tag = 'li'; + if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) { + // on BS4 we do this only if not form + cfg.cls += ' navbar-form'; + cfg.tag = 'li'; } return cfg; @@ -9705,8 +9789,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } - - this.el.removeClass(this.invalidClass); + + this.el.removeClass([this.invalidClass, 'is-invalid']); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ @@ -9736,7 +9820,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } this.el.removeClass([this.invalidClass, this.validClass]); - + this.inputEl().removeClass(['is-valid', 'is-invalid']); + var feedback = this.el.select('.form-control-feedback', true).first(); if(feedback){ @@ -9755,9 +9840,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { if(this.allowBlank && !this.getRawValue().length){ return; } - - this.el.addClass(this.validClass); - + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.validClass); + } else { + this.inputEl().addClass('is-valid'); + } + if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -9783,11 +9871,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); if(feedback){ - this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]); + this.el.select('.form-control-feedback', true).first().removeClass( + [this.invalidFeedbackClass, this.validFeedbackClass]); } if(this.disabled){ @@ -9802,8 +9892,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); this.indicator.addClass('visible'); } + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.invalidClass); + } else { + this.inputEl().addClass('is-invalid'); + } + - this.el.addClass(this.invalidClass); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ @@ -10150,9 +10245,9 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } - - this.el.removeClass(this.invalidClass); - + this.el.removeClass( this.validClass); + this.inputEl().removeClass('is-invalid'); + if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10176,6 +10271,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10193,8 +10289,12 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.validClass); + } else { + this.inputEl().addClass('is-valid'); + } - this.el.addClass(this.validClass); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ @@ -10221,6 +10321,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10243,9 +10344,14 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { style : 'margin-right:5px;' }, label, true); } - - this.el.addClass(this.invalidClass); + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.invalidClass); + } else { + this.inputEl().addClass('is-invalid'); + } + + // fixme ... this may be depricated need to test.. if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10532,7 +10638,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -13221,12 +13327,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { multiple : false, /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now */ invalidClass : "has-warning", /** - * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid") + * @cfg {String} validClass DEPRICATED - uses BS4 is-valid now */ validClass : "has-success", @@ -13373,6 +13479,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var box = { tag: 'div', + style : 'display: contents', cn: [ { tag: 'input', @@ -13431,7 +13538,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -18251,7 +18358,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { { if(this.transition || typeof(pan) == 'undefined'){ Roo.log("waiting for the transitionend"); - return; + return false; } if (typeof(pan) == 'number') { @@ -18283,22 +18390,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') { + //class="carousel-item carousel-item-next carousel-item-left" + 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.addClass('carousel-item-' + dir); // or prev pan.el.dom.offsetWidth; // find the offset with - causing a reflow? cur.el.addClass(lr); // or right pan.el.addClass(lr); + cur.el.addClass('carousel-item-' +lr); // or right + pan.el.addClass('carousel-item-' +lr); + var _this = this; cur.el.on('transitionend', function() { Roo.log("trans end?"); - pan.el.removeClass([lr,dir]); + pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]); pan.setActive(true); - cur.el.removeClass([lr]); + cur.el.removeClass([lr, 'carousel-item-' + lr]); cur.setActive(false); _this.transition = false; @@ -18490,10 +18603,12 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { href : '', getAutoCreate : function(){ - var cfg = { + + + var cfg = { tag: 'div', // item is needed for carousel - not sure if it has any effect otherwise - cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''), + cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''), html: this.html || '' }; @@ -18505,6 +18620,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { cfg.tabId = this.tabId; } + return cfg; }, @@ -21150,16 +21266,28 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { if(this.inputType == 'radio'){ Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]); - e.findParent('.form-group', false, true).addClass(_this.validClass); + var fg = e.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } }); return; } if(!this.groupId){ - this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - this.el.findParent('.form-group', false, true).addClass(this.validClass); + var fg = this.el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([this.invalidClass, this.validClass]); + fg.addClass(this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } return; } @@ -21170,8 +21298,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } for(var i in group){ - group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - group[i].el.findParent('.form-group', false, true).addClass(this.validClass); + var fg = group[i].el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([this.invalidClass, this.validClass]); + fg.addClass(this.validClass); + } else { + fg.removeClass(['is-valid', 'is-invalid']); + fg.addClass('is-valid'); + } } }, @@ -21200,17 +21334,30 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } if(this.inputType == 'radio'){ + Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){ - e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]); - e.findParent('.form-group', false, true).addClass(_this.invalidClass); + var fg = e.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } }); return; } if(!this.groupId){ - this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - this.el.findParent('.form-group', false, true).addClass(this.invalidClass); + var fg = this.el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } return; } @@ -21221,8 +21368,14 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } for(var i in group){ - group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]); - group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass); + var fg = group[i].el.findParent('.form-group', false, true); + if (Roo.bootstrap.version == 3) { + fg.removeClass([_this.invalidClass, _this.validClass]); + fg.addClass(_this.invalidClass); + } else { + fg.removeClass(['is-invalid', 'is-valid']); + fg.addClass('is-invalid'); + } } }, @@ -21236,8 +21389,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { var label = Roo.bootstrap.FieldLabel.get(this.name + '-group'); if (label && label.iconEl) { - label.iconEl.removeClass(label.validClass); - label.iconEl.removeClass(label.invalidClass); + label.iconEl.removeClass([ label.validClass, label.invalidClass ]); + label.iconEl.removeClass(['is-invalid', 'is-valid']); } }, @@ -23866,9 +24019,7 @@ Roo.extend(Roo.bootstrap.HtmlEditor, Roo.bootstrap.TextArea, { /** * @cfg {String} inputType @hide */ - /** - * @cfg {String} invalidClass @hide - */ + /** * @cfg {String} invalidText @hide */ @@ -23968,7 +24119,8 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, size : 'sm', xtype: 'Button', xns: Roo.bootstrap, - glyphicon : id, + //glyphicon : id, + fa: id, cmd : id || cmd, enableToggle:toggle !== false, html : html || '', @@ -23988,7 +24140,7 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar, xtype: 'Button', size : 'sm', xns: Roo.bootstrap, - glyphicon : 'font', + fa : 'font', //html : 'submit' menu : { xtype: 'Menu', @@ -29173,6 +29325,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, { this.progressDialog = new Roo.bootstrap.Modal({ cls : 'roo-document-manager-progress-dialog', allow_close : false, + animate : false, title : '', buttons : [ { @@ -30288,8 +30441,8 @@ Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, { * @cfg {String} cls class of the element * @cfg {String} target label target * @cfg {Boolean} allowBlank (true|false) target allowBlank default true - * @cfg {String} invalidClass default "text-warning" - * @cfg {String} validClass default "text-success" + * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid + * @cfg {String} validClass DEPRICATED - BS4 uses is-valid * @cfg {String} iconTooltip default "This field is required" * @cfg {String} indicatorpos (left|right) default left * @@ -30411,10 +30564,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { this.indicator.removeClass('visible'); this.indicator.addClass('invisible'); } + if (Roo.bootstrap.version == 3) { + this.el.removeClass(this.invalidClass); + this.el.addClass(this.validClass); + } else { + this.el.removeClass('is-invalid'); + this.el.addClass('is-valid'); + } - this.el.removeClass(this.invalidClass); - - this.el.addClass(this.validClass); this.fireEvent('valid', this); }, @@ -30429,10 +30586,14 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, { this.indicator.removeClass('invisible'); this.indicator.addClass('visible'); } + if (Roo.bootstrap.version == 3) { + this.el.removeClass(this.validClass); + this.el.addClass(this.invalidClass); + } else { + this.el.removeClass('is-valid'); + this.el.addClass('is-invalid'); + } - this.el.removeClass(this.validClass); - - this.el.addClass(this.invalidClass); this.fireEvent('invalid', this, msg); } @@ -34004,21 +34165,23 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { } ] }; - - if(this.indicatorpos == 'left'){ - label.cn.unshift({ - tag : 'i', - cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); - } else { - label.cn.push({ - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }); + if (Roo.bootstrap.version == 3) { + + + if(this.indicatorpos == 'left'){ + label.cn.unshift({ + tag : 'i', + cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }); + } else { + label.cn.push({ + tag : 'i', + cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', + tooltip : 'This field is required' + }); + } } - var items = { tag : 'div', cls : 'roo-radio-set-items' @@ -34170,14 +34333,19 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { markValid : function() { - if(this.labelEl.isVisible(true)){ + if(this.labelEl.isVisible(true) && this.indicatorEl()){ this.indicatorEl().removeClass('visible'); this.indicatorEl().addClass('invisible'); } - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.validClass); + if (Roo.bootstrap.version == 3) { + this.el.removeClass([this.invalidClass, this.validClass]); + this.el.addClass(this.validClass); + } else { + this.el.removeClass(['is-invalid','is-valid']); + this.el.addClass(['is-valid']); + } this.fireEvent('valid', this); }, @@ -34187,13 +34355,17 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input, { return; } - if(this.labelEl.isVisible(true)){ + if(this.labelEl.isVisible(true) && this.indicatorEl()){ this.indicatorEl().removeClass('invisible'); this.indicatorEl().addClass('visible'); } - - this.el.removeClass([this.invalidClass, this.validClass]); - this.el.addClass(this.invalidClass); + if (Roo.bootstrap.version == 3) { + this.el.removeClass([this.invalidClass, this.validClass]); + this.el.addClass(this.invalidClass); + } else { + this.el.removeClass(['is-invalid','is-valid']); + this.el.addClass(['is-invalid']); + } this.fireEvent('invalid', this, msg); @@ -34949,6 +35121,9 @@ Roo.bootstrap.layout.Border = function(config){ Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"]; Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, { + + parent : false, // this might point to a 'nest' or a ??? + /** * Creates and adds a new region if it doesn't already exist. * @param {String} target The target region key (north, south, east, west or center). @@ -35203,13 +35378,18 @@ layout.addxtype({ delete cfg.items; } var nb = false; + + if ( region == 'center') { + Roo.log("Center: " + cfg.title); + } + switch(cfg.xtype) { case 'Content': // ContentPanel (el, cfg) case 'Scroll': // ContentPanel (el, cfg) case 'View': - cfg.autoCreate = true; + cfg.autoCreate = cfg.autoCreate || true; ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!! //} else { // var el = this.el.createChild(); @@ -35780,6 +35960,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { position: '', // set by wrapper (eg. north/south etc..) unrendered_panels : null, // unrendered panels. + + tabPosition : false, + + mgr: false, // points to 'Border' + + createBody : function(){ /** This region's body element * @type Roo.Element */ @@ -35801,15 +35987,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** This region's title element * @type Roo.Element */ - this.titleEl = dh.append(this.el.dom, - { - tag: "div", - unselectable: "on", - cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, - children:[ - {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, - {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} - ]}, true); + this.titleEl = dh.append(this.el.dom, { + tag: "div", + unselectable: "on", + cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, + children:[ + {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, + {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} + ] + }, true); this.titleEl.enableDisplayMode(); /** This region's title text element @@ -35914,7 +36100,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0}; - this.bottomTabs = c.tabPosition != "top"; + this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top"; this.autoScroll = c.autoScroll || false; @@ -36153,11 +36339,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render? var ts = new Roo.bootstrap.panel.Tabs({ - el: this.bodyEl.dom, - tabPosition: this.bottomTabs ? 'bottom' : 'top', - disableTooltips: this.config.disableTabTips, - toolbar : this.config.toolbar - }); + el: this.bodyEl.dom, + region : this, + tabPosition: this.tabPosition ? this.tabPosition : 'top', + disableTooltips: this.config.disableTabTips, + toolbar : this.config.toolbar + }); if(this.config.hideTabs){ ts.stripWrap.setDisplayed(false); @@ -36848,6 +37035,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { + Roo.bootstrap.layout.North = function(config) { config.region = 'north'; @@ -37040,8 +37228,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { } Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); } -}); -Roo.namespace("Roo.bootstrap.panel");/* +});Roo.namespace("Roo.bootstrap.panel");/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37742,6 +37929,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; @@ -37840,7 +38028,7 @@ panel.addxtype({ return this.layout.addxtype(cfg); } -}); /* +});/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37904,15 +38092,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } if(this.tabPosition == "bottom"){ + // if tabs are at the bottom = create the body first. this.bodyEl = Roo.get(this.createBody(this.el.dom)); this.el.addClass("roo-tabs-bottom"); } - this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); - this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); - this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + // next create the tabs holders + + if (this.tabPosition == "west"){ + + var reg = this.region; // fake it.. + while (reg) { + if (!reg.mgr.parent) { + break; + } + reg = reg.mgr.parent.region; + } + Roo.log("got nest?"); + Roo.log(reg); + if (reg.mgr.getRegion('west')) { + var ctrdom = reg.mgr.getRegion('west').bodyEl.dom; + this.stripWrap = Roo.get(this.createStrip(ctrdom ), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + + + } + + + } else { + + this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + } + + if(Roo.isIE){ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden"); } + + // finally - if tabs are at the top, then create the body last.. if(this.tabPosition != "bottom"){ /** The body element that contains {@link Roo.TabPanelItem} bodies. + * @type Roo.Element @@ -38003,7 +38224,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. */ - toolbar : false, + toolbar : false, // set by caller.. + + region : false, /// set by caller + + disableTooltips : true, // not used yet... /** * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one. @@ -38068,9 +38293,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { * Adds an existing {@link Roo.TabPanelItem}. * @param {Roo.TabPanelItem} item The TabPanelItem to add */ - addTabItem : function(item){ + addTabItem : function(item) + { this.items[item.id] = item; this.items.push(item); + this.autoSizeTabs(); // if(this.resizeTabs){ // item.setWidth(this.currentTabWidth || this.preferredTabWidth); // this.autoSizeTabs(); @@ -38152,7 +38379,10 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { * @param {String/Number} id The id or index of the TabPanelItem to activate. * @return {Roo.TabPanelItem} The TabPanelItem. */ - activate : function(id){ + activate : function(id) + { + //Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null; @@ -38218,12 +38448,22 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /** * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing) */ - autoSizeTabs : function(){ + autoSizeTabs : function() + { var count = this.items.length; var vcount = count - this.hiddenCount; + + if (vcount < 2) { + this.stripEl.hide(); + } else { + this.stripEl.show(); + } + if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) { return; } + + var w = Math.max(this.el.getWidth() - this.cpad, 10); var availWidth = Math.floor(w / vcount); var b = this.stripBody; @@ -38283,7 +38523,9 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { createStrip : function(container) { var strip = document.createElement("nav"); - strip.className = "navbar navbar-default"; //"x-tabs-wrap"; + strip.className = Roo.bootstrap.version == 4 ? + "navbar-light bg-light" : + "navbar navbar-default"; //"x-tabs-wrap"; container.appendChild(strip); return strip; }, @@ -38322,7 +38564,7 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { createStripElements : function(stripEl, text, closable, tpl) { var td = document.createElement("li"); // was td.. - + td.className = 'nav-item'; //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]); @@ -38362,12 +38604,18 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { var template = tpl || this.tabTpl || false; if(!template){ - - template = new Roo.Template( - '' + - '{text}' + template = new Roo.Template( + Roo.bootstrap.version == 4 ? + ( + '{text}' + ) : ( + '' + + '{text}' + ) ); } @@ -38434,8 +38682,13 @@ Roo.bootstrap.panel.TabItem = function(config){ /** @private */ this.el = Roo.get(els.el); this.inner = Roo.get(els.inner, true); - this.textEl = Roo.get(this.el.dom.firstChild, true); - this.pnode = Roo.get(els.el.parentNode, true); + this.textEl = Roo.bootstrap.version == 4 ? + this.el : Roo.get(this.el.dom.firstChild, true); + + this.pnode = this.linode = Roo.get(els.el.parentNode, true); + this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode; + + // this.el.on("mousedown", this.onTabMouseDown, this); this.el.on("click", this.onTabClick, this); /** @private */ @@ -38490,7 +38743,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * Shows this TabPanelItem -- this does not deactivate the currently active TabPanelItem. */ show : function(){ - this.pnode.addClass("active"); + this.status_node.addClass("active"); this.showAction(); if(Roo.isOpera){ this.tabPanel.stripWrap.repaint(); @@ -38510,7 +38763,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd. */ hide : function(){ - this.pnode.removeClass("active"); + this.status_node.removeClass("active"); this.hideAction(); this.fireEvent("deactivate", this.tabPanel, this); }, @@ -38557,10 +38810,10 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, }, setWidth : function(width){ - var iwidth = width - this.pnode.getPadding("lr"); + var iwidth = width - this.linode.getPadding("lr"); this.inner.setWidth(iwidth); this.textEl.setWidth(iwidth-this.inner.getPadding("lr")); - this.pnode.setWidth(width); + this.linode.setWidth(width); }, */ /** @@ -38569,7 +38822,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, */ setHidden : function(hidden){ this.hidden = hidden; - this.pnode.setStyle("display", hidden ? "none" : ""); + this.linode.setStyle("display", hidden ? "none" : ""); }, /** @@ -38595,7 +38848,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, * #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.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2); //this.el.endMeasure(); //}, @@ -38624,7 +38877,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, disable : function(){ if(this.tabPanel.active != this){ this.disabled = true; - this.pnode.addClass("disabled"); + this.status_node.addClass("disabled"); } }, @@ -38633,7 +38886,7 @@ Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable, */ enable : function(){ this.disabled = false; - this.pnode.removeClass("disabled"); + this.status_node.removeClass("disabled"); }, /**