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
  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     bullets : [],
  40     barItems : [],
  41
  42
  43     getAutoCreate : function()
  44     {
  45         var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
  46
  47         cfg = {
  48             tag : 'ul',
  49             cls: 'roo-navigation-bar'
  50         }
  51
  52         return cfg;
  53
  54     },
  55
  56     onRender : function(ct, position)
  57     {
  58         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
  59
  60         if(this.bullets.length){
  61             Roo.each(this.bullets, function(b){
  62                this.addItem(b);
  63             }, this);
  64         }
  65
  66     },
  67
  68     addItem : function(cfg)
  69     {
  70         var item = new Roo.bootstrap.NavProgressItem(cfg);
  71
  72         item.parentId = this.id;
  73         item.render(this.el, null);
  74
  75         this.barItems.push(item);
  76
  77         this.formatBullets();
  78
  79         return item;
  80     },
  81
  82     getActive : function()
  83     {
  84         var active = false;
  85
  86         Roo.each(this.barItems, function(v){
  87
  88             if (!v.isActive()) {
  89                 return;
  90             }
  91
  92             active = v;
  93             return false;
  94
  95         });
  96
  97         return active;
  98     },
  99
 100     setActiveItem : function(item)
 101     {
 102         var prev = false;
 103
 104         Roo.each(this.barItems, function(v){
 105             if (v.rid == item.rid) {
 106                 return ;
 107             }
 108
 109             if (v.isActive()) {
 110                 v.setActive(false);
 111                 prev = v;
 112             }
 113         });
 114
 115         item.setActive(true);
 116
 117         this.fireEvent('changed', this, item, prev);
 118     },
 119
 120     getBarItem: function(rid)
 121     {
 122         var ret = false;
 123
 124         Roo.each(this.barItems, function(e) {
 125             if (e.rid != rid) {
 126                 return;
 127             }
 128
 129             ret =  e;
 130             return false;
 131         });
 132
 133         return ret;
 134     },
 135
 136     indexOfItem : function(item)
 137     {
 138         var index = false;
 139
 140         Roo.each(this.barItems, function(v, i){
 141
 142             if (v.rid != item.rid) {
 143                 return;
 144             }
 145
 146             index = i;
 147             return false
 148         });
 149
 150         return index;
 151     },
 152
 153     setActiveNext : function()
 154     {
 155         var i = this.indexOfItem(this.getActive());
 156
 157         if (i > this.barItems.length) {
 158             return;
 159         }
 160
 161         this.setActiveItem(this.barItems[i+1]);
 162     },
 163
 164     setActivePrev : function()
 165     {
 166         var i = this.indexOfItem(this.getActive());
 167
 168         if (i  < 1) {
 169             return;
 170         }
 171
 172         this.setActiveItem(this.barItems[i-1]);
 173     },
 174
 175     formatBullets : function()
 176     {
 177         if(!this.barItems.length){
 178             return;
 179         }
 180
 181         var width = 100 / this.barItems.length;
 182
 183         Roo.each(this.barItems, function(i){
 184             i.el.setStyle('width', width + '%');
 185         }, this);
 186     }
 187
 188 });