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

   1 /*
   2  * - LGPL
   3  *
   4  * sidebar item
   5  *
   6  *  li
   7  *    <span> icon </span>
   8  *    <span> text </span>
   9  *    <span>badge </span>
  10  */
  11
  12 /**
  13  * @class Roo.bootstrap.NavSidebarItem
  14  * @extends Roo.bootstrap.NavItem
  15  * Bootstrap Navbar.NavSidebarItem class
  16  * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
  17  * {Boolean} open is the menu open
  18  * {Boolean} buttonView use button as the tigger el rather that a (default false)
  19  * {String} buttonWeight (default|primary|success|info|warning|danger)the extra classes for the button
  20  * {String} buttonSize (sm|md|lg)the extra classes for the button
  21  * {Boolean} showArrow show arrow next to the text (default true)
  22  * @constructor
  23  * Create a new Navbar Button
  24  * @param {Object} config The config object
  25  */
  26 Roo.bootstrap.NavSidebarItem = function(config){
  27     Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this, config);
  28     this.addEvents({
  29         // raw events
  30         /**
  31          * @event click
  32          * The raw click event for the entire grid.
  33          * @param {Roo.EventObject} e
  34          */
  35         "click" : true,
  36          /**
  37             * @event changed
  38             * Fires when the active item active state changes
  39             * @param {Roo.bootstrap.NavSidebarItem} this
  40             * @param {boolean} state the new state
  41
  42          */
  43         'changed': true
  44     });
  45
  46 };
  47
  48 Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem,  {
  49
  50     badgeWeight : 'default',
  51
  52     open: false,
  53
  54     buttonView : false,
  55
  56     buttonWeight : 'default',
  57
  58     buttonSize : 'md',
  59
  60     showArrow : true,
  61
  62     getAutoCreate : function(){
  63
  64
  65         var a = {
  66                 tag: 'a',
  67                 href : this.href || '#',
  68                 cls: '',
  69                 html : '',
  70                 cn : []
  71         };
  72
  73         if(this.buttonView){
  74             a = {
  75                 tag: 'button',
  76                 href : this.href || '#',
  77                 cls: 'btn btn-' + this.buttonWeight + ' btn-' + this.buttonSize + 'roo-button-dropdown-toggle',
  78                 html : this.html,
  79                 cn : []
  80             };
  81         }
  82
  83         var cfg = {
  84             tag: 'li',
  85             cls: '',
  86             cn: [ a ]
  87         };
  88
  89         if (this.active) {
  90             cfg.cls += ' active';
  91         }
  92
  93         if (this.disabled) {
  94             cfg.cls += ' disabled';
  95         }
  96         if (this.open) {
  97             cfg.cls += ' open x-open';
  98         }
  99         // left icon..
 100         if (this.glyphicon || this.icon) {
 101             var c = this.glyphicon  ? ('glyphicon glyphicon-'+this.glyphicon)  : this.icon;
 102             a.cn.push({ tag : 'i', cls : c }) ;
 103         }
 104
 105         if(!this.buttonView){
 106             var span = {
 107                 tag: 'span',
 108                 html : this.html || ''
 109             };
 110
 111             a.cn.push(span);
 112
 113         }
 114
 115         if (this.badge !== '') {
 116             a.cn.push({ tag: 'span',  cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
 117         }
 118
 119         if (this.menu) {
 120
 121             if(this.showArrow){
 122                 a.cn.push({ tag : 'i', cls : 'glyphicon glyphicon-chevron-down pull-right'});
 123             }
 124
 125             a.cls += ' dropdown-toggle treeview' ;
 126         }
 127
 128         return cfg;
 129     },
 130
 131     initEvents : function()
 132     {
 133         if (typeof (this.menu) != 'undefined') {
 134             this.menu.parentType = this.xtype;
 135             this.menu.triggerEl = this.el;
 136             this.menu = this.addxtype(Roo.apply({}, this.menu));
 137         }
 138
 139         this.el.on('click', this.onClick, this);
 140
 141         if(this.badge !== ''){
 142             this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
 143         }
 144
 145     },
 146
 147     onClick : function(e)
 148     {
 149         if(this.disabled){
 150             e.preventDefault();
 151             return;
 152         }
 153
 154         if(this.preventDefault){
 155             e.preventDefault();
 156         }
 157
 158         this.fireEvent('click', this);
 159     },
 160
 161     disable : function()
 162     {
 163         this.setDisabled(true);
 164     },
 165
 166     enable : function()
 167     {
 168         this.setDisabled(false);
 169     },
 170
 171     setDisabled : function(state)
 172     {
 173         if(this.disabled == state){
 174             return;
 175         }
 176
 177         this.disabled = state;
 178
 179         if (state) {
 180             this.el.addClass('disabled');
 181             return;
 182         }
 183
 184         this.el.removeClass('disabled');
 185
 186         return;
 187     },
 188
 189     setActive : function(state)
 190     {
 191         if(this.active == state){
 192             return;
 193         }
 194
 195         this.active = state;
 196
 197         if (state) {
 198             this.el.addClass('active');
 199             return;
 200         }
 201
 202         this.el.removeClass('active');
 203
 204         return;
 205     },
 206
 207     isActive: function ()
 208     {
 209         return this.active;
 210     },
 211
 212     setBadge : function(str)
 213     {
 214         if(!this.badgeEl){
 215             return;
 216         }
 217
 218         this.badgeEl.dom.innerHTML = str;
 219     }
 220
 221
 222
 223
 224 });
 225
 226
 227