* Bootstrap NavProgressBar class
*
* @constructor
- * Create a new nav progress bar
+ * Create a new nav progress bar - a bar indicating step along a process
* @param {Object} config The config object
*/
};
Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
-
+ /**
+ * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
bullets : [],
barItems : [],
-
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
cfg = {
- tag : 'ul',
- cls: 'roo-navigation-bar'
- }
+ tag : 'div',
+ cls : 'roo-navigation-bar-group',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-navigation-top-bar'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bullets-bar',
+ cn : [
+ {
+ tag : 'ul',
+ cls : 'roo-navigation-bar'
+ }
+ ]
+ },
+
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bottom-bar'
+ }
+ ]
+
+ };
return cfg;
},
+ initEvents: function()
+ {
+
+ },
+
onRender : function(ct, position)
{
Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
}, this);
}
+ this.format();
+
},
addItem : function(cfg)
var item = new Roo.bootstrap.NavProgressItem(cfg);
item.parentId = this.id;
- item.onRender(this.el, null);
+ item.render(this.el.select('.roo-navigation-bar', true).first(), null);
- this.barItems.push(item);
+ if(cfg.html){
+ var top = new Roo.bootstrap.Element({
+ tag : 'div',
+ cls : 'roo-navigation-bar-text'
+ });
+
+ var bottom = new Roo.bootstrap.Element({
+ tag : 'div',
+ cls : 'roo-navigation-bar-text'
+ });
+
+ top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
+ bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
+
+ var topText = new Roo.bootstrap.Element({
+ tag : 'span',
+ html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
+ });
+
+ var bottomText = new Roo.bootstrap.Element({
+ tag : 'span',
+ html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
+ });
+
+ topText.onRender(top.el, null);
+ bottomText.onRender(bottom.el, null);
+
+ item.topEl = top;
+ item.bottomEl = bottom;
+ }
- this.formatBullets();
+ this.barItems.push(item);
return item;
},
- formatBullets : function()
+ getActive : function()
{
- if(!this.barItems.length){
- return;
- }
+ var active = false;
- var width = 100 / this.barItems.length;
+ Roo.each(this.barItems, function(v){
+
+ if (!v.isActive()) {
+ return;
+ }
+
+ active = v;
+ return false;
+
+ });
- Roo.each(this.barItems, function(i){
- i.el.setStyle('width', width + '%');
- }, this);
+ return active;
},
setActiveItem : function(item)
item.setActive(true);
this.fireEvent('changed', this, item, prev);
- }
-//
-//
-// /**
-// * sets the active Navigation item
-// * @param {Roo.bootstrap.NavProgressItem} the new current navitem
-// */
-// setActiveItem : function(item)
-// {
-// var prev = false;
-// Roo.each(this.items, function(v){
-// if (v == item) {
-// return ;
-// }
-// if (v.isActive()) {
-// v.setActive(false, true);
-// prev = v;
-//
-// }
-//
-// });
-//
-// item.setActive(true, true);
-// this.fireEvent('changed', this, item, prev);
-// },
-//
-// /**
-// * gets the active Navigation item
-// * @return {Roo.bootstrap.NavProgressItem} the current navitem
-// */
-// getActive : function()
-// {
-// var active = false;
-//
-// Roo.each(this.items, function(v){
-//
-// if (!v.isActive()) {
-// return;
-// }
-//
-// active = v;
-// return false;
-//
-// });
-//
-// return active;
-// },
-//
-// indexOfNav : function(item)
-// {
-// var index = false;
-//
-// Roo.each(this.items, function(v,i){
-//
-// if (v != item) {
-// return;
-// }
-//
-// index = i;
-// return false
-// });
-//
-// return index;
-// },
-//
- /**
- * adds a Navigation item
- * @param {Roo.bootstrap.NavProgressItem} the NavProgressItem to add
- */
+ },
+
+ getBarItem: function(rid)
+ {
+ var ret = false;
+
+ Roo.each(this.barItems, function(e) {
+ if (e.rid != rid) {
+ return;
+ }
+
+ ret = e;
+ return false;
+ });
+
+ return ret;
+ },
-//
-// /**
-// * register a Navigation item
-// * @param {Roo.bootstrap.NavItem} the navitem to add
-// */
-// register : function(item)
-// {
-// this.items.push(item);
-// item.navId = this.navId;
-//
-// },
-//
-// /**
-// * clear all the Navigation item
-// */
-//
-// clearAll : function()
-// {
-// this.items = [];
-// this.el.dom.innerHTML = '';
-// },
-//
-// getNavItem: function(tabId)
-// {
-// var ret = false;
-// Roo.each(this.items, function(e) {
-// if (e.tabId == tabId) {
-// ret = e;
-// return false;
-// }
-// return true;
-//
-// });
-// return ret;
-// },
-//
-// setActiveNext : function()
-// {
-// var i = this.indexOfNav(this.getActive());
-//
-// if (i > this.items.length) {
-// return;
-// }
-//
-// this.setActiveItem(this.items[i+1]);
-// },
-//
-// setActivePrev : function()
-// {
-// var i = this.indexOfNav(this.getActive());
-//
-// if (i < 1) {
-// return;
-// }
-//
-// this.setActiveItem(this.items[i-1]);
-// },
-//
-// clearWasActive : function(except) {
-// Roo.each(this.items, function(e) {
-// if (e.tabId != except.tabId && e.was_active) {
-// e.was_active = false;
-// return false;
-// }
-// return true;
-//
-// });
-// },
-//
-// getWasActive : function ()
-// {
-// var r = false;
-// Roo.each(this.items, function(e) {
-// if (e.was_active) {
-// r = e;
-// return false;
-// }
-// return true;
-//
-// });
-// return r;
-// }
+ indexOfItem : function(item)
+ {
+ var index = false;
+
+ Roo.each(this.barItems, function(v, i){
+
+ if (v.rid != item.rid) {
+ return;
+ }
+
+ index = i;
+ return false
+ });
+
+ return index;
+ },
+ setActiveNext : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i > this.barItems.length) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i+1]);
+ },
+
+ setActivePrev : function()
+ {
+ var i = this.indexOfItem(this.getActive());
+
+ if (i < 1) {
+ return;
+ }
+
+ this.setActiveItem(this.barItems[i-1]);
+ },
+
+ format : function()
+ {
+ if(!this.barItems.length){
+ return;
+ }
+
+ var width = 100 / this.barItems.length;
+
+ Roo.each(this.barItems, function(i){
+ i.el.setStyle('width', width + '%');
+ i.topEl.el.setStyle('width', width + '%');
+ i.bottomEl.el.setStyle('width', width + '%');
+ }, this);
+
+ }
});
-
-//
-//Roo.apply(Roo.bootstrap.NavProgressBar, {
-//
-// groups: {},
-// /**
-// * register a Navigation Group
-// * @param {Roo.bootstrap.NavGroup} the navgroup to add
-// */
-// register : function(bar)
-// {
-// this.groups[bar.navId] = bar;
-//
-// },
-// /**
-// * fetch a Navigation Bar based on the navigation ID
-// * @param {string} the nav bar to add
-// * @returns {Roo.bootstrap.NavProgressBar} the nav bar
-// */
-// get: function(navId)
-// {
-// if (typeof(this.groups[navId]) == 'undefined') {
-// return false;
-// }
-//
-// return this.groups[navId] ;
-// }
-//
-//});
-
-
\ No newline at end of file
projects / roojs1 / blobdiff