* @class Roo.bootstrap.Navbar
* @extends Roo.bootstrap.Component
* Bootstrap Navbar class
- * @cfg {Boolean} sidebar has side bar
- * @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} disable (true|false) disable the bar, add marks
- *
- *
+
* @constructor
* Create a new Navbar
* @param {Object} config The config object
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, {
- sidebar: false,
- bar: false,
- brand: '',
- inverse: false,
- position: '',
- align : false,
- type: 'nav',
- arrangement: '',
- brand_href: false,
- main : false,
- disable : false,
+
+ // private
+ navItems : false,
+ loadMask : false,
+
getAutoCreate : function(){
- var cfg = {
- cls : 'navbar'
- };
-
- if (this.sidebar === true) {
- cfg = {
- tag: 'div',
- cls: 'sidebar-nav'
- };
- return cfg;
- }
- if (this.bar === true) {
- cfg = {
- tag: 'nav',
- cls: 'navbar',
- role: 'navigation',
- cn: [
- {
- tag: 'div',
- cls: 'navbar-header',
- cn: [
- {
- tag: 'button',
- type: 'button',
- cls: 'navbar-toggle',
- 'data-toggle': 'collapse',
- cn: [
- {
- tag: 'span',
- cls: 'sr-only',
- html: 'Toggle navigation'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- }
- ]
- }
- ]
- },
- {
- tag: 'div',
- cls: 'collapse navbar-collapse'
- }
- ]
- };
-
- cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
-
- if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
- cfg.cls += ' navbar-' + this.position;
- cfg.tag = this.position == 'fixed-bottom' ? 'footer' : 'header';
- }
-
- if (this.brand !== '') {
- cfg.cn[0].cn.push({
- tag: 'a',
- href: this.brand_href ? this.brand_href : '#',
- cls: 'navbar-brand',
- cn: [
- this.brand
- ]
- });
- }
-
- if(this.main){
- cfg.cls += ' main-nav';
- }
-
-
- return cfg;
- } else if (this.bar === false) {
-
- } else {
- Roo.log('Property \'bar\' in of Navbar must be either true or false')
- }
-
- cfg.cn = [
- {
- cls: 'nav',
- tag : 'ul'
- }
- ];
-
- 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;
- }
+ throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
- 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);
+ var size = this.el.getSize();
+ this.maskEl.setSize(size.width, size.height);
+ this.maskEl.enableDisplayMode("block");
+ this.maskEl.hide();
+
+ if(this.loadMask){
+ this.maskEl.show();
+ }
},
getChildContainer : function()
{
- if (this.bar === true) {
+ if (this.el && this.el.select('.collapse').getCount()) {
return this.el.select('.collapse',true).first();
}
return this.el;
+ },
+
+ mask : function()
+ {
+ this.maskEl.show();
+ },
+
+ 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);
}
-
+
+
+
});
+
+
\ No newline at end of file
projects / roojs1 / blobdiff