roojs-bootstrap.js

[roojs1] / Roo / bootstrap / Navbar.js

diff --git a/Roo/bootstrap/Navbar.js b/Roo/bootstrap/Navbar.js
index 81055f4..2a1b8bd 100644 (file)
--- a/Roo/bootstrap/Navbar.js
+++ b/Roo/bootstrap/Navbar.js
@@ -18,7 +18,15 @@
 
 Roo.bootstrap.Navbar = function(config){
     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
-    
+    this.addEvents({
+        // raw events
+        /**
+         * @event beforetoggle
+         * Fire before toggle the menu
+         * @param {Roo.EventObject} e
+         */
+        "beforetoggle" : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
@@ -33,7 +41,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     getAutoCreate : function(){
         
         
-        throw { message : "nav bar is now a abstract base class - use SimpleBar / HeaderBar / SideBar etc..."};
+        throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
         
     },
     
@@ -41,14 +49,44 @@ 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() {
-           // Roo.log('click');
-            this.el.select('.navbar-collapse',true).toggleClass('in');                                 
+            if(this.fireEvent('beforetoggle', this) !== false){
+                var ce = this.el.select('.navbar-collapse',true).first();
+                ce.toggleClass('in'); // old...
+                if (ce.hasClass('collapse')) {
+                    // show it...
+                    ce.removeClass('collapse');
+                    ce.addClass('collapsing');
+                    var h = ce.getHeight();
+                    Roo.log(h);
+                    ce.setHeight(0); // resize it ...
+                    ce.on('transitionend', function() {
+                    
+                        ce.removeClass('collapsing');
+                        ce.addClass('show');
+                        ce.removeClass('collapse');
+
+                        ce.dom.style.height = '';
+                    }, this, { single: true} );
+                    ce.setHeight(h);
+                    
+                } else {
+                    ce.addClass('collapsing');
+                    ce.removeClass('show');
+                    (function() {
+                        ce.removeClass('collapsing');
+                        ce.addClass('collapse');
+                        
+                    }).defer(200);
+                    
+                }
+            }
+            
         }, this);
         
         var mark = {
             tag: "div",
             cls:"x-dlg-mask"
-        }
+        };
         
         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
         
@@ -80,7 +118,8 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     unmask : function()
     {
         this.maskEl.hide();
-    }
+    } 
+