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