roojs-bootstrap.js

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 582a196..e5c4270 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -2513,7 +2513,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         if(this.isContainer){
             return {
                 tag: 'li',
-                cls: 'dropdown-menu-item dropdown-item'
+                cls: 'dropdown-menu-item '
             };
         }
         var ctag = {
@@ -2523,6 +2523,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         
         var anc = {
             tag : 'a',
+            cls : 'dropdown-item',
             href : '#',
             cn : [  ]
         };
@@ -2539,7 +2540,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         
         var cfg= {
             tag: 'li',
-            cls: 'dropdown-menu-item dropdown-item',
+            cls: 'dropdown-menu-item',
             cn: [ anc ]
         };
         if (this.parent().type == 'treeview') {
@@ -3861,7 +3862,41 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
         //Roo.log(this.el.select('.navbar-toggle',true));
         this.el.select('.navbar-toggle',true).on('click', function() {
             if(this.fireEvent('beforetoggle', this) !== false){
-               this.el.select('.navbar-collapse',true).toggleClass('in');                                 
+                var ce = this.el.select('.navbar-collapse',true).first();
+                ce.toggleClass('in'); // old...
+                if (ce.hasClass('collapse')) {
+                    // show it...
+                    ce.removeClass('collapse');
+                    ce.addClass('show');
+                    var h = ce.getHeight();
+                    Roo.log(h);
+                    ce.removeClass('show');
+                    // at this point we should be able to see it..
+                    ce.addClass('collapsing');
+                    
+                    ce.setHeight(0); // resize it ...
+                    ce.on('transitionend', function() {
+                        Roo.log('done transition');
+                        ce.removeClass('collapsing');
+                        ce.addClass('show');
+                        ce.removeClass('collapse');
+
+                        ce.dom.style.height = '';
+                    }, this, { single: true} );
+                    ce.setHeight(h);
+                    
+                } else {
+                    ce.setHeight(ce.getHeight());
+                    ce.removeClass('show');
+                    ce.addClass('collapsing');
+                    
+                    ce.on('transitionend', function() {
+                        ce.dom.style.height = '';
+                        ce.removeClass('collapsing');
+                        ce.addClass('collapse');
+                    }, this, { single: true} );
+                    ce.setHeight(0);
+                }
             }
             
         }, this);
@@ -4088,36 +4123,38 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         }
         
         if(this.srButton){
-            cn.push({
-                tag: 'div',
-                cls: 'navbar-header',
+            var btn = {
+                tag: 'button',
+                type: 'button',
+                cls: 'navbar-toggle navbar-toggler',
+                'data-toggle': 'collapse',
                 cn: [
                     {
-                        tag: 'button',
-                        type: 'button',
-                        cls: 'navbar-toggle navbar-toggler',
-                        'data-toggle': 'collapse',
-                        cn: [
-                            {
-                                tag: 'span',
-                                cls: 'sr-only',
-                                html: 'Toggle navigation'
-                            },
-                            {
-                                tag: 'span',
-                                cls: 'icon-bar navbar-toggler-icon'
-                            },
-                            {
-                                tag: 'span',
-                                cls: 'icon-bar'
-                            },
-                            {
-                                tag: 'span',
-                                cls: 'icon-bar'
-                            }
-                        ]
+                        tag: 'span',
+                        cls: 'sr-only',
+                        html: 'Toggle navigation'
+                    },
+                    {
+                        tag: 'span',
+                        cls: 'icon-bar navbar-toggler-icon'
+                    },
+                    {
+                        tag: 'span',
+                        cls: 'icon-bar'
+                    },
+                    {
+                        tag: 'span',
+                        cls: 'icon-bar'
                     }
                 ]
+            };
+            
+            cn.push( Roo.bootstrap.version == 4 ? btn : {
+                tag: 'div',
+                cls: 'navbar-header',
+                cn: [
+                    btn
+                ]
             });
         }
         
@@ -4138,7 +4175,8 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         }
         
         if (this.brand !== '') {
-            cn[0].cn.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
+            var cp =  Roo.bootstrap.version == 4 ? cn : cn[0].cn;
+            cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
                 tag: 'a',
                 href: this.brand_href ? this.brand_href : '#',
                 cls: 'navbar-brand',
@@ -13335,6 +13373,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         var box = {
             tag: 'div',
+            style : 'display: contents',
             cn: [
                 {
                     tag: 'input',
@@ -23930,7 +23969,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 || '',