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.topEl = this.el.select('.roo-navigation-bar-top', true).first();
  80 //        this.iconEl = this.el.select('.roo-navigation-bar-list', true).first();
  81 //        this.bottomEl = this.el.select('.roo-navigation-bar-bottom', true).first();
  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     },
  96
  97     addItem : function(cfg)
  98     {
  99         var item = new Roo.bootstrap.NavProgressItem(cfg);
 100
 101         item.parentId = this.id;
 102         item.render(this.el.select('.roo-navigation-bar-list', true).first(), null);
 103
 104         if(cfg.html){
 105             var top = new Roo.bootstrap.Element({
 106                 tag : 'div',
 107                 cls : 'roo-navigation-bar-text',
 108                 html : cfg.html
 109             });
 110
 111             var bottom = new Roo.bootstrap.Element({
 112                 tag : 'div',
 113                 cls : 'roo-navigation-bar-text',
 114                 html : cfg.html
 115             });
 116
 117             top.onRender(this.el.select('.roo-navigation-bar-top', true).first(), null);
 118             bottom.onRender(this.el.select('.roo-navigation-bar-bottom', true).first(), null);
 119
 120             top.el.setVisibilityMode(Roo.Element.DISPLAY).hide();
 121             bottom.el.setVisibilityMode(Roo.Element.DISPLAY).show();
 122
 123             if(typeof(cfg.position) != 'undefined' && cfg.position == 'top'){
 124                 top.el.show();
 125                 bottom.el.hide();
 126             }
 127
 128             item.topEl = top;
 129             item.bottomEl = bottom;
 130         }
 131
 132         this.barItems.push(item);
 133
 134         this.formatBullets();
 135
 136         return item;
 137     },
 138
 139     getActive : function()
 140     {
 141         var active = false;
 142
 143         Roo.each(this.barItems, function(v){
 144
 145             if (!v.isActive()) {
 146                 return;
 147             }
 148
 149             active = v;
 150             return false;
 151
 152         });
 153
 154         return active;
 155     },
 156
 157     setActiveItem : function(item)
 158     {
 159         var prev = false;
 160
 161         Roo.each(this.barItems, function(v){
 162             if (v.rid == item.rid) {
 163                 return ;
 164             }
 165
 166             if (v.isActive()) {
 167                 v.setActive(false);
 168                 prev = v;
 169             }
 170         });
 171
 172         item.setActive(true);
 173
 174         this.fireEvent('changed', this, item, prev);
 175     },
 176
 177     getBarItem: function(rid)
 178     {
 179         var ret = false;
 180
 181         Roo.each(this.barItems, function(e) {
 182             if (e.rid != rid) {
 183                 return;
 184             }
 185
 186             ret =  e;
 187             return false;
 188         });
 189
 190         return ret;
 191     },
 192
 193     indexOfItem : function(item)
 194     {
 195         var index = false;
 196
 197         Roo.each(this.barItems, function(v, i){
 198
 199             if (v.rid != item.rid) {
 200                 return;
 201             }
 202
 203             index = i;
 204             return false
 205         });
 206
 207         return index;
 208     },
 209
 210     setActiveNext : function()
 211     {
 212         var i = this.indexOfItem(this.getActive());
 213
 214         if (i > this.barItems.length) {
 215             return;
 216         }
 217
 218         this.setActiveItem(this.barItems[i+1]);
 219     },
 220
 221     setActivePrev : function()
 222     {
 223         var i = this.indexOfItem(this.getActive());
 224
 225         if (i  < 1) {
 226             return;
 227         }
 228
 229         this.setActiveItem(this.barItems[i-1]);
 230     },
 231
 232     formatBullets : function()
 233     {
 234         if(!this.barItems.length){
 235             return;
 236         }
 237
 238         var width = 100 / this.barItems.length;
 239
 240         Roo.each(this.topEl.select('.roo-navigation-bar-text', true).elements, function(el){
 241             el.setStyle('width', width + '%');
 242         });
 243
 244         Roo.each(this.bottomEl.select('.roo-navigation-bar-text', true).elements, function(el){
 245             el.setStyle('width', width + '%');
 246         });
 247
 248         Roo.each(this.iconEl.select('.roo-navigation-bar-item', true).elements, function(el){
 249             el.setStyle('width', width + '%');
 250         });
 251
 252     }
 253
 254 });