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