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     getAutoCreate : function()
  43     {
  44         var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
  45
  46         cfg = {
  47             tag : 'div',
  48             cls : 'roo-navigation-bar-group',
  49             cn : [
  50                 {
  51                     tag : 'div',
  52                     cls : 'roo-navigation-bar-top'
  53                 },
  54                 {
  55                     tag : 'ul',
  56                     cls : 'roo-navigation-bar'
  57                 },
  58                 {
  59                     tag : 'div',
  60                     cls : 'roo-navigation-bar-bottom'
  61                 }
  62             ]
  63
  64         };
  65
  66         return cfg;
  67
  68     },
  69
  70     initEvents: function()
  71     {
  72         this.topEl = this.el.select('.roo-navigation-bar-top', true).first();
  73         this.iconEl = this.el.select('.roo-navigation-bar', true).first();
  74         this.bottomEl = this.el.select('.roo-navigation-bar-bottom', true).first();
  75
  76     },
  77
  78     onRender : function(ct, position)
  79     {
  80         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
  81
  82         if(this.bullets.length){
  83             Roo.each(this.bullets, function(b){
  84                this.addItem(b);
  85             }, this);
  86         }
  87
  88     },
  89
  90     addItem : function(cfg)
  91     {
  92         var item = new Roo.bootstrap.NavProgressItem(cfg);
  93
  94         item.parentId = this.id;
  95         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
  96
  97         if(cfg.html){
  98             var html = new Roo.bootstrap.Element({
  99                 tag : 'div',
 100                 cls : 'roo-navigation-bar-text',
 101                 html : cfg.html
 102             });
 103
 104             var pos = (typeof(cfg.position) != 'undefined' && ['top', 'bottom'].indexOf(cfg.position) == -1) ? cfg.position : 'bottom';
 105             Roo.log(cfg);
 106             Roo.log(pos);
 107
 108             Roo.log('.roo-navigation-bar-' + pos);
 109
 110             Roo.log(this.el.select('.roo-navigation-bar-' + pos, true).first());
 111
 112             html.onRender(this.el.select('.roo-navigation-bar-' + pos, true).first(), null);
 113         }
 114
 115         this.barItems.push(item);
 116
 117         this.formatBullets();
 118
 119         return item;
 120     },
 121
 122     getActive : function()
 123     {
 124         var active = false;
 125
 126         Roo.each(this.barItems, function(v){
 127
 128             if (!v.isActive()) {
 129                 return;
 130             }
 131
 132             active = v;
 133             return false;
 134
 135         });
 136
 137         return active;
 138     },
 139
 140     setActiveItem : function(item)
 141     {
 142         var prev = false;
 143
 144         Roo.each(this.barItems, function(v){
 145             if (v.rid == item.rid) {
 146                 return ;
 147             }
 148
 149             if (v.isActive()) {
 150                 v.setActive(false);
 151                 prev = v;
 152             }
 153         });
 154
 155         item.setActive(true);
 156
 157         this.fireEvent('changed', this, item, prev);
 158     },
 159
 160     getBarItem: function(rid)
 161     {
 162         var ret = false;
 163
 164         Roo.each(this.barItems, function(e) {
 165             if (e.rid != rid) {
 166                 return;
 167             }
 168
 169             ret =  e;
 170             return false;
 171         });
 172
 173         return ret;
 174     },
 175
 176     indexOfItem : function(item)
 177     {
 178         var index = false;
 179
 180         Roo.each(this.barItems, function(v, i){
 181
 182             if (v.rid != item.rid) {
 183                 return;
 184             }
 185
 186             index = i;
 187             return false
 188         });
 189
 190         return index;
 191     },
 192
 193     setActiveNext : function()
 194     {
 195         var i = this.indexOfItem(this.getActive());
 196
 197         if (i > this.barItems.length) {
 198             return;
 199         }
 200
 201         this.setActiveItem(this.barItems[i+1]);
 202     },
 203
 204     setActivePrev : function()
 205     {
 206         var i = this.indexOfItem(this.getActive());
 207
 208         if (i  < 1) {
 209             return;
 210         }
 211
 212         this.setActiveItem(this.barItems[i-1]);
 213     },
 214
 215     formatBullets : function()
 216     {
 217         if(!this.barItems.length){
 218             return;
 219         }
 220
 221         var width = 100 / this.barItems.length;
 222
 223         Roo.each(this.barItems, function(i){
 224             i.el.setStyle('width', width + '%');
 225         }, this);
 226     }
 227
 228 });