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

   1 /*
   2  * - LGPL
   3  *
   4  * nav progress bar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavProgressBar
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap NavProgressBar class
  12  *
  13  * @constructor
  14  * Create a new nav progress bar - a bar indicating step along a process
  15  * @param {Object} config The config object
  16  */
  17
  18 Roo.bootstrap.NavProgressBar = function(config){
  19     Roo.bootstrap.NavProgressBar.superclass.constructor.call(this, config);
  20
  21     this.bullets = this.bullets || [];
  22
  23 //    Roo.bootstrap.NavProgressBar.register(this);
  24      this.addEvents({
  25         /**
  26              * @event changed
  27              * Fires when the active item changes
  28              * @param {Roo.bootstrap.NavProgressBar} this
  29              * @param {Roo.bootstrap.NavProgressItem} selected The item selected
  30              * @param {Roo.bootstrap.NavProgressItem} prev The previously selected item
  31          */
  32         'changed': true
  33      });
  34
  35 };
  36
  37 Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
  38     /**
  39      * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
  40      * Bullets for the Nav Progress bar for the toolbar
  41      */
  42     bullets : [],
  43     barItems : [],
  44
  45     getAutoCreate : function()
  46     {
  47         var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
  48
  49         cfg = {
  50             tag : 'div',
  51             cls : 'roo-navigation-bar-group',
  52             cn : [
  53                 {
  54                     tag : 'div',
  55                     cls : 'roo-navigation-top-bar'
  56                 },
  57                 {
  58                     tag : 'div',
  59                     cls : 'roo-navigation-bullets-bar',
  60                     cn : [
  61                         {
  62                             tag : 'ul',
  63                             cls : 'roo-navigation-bar'
  64                         }
  65                     ]
  66                 },
  67
  68                 {
  69                     tag : 'div',
  70                     cls : 'roo-navigation-bottom-bar'
  71                 }
  72             ]
  73
  74         };
  75
  76         return cfg;
  77
  78     },
  79
  80     initEvents: function()
  81     {
  82
  83     },
  84
  85     onRender : function(ct, position)
  86     {
  87         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
  88
  89         if(this.bullets.length){
  90             Roo.each(this.bullets, function(b){
  91                this.addItem(b);
  92             }, this);
  93         }
  94
  95         this.format();
  96
  97     },
  98
  99     addItem : function(cfg)
 100     {
 101         var item = new Roo.bootstrap.NavProgressItem(cfg);
 102
 103         item.parentId = this.id;
 104         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
 105
 106         if(cfg.html){
 107             var top = new Roo.bootstrap.Element({
 108                 tag : 'div',
 109                 cls : 'roo-navigation-bar-text'
 110             });
 111
 112             var bottom = new Roo.bootstrap.Element({
 113                 tag : 'div',
 114                 cls : 'roo-navigation-bar-text'
 115             });
 116
 117             top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
 118             bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
 119
 120             var topText = new Roo.bootstrap.Element({
 121                 tag : 'span',
 122                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
 123             });
 124
 125             var bottomText = new Roo.bootstrap.Element({
 126                 tag : 'span',
 127                 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
 128             });
 129
 130             topText.onRender(top.el, null);
 131             bottomText.onRender(bottom.el, null);
 132
 133             item.topEl = top;
 134             item.bottomEl = bottom;
 135         }
 136
 137         this.barItems.push(item);
 138
 139         return item;
 140     },
 141
 142     getActive : function()
 143     {
 144         var active = false;
 145
 146         Roo.each(this.barItems, function(v){
 147
 148             if (!v.isActive()) {
 149                 return;
 150             }
 151
 152             active = v;
 153             return false;
 154
 155         });
 156
 157         return active;
 158     },
 159
 160     setActiveItem : function(item)
 161     {
 162         var prev = false;
 163
 164         Roo.each(this.barItems, function(v){
 165             if (v.rid == item.rid) {
 166                 return ;
 167             }
 168
 169             if (v.isActive()) {
 170                 v.setActive(false);
 171                 prev = v;
 172             }
 173         });
 174
 175         item.setActive(true);
 176
 177         this.fireEvent('changed', this, item, prev);
 178     },
 179
 180     getBarItem: function(rid)
 181     {
 182         var ret = false;
 183
 184         Roo.each(this.barItems, function(e) {
 185             if (e.rid != rid) {
 186                 return;
 187             }
 188
 189             ret =  e;
 190             return false;
 191         });
 192
 193         return ret;
 194     },
 195
 196     indexOfItem : function(item)
 197     {
 198         var index = false;
 199
 200         Roo.each(this.barItems, function(v, i){
 201
 202             if (v.rid != item.rid) {
 203                 return;
 204             }
 205
 206             index = i;
 207             return false
 208         });
 209
 210         return index;
 211     },
 212
 213     setActiveNext : function()
 214     {
 215         var i = this.indexOfItem(this.getActive());
 216
 217         if (i > this.barItems.length) {
 218             return;
 219         }
 220
 221         this.setActiveItem(this.barItems[i+1]);
 222     },
 223
 224     setActivePrev : function()
 225     {
 226         var i = this.indexOfItem(this.getActive());
 227
 228         if (i  < 1) {
 229             return;
 230         }
 231
 232         this.setActiveItem(this.barItems[i-1]);
 233     },
 234
 235     format : function()
 236     {
 237         if(!this.barItems.length){
 238             return;
 239         }
 240
 241         var width = 100 / this.barItems.length;
 242
 243         Roo.each(this.barItems, function(i){
 244             i.el.setStyle('width', width + '%');
 245             i.topEl.el.setStyle('width', width + '%');
 246             i.bottomEl.el.setStyle('width', width + '%');
 247         }, this);
 248
 249     }
 250
 251 });