Roo.bootstrap.nav.Item = function(config){
Roo.bootstrap.nav.Item.superclass.constructor.call(this, config);
this.addEvents({
"click" : true,
'changed': true,
'scrollto': true
});
};
Roo.extend(Roo.bootstrap.nav.Item, Roo.bootstrap.Component, {
href: false,
html: '',
badge: '',
icon: false,
fa : false,
glyphicon: false,
active: false,
preventDefault : false,
tabId : false,
tagtype : 'a',
tag: 'li',
disabled : false,
animateRef : false,
was_active : false,
button_weight : '',
button_outline : false,
linkcls : '',
navLink: false,
getAutoCreate : function(){
var cfg = {
tag: this.tag,
cls: 'nav-item'
};
cfg.cls = typeof(cfg.cls) == 'undefined' ? '' : cfg.cls;
if (this.active) {
cfg.cls += ' active' ;
}
if (this.disabled) {
cfg.cls += ' disabled';
}
if (this.button_weight.length) {
cfg.tag = this.href ? 'a' : 'button';
cfg.html = this.html || '';
cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
if (this.href) {
cfg.href = this.href;
}
if (this.fa) {
cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
} else {
cfg.cls += " nav-html";
}
if (this.badge !== '') {
cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
}
return cfg;
}
if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
cfg.cn = [
{
tag: this.tagtype,
href : this.href || "#",
html: this.html || '',
cls : ''
}
];
if (this.tagtype == 'a') {
cfg.cn[0].cls = 'nav-link' + (this.active ? ' active' : '') + ' ' + this.linkcls;
}
if (this.icon) {
cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
} else if (this.fa) {
cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + cfg.cn[0].html + '</span>';
} else if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
} else {
cfg.cn[0].cls += " nav-html";
}
if (this.menu) {
cfg.cn[0].html += " <span class='caret'></span>";
}
if (this.badge !== '') {
cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
}
}
return cfg;
},
onRender : function(ct, position)
{
if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
this.tag = 'div';
}
var ret = Roo.bootstrap.nav.Item.superclass.onRender.call(this, ct, position);
this.navLink = this.el.select('.nav-link',true).first();
this.htmlEl = this.el.hasClass('nav-html') ? this.el : this.el.select('.nav-html',true).first();
return ret;
},
initEvents: function()
{
if (typeof (this.menu) != 'undefined') {
this.menu.parentType = this.xtype;
this.menu.triggerEl = this.el;
this.menu = this.addxtype(Roo.apply({}, this.menu));
}
this.el.on('click', this.onClick, this);
this.parent().register(this);
},
onClick : function(e)
{
if (e.getTarget('.dropdown-menu-item')) {
return;
}
if(
this.preventDefault ||
this.href === false ||
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;
}
if(this.fireEvent('click', this, e) === false){
return;
};
if(this.tagtype == 'span'){
return;
}
var ael = this.el.select('a',true).first();
if(ael && this.animateRef && this.href.indexOf('#') > -1){
if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
return; }
Roo.log("NavItem - prevent Default?");
e.preventDefault();
this.scrollToElement(e);
}
var p = this.parent();
if (['tabs','pills'].indexOf(p.type)!==-1 && p.pilltype) {
if (typeof(p.setActiveItem) !== 'undefined') {
p.setActiveItem(this);
}
}
if (p.parentType == 'NavHeaderbar' && !this.menu) {
p.parent().el.select('.roo-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.nav.Group.get(this.navId);
if (nv) {
nv.clearWasActive(this);
}
}
this.active = state;
if (!state ) {
this.el.removeClass('active');
this.navLink ? this.navLink.removeClass('active') : false;
} else if (!this.el.hasClass('active')) {
this.el.addClass('active');
if (Roo.bootstrap.version == 4 && this.navLink ) {
this.navLink.addClass('active');
}
}
if (fire) {
this.fireEvent('changed', this, state);
}
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 (false == tg.showPanel(pan)) {
var nv = Roo.bootstrap.nav.Group.get(this.navId);
if (nv) {
var onav = nv.getWasActive();
if (onav) {
onav.setActive(true, false, true);
}
}
}
},
setDisabled : function(state)
{
this.disabled = state;
if (!state ) {
this.el.removeClass('disabled');
} else if (!this.el.hasClass('disabled')) {
this.el.addClass('disabled');
}
},
tooltipEl : function()
{
return this.el; },
scrollToElement : function(e)
{
var c = document.body;
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;
},
setHtml : function(html)
{
this.html = html;
this.htmlEl.dom.innerHTML = html;
}
});