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

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