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