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