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

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