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