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         iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
  52
  53         var cfg = {
  54             tag: 'li',
  55             cls: 'roo-navigation-bar-item',
  56             cn : [
  57                 {
  58                     tag : 'i',
  59                     cls : iconCls
  60                 }
  61             ]
  62         };
  63
  64         if(this.active){
  65             cfg.cls += ' active';
  66         }
  67         if(this.disabled){
  68             cfg.cls += ' disabled';
  69         }
  70
  71         return cfg;
  72     },
  73
  74     disable : function()
  75     {
  76         this.setDisabled(true);
  77     },
  78
  79     enable : function()
  80     {
  81         this.setDisabled(false);
  82     },
  83
  84     initEvents: function()
  85     {
  86         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
  87
  88         this.iconEl.on('click', this.onClick, this);
  89     },
  90
  91     onClick : function(e)
  92     {
  93         e.preventDefault();
  94
  95         if(this.disabled){
  96             return;
  97         }
  98
  99         if(this.fireEvent('click', this, e) === false){
 100             return;
 101         };
 102
 103         this.parent().setActiveItem(this);
 104     },
 105
 106     isActive: function ()
 107     {
 108         return this.active;
 109     },
 110
 111     setActive : function(state)
 112     {
 113         if(this.active == state){
 114             return;
 115         }
 116
 117         this.active = state;
 118
 119         if (state) {
 120             this.el.addClass('active');
 121             return;
 122         }
 123
 124         this.el.removeClass('active');
 125
 126         return;
 127     },
 128
 129     setDisabled : function(state)
 130     {
 131         if(this.disabled == state){
 132             return;
 133         }
 134
 135         this.disabled = state;
 136
 137         if (state) {
 138             this.el.addClass('disabled');
 139             return;
 140         }
 141
 142         this.el.removeClass('disabled');
 143     },
 144
 145     tooltipEl : function()
 146     {
 147         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
 148     }
 149 });
 150
 151
 152