* @class Roo.bootstrap.NavSidebarItem
* @extends Roo.bootstrap.NavItem
* Bootstrap Navbar.NavSidebarItem class
+ * {String} badgeWeight (default|primary|success|info|warning|danger)the extra classes for the badge
* @constructor
* Create a new Navbar Button
* @param {Object} config The config object
Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, {
+ badgeWeight : 'default',
getAutoCreate : function(){
cfg.cls += ' active';
}
+ if (this.disabled) {
+ cfg.cls += ' disabled';
+ }
+
// left icon..
if (this.glyphicon || this.icon) {
var c = this.glyphicon ? ('glyphicon glyphicon-'+this.glyphicon) : this.icon;
a.cn.push(span);
// then badge..
if (this.badge !== '') {
- a.cn.push({ tag: 'span', cls : 'badge pull-right ' + (this.badgecls || ''), html: this.badge });
+
+ a.cn.push({ tag: 'span', cls : 'badge pull-right badge-' + this.badgeWeight, html: this.badge });
}
// fi
if (this.menu) {
return cfg;
+ },
+
+ initEvents : function()
+ {
+ this.el.on('click', this.onClick, this);
+
+ if(this.badge !== ''){
+ this.badgeEl = this.el.select('.badge', true).first().setVisibilityMode(Roo.Element.DISPLAY);
+ }
+
+ },
+
+ onClick : function(e)
+ {
+ if(this.disabled){
+ e.preventDefault();
+ return;
+ }
+
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+
+ this.fireEvent('click', this);
+ },
+
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+
+ return;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setBadge : function(str)
+ {
+ if(!this.badgeEl){
+ return;
+ }
+
+ this.badgeEl.dom.innerHTML = str;
}
+
},
+ _initEventsCalled : false,
+
// private
initEvents: function()
{
+ if (this._initEventsCalled) { // as we call render... prevent looping...
+ return;
+ }
+ this._initEventsCalled = true;
+
if (!this.store) {
throw "can not find store for combo";
}
this.store = Roo.factory(this.store, Roo.data);
+ // if we are building from html. then this element is so complex, that we can not really
+ // use the rendered HTML.
+ // so we have to trash and replace the previous code.
+ if (Roo.XComponent.build_from_html) {
+
+ // remove this element....
+ var e = this.el.dom, k=0;
+ while (e ) { e = e.previousSibling; ++k;}
+
+ this.el.remove();
+
+ this.el=false;
+ this.rendered = false;
+
+ this.render(this.parent().getChildContainer(true), k);
+
+
+
+ }
+
+
/*
* Touch Devices
*/
var _this = this;
if(this.buttons){
- Roo.each(_this.buttons, function(e){
+ Roo.each(_this.buttons, function(e){ // this might need to use render????
Roo.factory(e).onRender(_this.el, null);
});
}
* @cfg {Number} minHeight default 300
* @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
* @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
*
* @constructor
* Create a new UploadCropbox
* @event exception
* Fire when get exception
* @param {Roo.bootstrap.UploadCropbox} this
- * @param {Object} options
+ * @param {XMLHttpRequest} xhr
*/
"exception" : true,
/**
* @param {Roo.bootstrap.UploadCropbox} this
* @param {String} pos
*/
- "rotate" : true
+ "rotate" : true,
+ /**
+ * @event inspect
+ * Fire when inspect the file
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} file
+ */
+ "inspect" : true,
+ /**
+ * @event upload
+ * Fire when xhr upload the file
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} data
+ */
+ "upload" : true,
+ /**
+ * @event arrange
+ * Fire when arrange the file data
+ * @param {Roo.bootstrap.UploadCropbox} this
+ * @param {Object} formData
+ */
+ "arrange" : true
});
this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
buttons : false,
canvasLoaded : false,
isDocument : false,
+ method : 'POST',
+ paramName : 'imageUpload',
getAutoCreate : function()
{
tag : 'div',
cls : 'roo-upload-cropbox',
cn : [
+ {
+ tag : 'input',
+ cls : 'roo-upload-cropbox-selector',
+ type : 'file'
+ },
{
tag : 'div',
cls : 'roo-upload-cropbox-body',
this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+ this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+ this.selectorEl.hide();
+
this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.bodyEl.on(mousewheel, this.onMouseWheel, this);
Roo.get(document).on('mouseup', this.onMouseUp, this);
}
+
+ this.selectorEl.on('change', this.onFileSelected, this);
},
reset : function()
this.cropData = false;
this.notifyEl.dom.innerHTML = this.emptyText;
+ this.selectorEl.dom.value = '';
+
},
resize : function()
beforeSelectFile : function(e)
{
- this.fireEvent('beforeselectfile', this);
+ e.preventDefault();
+
+ if(this.fireEvent('beforeselectfile', this) != false){
+ this.selectorEl.dom.click();
+ }
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+ return;
+ }
+
+ var file = this.selectorEl.dom.files[0];
+
+ if(this.fireEvent('inspect', this, file) != false){
+ this.prepare(file);
+ }
+
},
trash : function(e)
onLoadCanvas : function()
{
+ this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+ this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
+
this.bodyEl.un('click', this.beforeSelectFile, this);
this.notifyEl.hide();
this.thumbEl.show();
this.footerEl.show();
- this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
- this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
-
this.baseRotateLevel();
if(this.isDocument){
this.cropData = canvas.toDataURL(this.cropType);
- this.fireEvent('crop', this, this.cropData);
+ if(this.fireEvent('crop', this, this.cropData) !== false){
+ this.process(this.file, this.cropData);
+ }
+
+ return;
},
},
+ process : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ file.xhr = this.xhr;
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ if(crop){
+ formData.append('crop', crop);
+ }
+
+ if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
+ formData.append(this.paramName, file, file.name);
+ }
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('arrange', this, formData) != false){
+ this.xhr.send(formData);
+ };
+ },
+
+ xhrOnLoad : function(xhr)
+ {
+ if (xhr.readyState !== 4) {
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ if(!response.success){
+ this.fireEvent('exception', this, xhr);
+ return;
+ }
+
+ var response = Roo.decode(xhr.responseText);
+
+ this.fireEvent('upload', this, response);
+
+ },
+
+ xhrOnError : function()
+ {
+ Roo.log('xhr on error');
+
+ var response = Roo.decode(xhr.responseText);
+
+ Roo.log(response);
+
+ },
+
prepare : function(file)
{
this.file = false;
* @cfg {String} paramName default 'imageUpload'
* @cfg {String} method default POST
* @cfg {String} url action url
- * @cfg {Number} boxes number of boxes default 12
+ * @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
* @cfg {Boolean} multiple multiple upload default true
- * @cfg {Number} minWidth default 300
- * @cfg {Number} minHeight default 300
* @cfg {Number} thumbSize default 300
* @cfg {String} fieldLabel
* @cfg {Number} labelWidth default 4
* Fire before select file
* @param {Roo.bootstrap.DocumentManager} this
*/
- "beforeselectfile" : true
+ "beforeselectfile" : true,
+ /**
+ * @event process
+ * Fire before process file
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "process" : true
});
};
Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component, {
- boxes : 12,
+ boxes : 0,
inputName : '',
- minWidth : 300,
- minHeight : 300,
thumbSize : 300,
multiple : true,
files : [],
this.managerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl = this.el.select('.roo-document-manager-selector', true).first();
- this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.selectorEl.hide();
if(this.multiple){
onUploaderClick : function(e)
{
e.preventDefault();
-
+
if(this.fireEvent('beforeselectfile', this) != false){
this.selectorEl.dom.click();
}
return;
}
- if(this.files.length > this.boxes){
+ if(this.boxes > 0 && this.files.length > this.boxes){
this.files = this.files.slice(0, this.boxes);
}
this.uploader.show();
- if(this.files.length > this.boxes - 1){
+ if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
var files = [];
+ var docs = [];
+
Roo.each(this.files, function(file){
if(typeof(file.id) != 'undefined' && file.id * 1 > 0){
return;
}
- this.delegates.push(
+ if(file.type.indexOf('image') != -1){
+ this.delegates.push(
+ (function(){
+ _this.process(file);
+ }).createDelegate(this)
+ );
+
+ return;
+ }
+
+ docs.push(
(function(){
_this.process(file);
}).createDelegate(this)
this.files = files;
+ this.delegates = this.delegates.concat(docs);
+
if(!this.delegates.length){
this.refresh();
return;
{
this.uploader.show();
- if(this.files.length > this.boxes - 1){
+ if(this.boxes > 0 && this.files.length > this.boxes - 1){
this.uploader.hide();
}
this.refresh();
},
+ clear : function()
+ {
+ Roo.each(this.files, function(file){
+ if(!file.target){
+ return;
+ }
+
+ file.target.remove();
+
+ }, this);
+
+ this.files = [];
+
+ this.refresh();
+ },
+
onClick : function(e, el, o)
{
e.preventDefault();
process : function(file)
{
- if(this.editable && file.type.indexOf('image') != -1){
- this.fireEvent('edit', this, file);
- return;
- }
-
- this.uploadStart(file, false);
+ if(this.fireEvent('process', this, file) !== false){
+ if(this.editable && file.type.indexOf('image') != -1){
+ this.fireEvent('edit', this, file);
+ return;
+ }
+
+ this.uploadStart(file, false);
+
+ return;
+ }
- return;
},
uploadStart : function(file, crop)
file.target.addClass('tall');
return;
+ },
+
+ uploadFromSource : function(file, crop)
+ {
+ this.xhr = new XMLHttpRequest();
+
+ this.managerEl.createChild({
+ tag : 'div',
+ cls : 'roo-document-manager-loading',
+ cn : [
+ {
+ tag : 'div',
+ tooltip : file.name,
+ cls : 'roo-document-manager-thumb',
+ html : '<i class="fa fa-circle-o-notch fa-spin"></i>'
+ }
+ ]
+
+ });
+
+ this.xhr.open(this.method, this.url, true);
+
+ var headers = {
+ "Accept": "application/json",
+ "Cache-Control": "no-cache",
+ "X-Requested-With": "XMLHttpRequest"
+ };
+
+ for (var headerName in headers) {
+ var headerValue = headers[headerName];
+ if (headerValue) {
+ this.xhr.setRequestHeader(headerName, headerValue);
+ }
+ }
+
+ var _this = this;
+
+ this.xhr.onload = function()
+ {
+ _this.xhrOnLoad(_this.xhr);
+ }
+
+ this.xhr.onerror = function()
+ {
+ _this.xhrOnError(_this.xhr);
+ }
+
+ var formData = new FormData();
+
+ formData.append('returnHTML', 'NO');
+
+ formData.append('crop', crop);
+
+ if(typeof(file.filename) != 'undefined'){
+ formData.append('filename', file.filename);
+ }
+
+ if(typeof(file.mimetype) != 'undefined'){
+ formData.append('mimetype', file.mimetype);
+ }
+
+ if(this.fireEvent('prepare', this, formData) != false){
+ this.xhr.send(formData);
+ };
}
});
Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
- bullets : false,
- barItems : false,
-
+ 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);
if(this.bullets.length){
- Roo.each(this.bullets, function(i){
-
+ Roo.each(this.bullets, function(b){
+ this.addItem(b);
}, this);
}
+ this.format();
},
- initEvents: function()
+ addItem : function(cfg)
{
- Roo.log('items!!!!!!!!!!!1');
- Roo.log(this.items);
- }
-//
-//
-// /**
-// * 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
-// */
-// addItem : function(cfg)
-// {
-// var cn = new Roo.bootstrap.NavProgressItem(cfg);
-// this.register(cn);
-// cn.parentId = this.id;
-// cn.onRender(this.el, null);
-// return cn;
-// },
-//
-// /**
-// * 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;
-// }
+ var item = new Roo.bootstrap.NavProgressItem(cfg);
+
+ item.parentId = this.id;
+ item.render(this.el.select('.roo-navigation-bar', true).first(), null);
+
+ 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.barItems.push(item);
+
+ return item;
+ },
+ getActive : function()
+ {
+ var active = false;
+
+ Roo.each(this.barItems, function(v){
+
+ if (!v.isActive()) {
+ return;
+ }
+
+ active = v;
+ return false;
+
+ });
+
+ return active;
+ },
-});
-
-//
-//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] ;
-// }
-//
-//});
+ setActiveItem : function(item)
+ {
+ var prev = false;
+
+ Roo.each(this.barItems, function(v){
+ if (v.rid == item.rid) {
+ return ;
+ }
+
+ if (v.isActive()) {
+ v.setActive(false);
+ prev = v;
+ }
+ });
- /*
+ item.setActive(true);
+
+ this.fireEvent('changed', this, item, prev);
+ },
+
+ getBarItem: function(rid)
+ {
+ var ret = false;
+
+ Roo.each(this.barItems, function(e) {
+ if (e.rid != rid) {
+ return;
+ }
+
+ ret = e;
+ return false;
+ });
+
+ return ret;
+ },
+
+ 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);
+
+ }
+
+});
+/*
* - LGPL
*
* Nav Progress Item
* @class Roo.bootstrap.NavProgressItem
* @extends Roo.bootstrap.Component
* Bootstrap NavProgressItem class
+ * @cfg {String} rid the reference id
* @cfg {Boolean} active (true|false) Is item active default false
* @cfg {Boolean} disabled (true|false) Is item active default false
* @cfg {String} html
+ * @cfg {String} position (top|bottom) text position default bottom
+ * @cfg {String} icon show icon instead of number
*
* @constructor
* Create a new NavProgressItem
* @param {Roo.bootstrap.NavProgressItem} this
* @param {Roo.EventObject} e
*/
- "click" : true,
- /**
- * @event changed
- * Fires when the active item active state changes
- * @param {Roo.bootstrap.NavProgressItem} this
- * @param {boolean} state the new state
-
- */
- 'changed': true
+ "click" : true
});
};
Roo.extend(Roo.bootstrap.NavProgressItem, Roo.bootstrap.Component, {
+ rid : '',
active : false,
disabled : false,
html : '',
+ position : 'bottom',
+ icon : false,
getAutoCreate : function()
{
-
+ var iconCls = 'roo-navigation-bar-item-icon';
+
+ iconCls += ((this.icon) ? (' ' + this.icon) : (' step-number')) ;
+
var cfg = {
tag: 'li',
cls: 'roo-navigation-bar-item',
cn : [
{
- tag : 'span',
- cls : 'roo-navigation-bar-item-text',
- html : this.html
+ tag : 'i',
+ cls : iconCls
}
]
}
- if (this.active) {
+ if(this.active){
cfg.cls += ' active';
}
- if (this.disabled) {
+ if(this.disabled){
cfg.cls += ' disabled';
}
return cfg;
},
+ disable : function()
+ {
+ this.setDisabled(true);
+ },
+
+ enable : function()
+ {
+ this.setDisabled(false);
+ },
+
initEvents: function()
{
- Roo.log('bar item init???');
+ this.iconEl = this.el.select('.roo-navigation-bar-item-icon', true).first();
+
+ this.iconEl.on('click', this.onClick, this);
+ },
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ if(this.disabled){
+ return;
+ }
+
+ if(this.fireEvent('click', this, e) === false){
+ return;
+ };
+
+ this.parent().setActiveItem(this);
+ },
+
+ isActive: function ()
+ {
+ return this.active;
+ },
+
+ setActive : function(state)
+ {
+ if(this.active == state){
+ return;
+ }
+
+ this.active = state;
+
+ if (state) {
+ this.el.addClass('active');
+ return;
+ }
+
+ this.el.removeClass('active');
+
+ return;
+ },
+
+ setDisabled : function(state)
+ {
+ if(this.disabled == state){
+ return;
+ }
+
+ this.disabled = state;
+
+ if (state) {
+ this.el.addClass('disabled');
+ return;
+ }
+
+ this.el.removeClass('disabled');
+ },
+
+ tooltipEl : function()
+ {
+ return this.el.select('.roo-navigation-bar-item-icon', true).first();;
}
-//
-// onClick : function(e)
-// {
-// if(
-// this.preventDefault ||
-// this.href == '#'
-// ){
-//
-// e.preventDefault();
-// }
-//
-// if (this.disabled) {
-// return;
-// }
-//
-// var tg = Roo.bootstrap.TabGroup.get(this.navId);
-// if (tg && tg.transition) {
-// Roo.log("waiting for the transitionend");
-// return;
-// }
-//
-//
-//
-// //Roo.log("fire event clicked");
-// if(this.fireEvent('click', this, e) === false){
-// return;
-// };
-//
-// if(this.tagtype == 'span'){
-// return;
-// }
-//
-// //Roo.log(this.href);
-// var ael = this.el.select('a',true).first();
-// //Roo.log(ael);
-//
-// if(ael && this.animateRef && this.href.indexOf('#') > -1){
-// //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
-// if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
-// return; // ignore... - it's a 'hash' to another page.
-// }
-//
-// e.preventDefault();
-// this.scrollToElement(e);
-// }
-//
-//
-// var p = this.parent();
-//
-// if (['tabs','pills'].indexOf(p.type)!==-1) {
-// if (typeof(p.setActiveItem) !== 'undefined') {
-// p.setActiveItem(this);
-// }
-// }
-//
-// // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
-// if (p.parentType == 'NavHeaderbar' && !this.menu) {
-// // remove the collapsed menu expand...
-// p.parent().el.select('.navbar-collapse',true).removeClass('in');
-// }
-// },
-//
-// isActive: function () {
-// return this.active
-// },
-// setActive : function(state, fire, is_was_active)
-// {
-// if (this.active && !state && this.navId) {
-// this.was_active = true;
-// var nv = Roo.bootstrap.NavGroup.get(this.navId);
-// if (nv) {
-// nv.clearWasActive(this);
-// }
-//
-// }
-// this.active = state;
-//
-// if (!state ) {
-// this.el.removeClass('active');
-// } else if (!this.el.hasClass('active')) {
-// this.el.addClass('active');
-// }
-// if (fire) {
-// this.fireEvent('changed', this, state);
-// }
-//
-// // show a panel if it's registered and related..
-//
-// if (!this.navId || !this.tabId || !state || is_was_active) {
-// return;
-// }
-//
-// var tg = Roo.bootstrap.TabGroup.get(this.navId);
-// if (!tg) {
-// return;
-// }
-// var pan = tg.getPanelByName(this.tabId);
-// if (!pan) {
-// return;
-// }
-// // if we can not flip to new panel - go back to old nav highlight..
-// if (false == tg.showPanel(pan)) {
-// var nv = Roo.bootstrap.NavGroup.get(this.navId);
-// if (nv) {
-// var onav = nv.getWasActive();
-// if (onav) {
-// onav.setActive(true, false, true);
-// }
-// }
-//
-// }
-//
-//
-//
-// },
-// // this should not be here...
-// setDisabled : function(state)
-// {
-// this.disabled = state;
-// if (!state ) {
-// this.el.removeClass('disabled');
-// } else if (!this.el.hasClass('disabled')) {
-// this.el.addClass('disabled');
-// }
-//
-// },
-//
-// /**
-// * Fetch the element to display the tooltip on.
-// * @return {Roo.Element} defaults to this.el
-// */
-// tooltipEl : function()
-// {
-// return this.el.select('' + this.tagtype + '', true).first();
-// },
-//
-// scrollToElement : function(e)
-// {
-// var c = document.body;
-//
-// /*
-// * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
-// */
-// if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
-// c = document.documentElement;
-// }
-//
-// var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
-//
-// if(!target){
-// return;
-// }
-//
-// var o = target.calcOffsetsTo(c);
-//
-// var options = {
-// target : target,
-// value : o[1]
-// }
-//
-// this.fireEvent('scrollto', this, options, e);
-//
-// Roo.get(c).scrollTo('top', options.value, true);
-//
-// return;
-// }
});