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..if set to false, Roo.isTouch showing icon, otherwish number
  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 && this.icon) || !this.forceIcon && Roo.isTouch){
  54             iconCls += ' ' + this.icon;
  55         }
  56
  57         var cfg = {
  58             tag: 'li',
  59             cls: 'roo-navigation-bar-item',
  60             cn : [
  61                 {
  62                     tag : 'i',
  63                     cls : iconCls
  64                 },
  65                 {
  66                     tag : 'span',
  67                     cls : 'roo-navigation-bar-item-text ' + this.position,
  68                     html : this.html
  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     render : function(container, position){
  84         if(!this.rendered && this.fireEvent("beforerender", this) !== false){
  85             if(!container && this.el){
  86                 this.el = Roo.get(this.el);
  87                 container = this.el.dom.parentNode;
  88                 this.allowDomMove = false;
  89             }
  90             this.container = Roo.get(container);
  91             this.rendered = true;
  92             if(position !== undefined){
  93                 if(typeof position == 'number'){
  94                     position = this.container.dom.childNodes[position];
  95                 }else{
  96                     position = Roo.getDom(position);
  97                 }
  98             }
  99             this.onRender(container, position || null);
 100
 101             if(this.style){
 102                 this.el.applyStyles(this.style);
 103                 delete this.style;
 104             }
 105             this.fireEvent("render", this);
 106             this.afterRender(this.container);
 107             if(this.hidden){
 108                 this.hide();
 109             }
 110             if(this.disabled){
 111                 this.disable();
 112             }
 113         }
 114         return this;
 115     },
 116
 117     initEvents: function()
 118     {
 119         this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
 120         this.textEl = this.el.select('.roo-navigation-bar-item-text', true).first();
 121
 122         if(Roo.isTouch){
 123             this.textEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
 124         }
 125
 126         this.iconEl.on('click', this.onClick, this);
 127
 128     },
 129
 130     onClick : function(e)
 131     {
 132         e.preventDefault();
 133
 134         if(this.disabled){
 135             return;
 136         }
 137
 138         if(this.fireEvent('click', this, e) === false){
 139             return;
 140         };
 141
 142         this.parent().setActiveItem(this);
 143     },
 144
 145     isActive: function ()
 146     {
 147         return this.active;
 148     },
 149
 150     setActive : function(state)
 151     {
 152         if(this.active == state){
 153             return;
 154         }
 155
 156         this.active = state;
 157
 158         if (state) {
 159             this.el.addClass('active');
 160             return;
 161         }
 162
 163         this.el.removeClass('active');
 164
 165         return;
 166     },
 167
 168     setDisabled : function(state)
 169     {
 170         if(this.disabled == state){
 171             return;
 172         }
 173
 174         this.disabled = state;
 175
 176         if (state) {
 177             this.el.addClass('disabled');
 178             return;
 179         }
 180
 181         this.el.removeClass('disabled');
 182     },
 183
 184     tooltipEl : function()
 185     {
 186         return this.el.select('.roo-navigation-bar-item-icon', true).first();;
 187     }
 188 });
 189
 190
 191