git.roojs.org Git - roojs1/blob - Roo/bootstrap/Navbar.js

   1 /*
   2  * - LGPL
   3  *
   4  * navbar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Navbar
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Navbar class
  12
  13  * @constructor
  14  * Create a new Navbar
  15  * @param {Object} config The config object
  16  */
  17
  18
  19 Roo.bootstrap.Navbar = function(config){
  20     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
  21     this.addEvents({
  22         // raw events
  23         /**
  24          * @event beforetoggle
  25          * Fire before toggle the menu
  26          * @param {Roo.EventObject} e
  27          */
  28         "beforetoggle" : true
  29     });
  30 };
  31
  32 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  33
  34
  35
  36     // private
  37     navItems : false,
  38     loadMask : false,
  39
  40
  41     getAutoCreate : function(){
  42
  43
  44         throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
  45
  46     },
  47
  48     initEvents :function ()
  49     {
  50         //Roo.log(this.el.select('.navbar-toggle',true));
  51         this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
  52
  53         var mark = {
  54             tag: "div",
  55             cls:"x-dlg-mask"
  56         };
  57
  58         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
  59
  60         var size = this.el.getSize();
  61         this.maskEl.setSize(size.width, size.height);
  62         this.maskEl.enableDisplayMode("block");
  63         this.maskEl.hide();
  64
  65         if(this.loadMask){
  66             this.maskEl.show();
  67         }
  68     },
  69
  70
  71     getChildContainer : function()
  72     {
  73         if (this.el && this.el.select('.collapse').getCount()) {
  74             return this.el.select('.collapse',true).first();
  75         }
  76
  77         return this.el;
  78     },
  79
  80     mask : function()
  81     {
  82         this.maskEl.show();
  83     },
  84
  85     unmask : function()
  86     {
  87         this.maskEl.hide();
  88     },
  89     onToggle : function()
  90     {
  91
  92         if(this.fireEvent('beforetoggle', this) === false){
  93             return;
  94         }
  95         var ce = this.el.select('.roo-navbar-collapse',true).first();
  96
  97         if (!ce.hasClass('show')) {
  98            this.expand();
  99         } else {
 100             this.collapse();
 101         }
 102
 103
 104
 105     },
 106     /**
 107      * Expand the navbar pulldown
 108      */
 109     expand : function ()
 110     {
 111
 112         var ce = this.el.select('.roo-navbar-collapse',true).first();
 113         if (ce.hasClass('collapsing')) {
 114             return;
 115         }
 116         ce.dom.style.height = '';
 117                // show it...
 118         ce.addClass('in'); // old...
 119         ce.removeClass('collapse');
 120         ce.addClass('show');
 121         var h = ce.getHeight();
 122         Roo.log(h);
 123         ce.removeClass('show');
 124         // at this point we should be able to see it..
 125         ce.addClass('collapsing');
 126
 127         ce.setHeight(0); // resize it ...
 128         ce.on('transitionend', function() {
 129             //Roo.log('done transition');
 130             ce.removeClass('collapsing');
 131             ce.addClass('show');
 132             ce.removeClass('collapse');
 133
 134             ce.dom.style.height = '';
 135         }, this, { single: true} );
 136         ce.setHeight(h);
 137         ce.dom.scrollTop = 0;
 138     },
 139     /**
 140      * Collapse the navbar pulldown
 141      */
 142     collapse : function()
 143     {
 144          var ce = this.el.select('.roo-navbar-collapse',true).first();
 145
 146         if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
 147             // it's collapsed or collapsing..
 148             return;
 149         }
 150         ce.removeClass('in'); // old...
 151         ce.setHeight(ce.getHeight());
 152         ce.removeClass('show');
 153         ce.addClass('collapsing');
 154
 155         ce.on('transitionend', function() {
 156             ce.dom.style.height = '';
 157             ce.removeClass('collapsing');
 158             ce.addClass('collapse');
 159         }, this, { single: true} );
 160         ce.setHeight(0);
 161     }
 162
 163
 164
 165 });
 166
 167
 168
 169
 170
 171