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