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

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