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
  99         Roo.each(this.barItems, function(v){
 100             if (v.rid == item.rid) {
 101                 return ;
 102             }
 103
 104             if (v.isActive()) {
 105                 v.setActive(false);
 106                 prev = v;
 107             }
 108         });
 109
 110         item.setActive(true);
 111
 112         this.fireEvent('changed', this, item, prev);
 113     }
 114 //
 115 //
 116 //    /**
 117 //    * sets the active Navigation item
 118 //    * @param {Roo.bootstrap.NavProgressItem} the new current navitem
 119 //    */
 120 //    setActiveItem : function(item)
 121 //    {
 122 //        var prev = false;
 123 //        Roo.each(this.items, function(v){
 124 //            if (v == item) {
 125 //                return ;
 126 //            }
 127 //            if (v.isActive()) {
 128 //                v.setActive(false, true);
 129 //                prev = v;
 130 //
 131 //            }
 132 //
 133 //        });
 134 //
 135 //        item.setActive(true, true);
 136 //        this.fireEvent('changed', this, item, prev);
 137 //    },
 138 //
 139 //    /**
 140 //    * gets the active Navigation item
 141 //    * @return {Roo.bootstrap.NavProgressItem} the current navitem
 142 //    */
 143 //    getActive : function()
 144 //    {
 145 //        var active = false;
 146 //
 147 //        Roo.each(this.items, function(v){
 148 //
 149 //            if (!v.isActive()) {
 150 //                return;
 151 //            }
 152 //
 153 //            active = v;
 154 //            return false;
 155 //
 156 //        });
 157 //
 158 //        return active;
 159 //    },
 160 //
 161 //    indexOfNav : function(item)
 162 //    {
 163 //        var index = false;
 164 //
 165 //        Roo.each(this.items, function(v,i){
 166 //
 167 //            if (v != item) {
 168 //                return;
 169 //            }
 170 //
 171 //            index = i;
 172 //            return false
 173 //        });
 174 //
 175 //        return index;
 176 //    },
 177 //
 178     /**
 179     * adds a Navigation item
 180     * @param {Roo.bootstrap.NavProgressItem} the NavProgressItem to add
 181     */
 182
 183 //
 184 //    /**
 185 //    * register a Navigation item
 186 //    * @param {Roo.bootstrap.NavItem} the navitem to add
 187 //    */
 188 //    register : function(item)
 189 //    {
 190 //        this.items.push(item);
 191 //        item.navId = this.navId;
 192 //
 193 //    },
 194 //
 195 //    /**
 196 //    * clear all the Navigation item
 197 //    */
 198 //
 199 //    clearAll : function()
 200 //    {
 201 //        this.items = [];
 202 //        this.el.dom.innerHTML = '';
 203 //    },
 204 //
 205 //    getNavItem: function(tabId)
 206 //    {
 207 //        var ret = false;
 208 //        Roo.each(this.items, function(e) {
 209 //            if (e.tabId == tabId) {
 210 //               ret =  e;
 211 //               return false;
 212 //            }
 213 //            return true;
 214 //
 215 //        });
 216 //        return ret;
 217 //    },
 218 //
 219 //    setActiveNext : function()
 220 //    {
 221 //        var i = this.indexOfNav(this.getActive());
 222 //
 223 //        if (i > this.items.length) {
 224 //            return;
 225 //        }
 226 //
 227 //        this.setActiveItem(this.items[i+1]);
 228 //    },
 229 //
 230 //    setActivePrev : function()
 231 //    {
 232 //        var i = this.indexOfNav(this.getActive());
 233 //
 234 //        if (i  < 1) {
 235 //            return;
 236 //        }
 237 //
 238 //        this.setActiveItem(this.items[i-1]);
 239 //    },
 240 //
 241 //    clearWasActive : function(except) {
 242 //        Roo.each(this.items, function(e) {
 243 //            if (e.tabId != except.tabId && e.was_active) {
 244 //               e.was_active = false;
 245 //               return false;
 246 //            }
 247 //            return true;
 248 //
 249 //        });
 250 //    },
 251 //
 252 //    getWasActive : function ()
 253 //    {
 254 //        var r = false;
 255 //        Roo.each(this.items, function(e) {
 256 //            if (e.was_active) {
 257 //               r = e;
 258 //               return false;
 259 //            }
 260 //            return true;
 261 //
 262 //        });
 263 //        return r;
 264 //    }
 265
 266
 267 });
 268
 269 //
 270 //Roo.apply(Roo.bootstrap.NavProgressBar, {
 271 //
 272 //    groups: {},
 273 //     /**
 274 //    * register a Navigation Group
 275 //    * @param {Roo.bootstrap.NavGroup} the navgroup to add
 276 //    */
 277 //    register : function(bar)
 278 //    {
 279 //        this.groups[bar.navId] = bar;
 280 //
 281 //    },
 282 //    /**
 283 //    * fetch a Navigation Bar based on the navigation ID
 284 //    * @param {string} the nav bar to add
 285 //    * @returns {Roo.bootstrap.NavProgressBar} the nav bar
 286 //    */
 287 //    get: function(navId)
 288 //    {
 289 //        if (typeof(this.groups[navId]) == 'undefined') {
 290 //            return false;
 291 //        }
 292 //
 293 //        return this.groups[navId] ;
 294 //    }
 295 //
 296 //});
 297
 298