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