X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2Fbootstrap%2FNavbar.js;h=daab8fe1a070819e694cfbf9e5664a6466fbd6e4;hb=7c297c4be5c3a4bfb6bce8729094a3f06b12eb6f;hp=d7136e8f0f89e4ceb2314ddb4658f4e96acdbc6f;hpb=6ac64539581bf6071511648a066b6e8041a2f30a;p=roojs1

diff --git a/Roo/bootstrap/Navbar.js b/Roo/bootstrap/Navbar.js
index d7136e8f0f..daab8fe1a0 100644
--- a/Roo/bootstrap/Navbar.js
+++ b/Roo/bootstrap/Navbar.js
@@ -9,19 +9,7 @@
  * @class Roo.bootstrap.Navbar
  * @extends Roo.bootstrap.Component
  * Bootstrap Navbar class
- * @cfg {Boolean} bar is a bar?
- * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
- * @cfg {String} brand what is brand
- * @cfg {Boolean} inverse is inverted color
- * @cfg {String} type (nav | pills | tabs)
- * @cfg {Boolean} arrangement stacked | justified
- * @cfg {String} align (left | right) alignment
- * @cfg {String} brand_href href of the brand
- * @cfg {Boolean} main (true|false) main nav bar? default false
- * @cfg {Boolean} loadMask (true|false) loadMask on the bar
- * @cfg {String} tag (header|footer|nav|div) default is nav 
 
- * 
  * @constructor
  * Create a new Navbar
  * @param {Object} config The config object
@@ -30,84 +18,42 @@
 
 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,  {
     
     
-    bar: false,
-    brand: '',
-    inverse: false,
-    position: '',
-    align : false,
-    type: false,
-    arrangement: '',
-    brand_href: false,
-    main : false,
-    loadMask : false,
-    tag : false,
-    
+   
     // private
     navItems : false,
+    loadMask : false,
+    
     
     getAutoCreate : function(){
         
         
+        throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
         
-        var cfg = {
-            cls : 'navbar'
-        };
-	  
-	
-        cfg.cn = [
-            {
-                cls: 'nav',
-                tag : 'ul'
-            }
-        ];
-        
-         
-        this.type = this.type || 'nav';
-        if (['tabs','pills'].indexOf(this.type)!==-1) {
-            cfg.cn[0].cls += ' nav-' + this.type
-        } else {
-            if (this.type!=='nav') {
-                Roo.log('nav type must be nav/tabs/pills')
-            }
-            cfg.cn[0].cls += ' navbar-nav'
-        }
-        
-        if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
-            cfg.cn[0].cls += ' nav-' + this.arrangement;
-        }
-        
-        
-        if (this.align === 'right') {
-            cfg.cn[0].cls += ' navbar-right';
-        }
-        
-        if (this.inverse) {
-            cfg.cls += ' navbar-inverse';
-            
-        }
-        
-        
-        return cfg;
     },
     
     initEvents :function ()
     {
         //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');                                 
-        }, this);
+        this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
         
         var mark = {
             tag: "div",
             cls:"x-dlg-mask"
-        }
+        };
         
         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
         
@@ -124,7 +70,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     
     getChildContainer : function()
     {
-        if (this.bar === true) {
+        if (this.el && this.el.select('.collapse').getCount()) {
             return this.el.select('.collapse',true).first();
         }
         
@@ -139,6 +85,79 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
     unmask : function()
     {
         this.maskEl.hide();
+    },
+    onToggle : function()
+    {
+        
+        if(this.fireEvent('beforetoggle', this) === false){
+            return;
+        }
+        var ce = this.el.select('.navbar-collapse',true).first();
+      
+        if (!ce.hasClass('show')) {
+           this.expand();
+        } else {
+            this.collapse();
+        }
+        
+        
+    
+    },
+    /**
+     * Expand the navbar pulldown 
+     */
+    expand : function ()
+    {
+       
+        var ce = this.el.select('.navbar-collapse',true).first();
+        if (ce.hasClass('collapsing')) {
+            return;
+        }
+        ce.dom.style.height = '';
+               // show it...
+        ce.addClass('in'); // old...
+        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);
+        ce.dom.scrollTop = 0;
+    },
+    /**
+     * Collapse the navbar pulldown 
+     */
+    collapse : function()
+    {
+         var ce = this.el.select('.navbar-collapse',true).first();
+       
+        if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
+            // it's collapsed or collapsing..
+            return;
+        }
+        ce.removeClass('in'); // old...
+        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);
     }