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

   1 /*
   2  * - LGPL
   3  *
   4  * Nav Progress Item
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavProgressItem
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap NavProgressItem class
  12  * @cfg {String} rid the reference id
  13  * @cfg {Boolean} active (true|false) Is item active default false
  14  * @cfg {Boolean} disabled (true|false) Is item active default false
  15  * @cfg {String} html
  16  * @cfg {String} position (top|bottom) text position default bottom
  17  * @cfg {String} icon show icon instead of number
  18  *
  19  * @constructor
  20  * Create a new NavProgressItem
  21  * @param {Object} config The config object
  22  */
  23 Roo.bootstrap.NavProgressItem = function(config){
  24     Roo.bootstrap.NavProgressItem.superclass.constructor.call(this, config);
  25     this.addEvents({
  26         // raw events
  27         /**
  28          * @event click
  29          * The raw click event for the entire grid.
  30          * @param {Roo.bootstrap.NavProgressItem} this
  31          * @param {Roo.EventObject} e
  32          */
  33         "click" : true
  34     });
  35
  36 };
  37
  38 Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component,  {
  39
  40     rid : '',
  41     active : false,
  42     disabled : false,
  43     html : '',
  44     position : 'bottom',
  45     icon : false,
  46
  47     getAutoCreate : function()
  48     {
  49         var iconCls = 'roo-navigation-bar-item-icon';
  50
  51         if(this.icon){
  52             iconCls += (this.icon) ? (' ' + this.icon) : (' step-number') ;
  53         }
  54
  55         var cfg = {
  56             tag: 'li',
  57             cls: 'roo-navigation-bar-item',
  58             cn : [
  59                 {
  60                     tag : 'i',
  61                     cls : iconCls
  62                 }
  63             ]
  64         }
  65
  66         if(this.active){
  67             cfg.cls += ' active';
  68         }
  69         if(this.disabled){
  70             cfg.cls += ' disabled';
  71         }
  72
  73         return cfg;
  74     },
  75
  76     disable : function()
  77     {
  78         this.setDisabled(true);
  79     },
  80
  81     enable : function()
  82     {
  83         this.setDisabled(false);
  84     },
  85
  86     initEvents: function()
  87     {
  88         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
  89
  90         this.iconEl.on('click', this.onClick, this);
  91     },
  92
  93     onClick : function(e)
  94     {
  95         e.preventDefault();
  96
  97         if(this.disabled){
  98             return;
  99         }
 100
 101         if(this.fireEvent('click', this, e) === false){
 102             return;
 103         };
 104
 105         this.parent().setActiveItem(this);
 106     },
 107
 108     isActive: function ()
 109     {
 110         return this.active;
 111     },
 112
 113     setActive : function(state)
 114     {
 115         if(this.active == state){
 116             return;
 117         }
 118
 119         this.active = state;
 120
 121         if (state) {
 122             this.el.addClass('active');
 123             return;
 124         }
 125
 126         this.el.removeClass('active');
 127
 128         return;
 129     },
 130
 131     setDisabled : function(state)
 132     {
 133         if(this.disabled == state){
 134             return;
 135         }
 136
 137         this.disabled = state;
 138
 139         if (state) {
 140             this.el.addClass('disabled');
 141             return;
 142         }
 143
 144         this.el.removeClass('disabled');
 145     },
 146
 147     tooltipEl : function()
 148     {
 149         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
 150     }
 151 });
 152
 153
 154