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', function() {
  52             if(this.fireEvent('beforetoggle', this) !== false){
  53                 var ce = this.el.select('.navbar-collapse',true).first();
  54                 ce.toggleClass('in'); // old...
  55                 if (ce.hasClass('collapse')) {
  56                     // show it...
  57                     ce.removeClass('collapse');
  58                     ce.addClass('show');
  59                     var h = ce.getHeight();
  60                     Roo.log(h);
  61                     ce.removeClass('show');
  62                     // at this point we should be able to see it..
  63                     ce.addClass('collapsing');
  64
  65                     ce.setHeight(0); // resize it ...
  66                     ce.on('transitionend', function() {
  67                         Roo.log('done transition');
  68                         ce.removeClass('collapsing');
  69                         ce.addClass('show');
  70                         ce.removeClass('collapse');
  71
  72                         ce.dom.style.height = '';
  73                     }, this, { single: true} );
  74                     ce.setHeight(h);
  75
  76                 } else {
  77                     ce.setHeight(ce.getHeight());
  78                     ce.removeClass('show');
  79                     ce.addClass('collapsing');
  80
  81                     ce.on('transitionend', function() {
  82                         ce.dom.style.height = '';
  83                         ce.removeClass('collapsing');
  84                         ce.addClass('collapse');
  85                     }, this, { single: true} );
  86                     ce.setHeight(0);
  87                 }
  88             }
  89
  90         }, this);
  91
  92         var mark = {
  93             tag: "div",
  94             cls:"x-dlg-mask"
  95         };
  96
  97         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
  98
  99         var size = this.el.getSize();
 100         this.maskEl.setSize(size.width, size.height);
 101         this.maskEl.enableDisplayMode("block");
 102         this.maskEl.hide();
 103
 104         if(this.loadMask){
 105             this.maskEl.show();
 106         }
 107     },
 108
 109
 110     getChildContainer : function()
 111     {
 112         if (this.el && this.el.select('.collapse').getCount()) {
 113             return this.el.select('.collapse',true).first();
 114         }
 115
 116         return this.el;
 117     },
 118
 119     mask : function()
 120     {
 121         this.maskEl.show();
 122     },
 123
 124     unmask : function()
 125     {
 126         this.maskEl.hide();
 127     }
 128
 129
 130
 131
 132 });
 133
 134
 135
 136
 137
 138