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, {
{
//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('show');
+
+ ce.setHeight(ce.getHeight()); // resize it ...
+ ce.removeClass('collapsing');
+ ce.addClass('collapsing');
+
+ // now flag it as moving..
+
+
+ (function() { ce.removeClass('collapsing'); }).defer(500);
+ } 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);