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
  43     getAutoCreate : function()
  44     {
  45         var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
  46
  47         cfg = {
  48             tag : 'ul',
  49             cls: 'roo-navigation-bar'
  50         }
  51
  52         return cfg;
  53
  54     },
  55
  56     onRender : function(ct, position)
  57     {
  58         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
  59
  60         if(this.bullets.length){
  61             Roo.each(this.bullets, function(b){
  62                this.addItem(b);
  63             }, this);
  64         }
  65
  66     },
  67
  68     addItem : function(cfg)
  69     {
  70         var item = new Roo.bootstrap.NavProgressItem(cfg);
  71
  72         item.parentId = this.id;
  73         item.onRender(this.el, null);
  74
  75         this.barItems.push(item);
  76
  77         this.formatBullets();
  78
  79         return item;
  80     },
  81
  82     formatBullets : function()
  83     {
  84         if(!this.barItems.length){
  85             return;
  86         }
  87
  88         var width = 100 / this.barItems.length;
  89
  90         Roo.each(this.barItems, function(i){
  91             i.el.setStyle('width', width + '%');
  92         }, this);
  93     },
  94
  95     setActiveItem : function(item)
  96     {
  97         var prev = false;
  98         Roo.each(this.items, function(v){
  99             if (v == item) {
 100                 return ;
 101             }
 102             if (v.isActive()) {
 103                 v.setActive(false, true);
 104                 prev = v;
 105
 106             }
 107
 108         });
 109
 110         item.setActive(true, true);
 111         this.fireEvent('changed', this, item, prev);
 112     }
 113 //
 114 //
 115 //    /**
 116 //    * sets the active Navigation item
 117 //    * @param {Roo.bootstrap.NavProgressItem} the new current navitem
 118 //    */
 119 //    setActiveItem : function(item)
 120 //    {
 121 //        var prev = false;
 122 //        Roo.each(this.items, function(v){
 123 //            if (v == item) {
 124 //                return ;
 125 //            }
 126 //            if (v.isActive()) {
 127 //                v.setActive(false, true);
 128 //                prev = v;
 129 //
 130 //            }
 131 //
 132 //        });
 133 //
 134 //        item.setActive(true, true);
 135 //        this.fireEvent('changed', this, item, prev);
 136 //    },
 137 //
 138 //    /**
 139 //    * gets the active Navigation item
 140 //    * @return {Roo.bootstrap.NavProgressItem} the current navitem
 141 //    */
 142 //    getActive : function()
 143 //    {
 144 //        var active = false;
 145 //
 146 //        Roo.each(this.items, function(v){
 147 //
 148 //            if (!v.isActive()) {
 149 //                return;
 150 //            }
 151 //
 152 //            active = v;
 153 //            return false;
 154 //
 155 //        });
 156 //
 157 //        return active;
 158 //    },
 159 //
 160 //    indexOfNav : function(item)
 161 //    {
 162 //        var index = false;
 163 //
 164 //        Roo.each(this.items, function(v,i){
 165 //
 166 //            if (v != item) {
 167 //                return;
 168 //            }
 169 //
 170 //            index = i;
 171 //            return false
 172 //        });
 173 //
 174 //        return index;
 175 //    },
 176 //
 177     /**
 178     * adds a Navigation item
 179     * @param {Roo.bootstrap.NavProgressItem} the NavProgressItem to add
 180     */
 181
 182 //
 183 //    /**
 184 //    * register a Navigation item
 185 //    * @param {Roo.bootstrap.NavItem} the navitem to add
 186 //    */
 187 //    register : function(item)
 188 //    {
 189 //        this.items.push(item);
 190 //        item.navId = this.navId;
 191 //
 192 //    },
 193 //
 194 //    /**
 195 //    * clear all the Navigation item
 196 //    */
 197 //
 198 //    clearAll : function()
 199 //    {
 200 //        this.items = [];
 201 //        this.el.dom.innerHTML = '';
 202 //    },
 203 //
 204 //    getNavItem: function(tabId)
 205 //    {
 206 //        var ret = false;
 207 //        Roo.each(this.items, function(e) {
 208 //            if (e.tabId == tabId) {
 209 //               ret =  e;
 210 //               return false;
 211 //            }
 212 //            return true;
 213 //
 214 //        });
 215 //        return ret;
 216 //    },
 217 //
 218 //    setActiveNext : function()
 219 //    {
 220 //        var i = this.indexOfNav(this.getActive());
 221 //
 222 //        if (i > this.items.length) {
 223 //            return;
 224 //        }
 225 //
 226 //        this.setActiveItem(this.items[i+1]);
 227 //    },
 228 //
 229 //    setActivePrev : function()
 230 //    {
 231 //        var i = this.indexOfNav(this.getActive());
 232 //
 233 //        if (i  < 1) {
 234 //            return;
 235 //        }
 236 //
 237 //        this.setActiveItem(this.items[i-1]);
 238 //    },
 239 //
 240 //    clearWasActive : function(except) {
 241 //        Roo.each(this.items, function(e) {
 242 //            if (e.tabId != except.tabId && e.was_active) {
 243 //               e.was_active = false;
 244 //               return false;
 245 //            }
 246 //            return true;
 247 //
 248 //        });
 249 //    },
 250 //
 251 //    getWasActive : function ()
 252 //    {
 253 //        var r = false;
 254 //        Roo.each(this.items, function(e) {
 255 //            if (e.was_active) {
 256 //               r = e;
 257 //               return false;
 258 //            }
 259 //            return true;
 260 //
 261 //        });
 262 //        return r;
 263 //    }
 264
 265
 266 });
 267
 268 //
 269 //Roo.apply(Roo.bootstrap.NavProgressBar, {
 270 //
 271 //    groups: {},
 272 //     /**
 273 //    * register a Navigation Group
 274 //    * @param {Roo.bootstrap.NavGroup} the navgroup to add
 275 //    */
 276 //    register : function(bar)
 277 //    {
 278 //        this.groups[bar.navId] = bar;
 279 //
 280 //    },
 281 //    /**
 282 //    * fetch a Navigation Bar based on the navigation ID
 283 //    * @param {string} the nav bar to add
 284 //    * @returns {Roo.bootstrap.NavProgressBar} the nav bar
 285 //    */
 286 //    get: function(navId)
 287 //    {
 288 //        if (typeof(this.groups[navId]) == 'undefined') {
 289 //            return false;
 290 //        }
 291 //
 292 //        return this.groups[navId] ;
 293 //    }
 294 //
 295 //});
 296
 297