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

   1 /*
   2  * - LGPL
   3  *
   4  * row
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavSidebarItem
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Navbar.NavSidebarItem class
  12  * @cfg {String} href  link to
  13  * @cfg {String} html content of button
  14  * @cfg {String} badge text inside badge
  15  * @cfg {String} glyphicon name of glyphicon
  16  * @cfg {String} icon name of font awesome icon
  17  * @cfg {Boolean} active Is item active
  18  * @cfg {Boolean} preventDefault (true | false) default false
  19  * @cfg {String} tabId the tab that this item activates.
  20
  21  * @constructor
  22  * Create a new Navbar Button
  23  * @param {Object} config The config object
  24  */
  25 Roo.bootstrap.NavItem = function(config){
  26     Roo.bootstrap.NavItem.superclass.constructor.call(this, config);
  27     this.addEvents({
  28         // raw events
  29         /**
  30          * @event click
  31          * The raw click event for the entire grid.
  32          * @param {Roo.EventObject} e
  33          */
  34         "click" : true,
  35          /**
  36             * @event changed
  37             * Fires when the active item active state changes
  38             * @param {Roo.bootstrap.Navbar.Item} this
  39             * @param {boolean} state the new state
  40
  41          */
  42         'changed': true
  43     });
  44
  45 };
  46
  47 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
  48
  49     href: false,
  50     html: '',
  51     badge: '',
  52     icon: false,
  53     glyphicon: false,
  54     active: false,
  55     preventDefault : false,
  56     tabId : false,
  57
  58     getAutoCreate : function(){
  59
  60         var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
  61
  62
  63         cfg = {
  64             tag: 'li',
  65             cls: '',
  66             cn: [
  67                 {
  68                 tag: 'p',
  69                 cls: '',
  70                 html : ''
  71                 }
  72             ]
  73         }
  74
  75         if (this.html) {
  76             cfg.cn[0].html = this.html;
  77         }
  78
  79         if (this.active) {
  80             this.cls += ' active';
  81         }
  82
  83
  84
  85         if (this.href) {
  86             cfg.cn[0].tag = 'a',
  87             cfg.cn[0].href = this.href;
  88         }
  89
  90         if (this.badge !== '') {
  91             cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
  92         }
  93
  94         if (this.menu) {
  95             cfg.cn[0].cls += ' dropdown-toggle';
  96             cfg.cn[0].html += '<span class="glyphicon glyphicon-chevron-down"></span>';
  97         }
  98
  99         // fixme - this should handle glyphicon or ico
 100         if (this.glyphicon || this.icon) {
 101             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
 102
 103             cfg.cn[0].html = '<i class="' +c+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
 104         }
 105
 106
 107         return cfg;
 108
 109
 110     },
 111     initEvents: function() {
 112        // Roo.log('init events?');
 113        // Roo.log(this.el.dom);
 114         this.el.select('a',true).on('click', this.onClick, this);
 115         // at this point parent should be available..
 116         this.parent().register(this);
 117     },
 118
 119     onClick : function(e)
 120     {
 121         if(this.preventDefault){
 122             e.preventDefault();
 123         }
 124
 125         if(this.fireEvent('click', this, e) === false){
 126             return;
 127         };
 128
 129         if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
 130              if (typeof(this.parent().setActiveItem) !== 'undefined') {
 131                 this.parent().setActiveItem(this);
 132             }
 133
 134
 135
 136         }
 137     },
 138
 139     isActive: function () {
 140         return this.active
 141     },
 142     setActive : function(state, fire)
 143     {
 144         this.active = state;
 145         if (!state ) {
 146             this.el.removeClass('active');
 147         } else if (!this.el.hasClass('active')) {
 148             this.el.addClass('active');
 149         }
 150         if (fire) {
 151             this.fireEvent('changed', this, state);
 152         }
 153
 154
 155     }
 156      // this should not be here...
 157
 158 });
 159
 160
 161