Roo/bootstrap/Navbar.js

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index b3eff16..94b24b6 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -3861,7 +3861,30 @@ 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');
+                    
+                        ce.setHeight(ce.getHeight()); // resize it ...
+                        ce.removeClass('collapsing');
+                        ce.addClass('collapsing');
+                    
+                    // now flag it as moving..
+                    
+                    
+                    (function() { ce.removeClass('collapsing'); }).defer(500);
+                } else {
+                    ce.addClass('collapsing');
+                    ce.removeClass('show');
+                    (function() {
+                        ce.removeClass('collapsing');
+                        ce.addClass('collapse');
+                    }).defer(200);
+                    
+                }
             }
             
         }, this);
@@ -4088,36 +4111,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 +4163,8 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         }
         
         if (this.brand !== '') {
-            cn[0].cn.push({
+            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',
@@ -4542,8 +4568,9 @@ Roo.apply(Roo.bootstrap.NavGroup, {
  * @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
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
+ * @cfg {String} glyphicon DEPRICATED - use fa
+ * @cfg {String} icon DEPRICATED - use fa
+ * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
  * @cfg {Boolean} active Is item active
  * @cfg {Boolean} disabled Is item disabled
  
@@ -4593,6 +4620,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     html: '',
     badge: '',
     icon: false,
+    fa : false,
     glyphicon: false,
     active: false,
     preventDefault : false,
@@ -4617,7 +4645,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             cfg.cls += ' disabled';
         }
         
-        if (this.href || this.html || this.glyphicon || this.icon) {
+        if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
             cfg.cn = [
                 {
                     tag: this.tagtype,
@@ -4631,7 +4659,9 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             if (this.icon) {
                 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
             }
-
+           if (this.fa) {
+                cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
+            }
             if(this.glyphicon) {
                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
             }