Roo/bootstrap/NavItem.js

roojs-bootstrap.js
roojs-bootstrap-debug.js

diff --git a/Roo/bootstrap/NavItem.js b/Roo/bootstrap/NavItem.js
index e0ef5f6..53484bb 100644 (file)
--- a/Roo/bootstrap/NavItem.js
+++ b/Roo/bootstrap/NavItem.js
@@ -167,7 +167,6 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
        
         var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
        this.navLink = this.el.select('.nav-link',true).first();
-       this.htmlEl = this.el.select('.nav-html',true).first();
        return ret;
     },
       
@@ -185,7 +184,8 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         //if(this.tagtype == 'span'){
         //    this.el.select('span',true).on('click', this.onClick, this);
         //}
-       
+               this.htmlEl = this.el.select('.nav-html',true).first();
+
         // at this point parent should be available..
         this.parent().register(this);
     },

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index bf44b9e..7f41f5e 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -6183,8 +6183,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
                cfg.href = this.href;
            }
            if (this.fa) {
-                cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
-            }
+                cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">' + this.html + '</span>';
+            } else {
+               cfg.cls += " nav-html";
+           }
            
            // menu .. should add dropdown-menu class - so no need for carat..
            
@@ -6200,7 +6202,8 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
                 {
                     tag: this.tagtype,
                     href : this.href || "#",
-                    html: this.html || ''
+                    html: this.html || '',
+                   cls : ''
                 }
             ];
             if (this.tagtype == 'a') {
@@ -6208,23 +6211,21 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
            }
             if (this.icon) {
-                cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
-            }
-           if (this.fa) {
-                cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
-            }
-            if(this.glyphicon) {
+                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>';
             }
         }
@@ -6259,7 +6260,8 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         //if(this.tagtype == 'span'){
         //    this.el.select('span',true).on('click', this.onClick, this);
         //}
-       
+               this.htmlEl = this.el.select('.nav-html',true).first();
+
         // at this point parent should be available..
         this.parent().register(this);
     },
@@ -6439,7 +6441,16 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         Roo.get(c).scrollTo('top', options.value, true);
         
         return;
-    }
+    },
+    /**
+     * Set the HTML (text content) of the item
+     * @param {string} html  content for the nav item
+     */
+    setHtml : function(html)
+    {
+       this.htmlEl.dom.innerHTML = html;
+       
+    } 
 });
  
 

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 5b62445..acb8efd 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -253,11 +253,12 @@ return false;}return true;});return r;}});Roo.apply(Roo.bootstrap.NavGroup,{grou
 // Roo/bootstrap/NavItem.js
 Roo.bootstrap.NavItem=function(A){Roo.bootstrap.NavItem.superclass.constructor.call(this,A);this.addEvents({"click":true,'changed':true,'scrollto':true});};Roo.extend(Roo.bootstrap.NavItem,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 A={tag:this.tag,cls:'nav-item'}
 ;A.cls=typeof(A.cls)=='undefined'?'':A.cls;if(this.active){A.cls+=' active';}if(this.disabled){A.cls+=' disabled';}if(this.button_weight.length){A.tag=this.href?'a':'button';A.html=this.html||'';A.cls+=' btn btn'+(this.button_outline?'-outline':'')+'-'+this.button_weight;
-if(this.href){A.href=this.href;}if(this.fa){A.html='<i class="fa fas fa-'+this.fa+'"></i> <span>'+this.html+'</span>';}if(this.badge!==''){A.html+=' <span class="badge badge-secondary">'+this.badge+'</span>';}return A;}if(this.href||this.html||this.glyphicon||this.icon||this.fa){A.cn=[{tag:this.tagtype,href:this.href||"#",html:this.html||''}
-];if(this.tagtype=='a'){A.cn[0].cls='nav-link'+(this.active?' active':'')+' '+this.linkcls;}if(this.icon){A.cn[0].html='<i class="'+this.icon+'"></i> <span>'+A.cn[0].html+'</span>';}if(this.fa){A.cn[0].html='<i class="fa fas fa-'+this.fa+'"></i> <span>'+A.cn[0].html+'</span>';
-}if(this.glyphicon){A.cn[0].html='<span class="glyphicon glyphicon-'+this.glyphicon+'"></span> '+A.cn[0].html;}if(this.menu){A.cn[0].html+=" <span class='caret'></span>";}if(this.badge!==''){A.cn[0].html+=' <span class="badge badge-secondary">'+this.badge+'</span>';
-}}return A;},onRender:function(ct,A){if(Roo.bootstrap.version==4&&ct.dom.type!='ul'){this.tag='div';}var B=Roo.bootstrap.NavItem.superclass.onRender.call(this,ct,A);this.navLink=this.el.select('.nav-link',true).first();return B;},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=='#'){Roo.log("NavItem - prevent Default?");
+if(this.href){A.href=this.href;}if(this.fa){A.html='<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">'+this.html+'</span>';}else{A.cls+=" nav-html";}if(this.badge!==''){A.html+=' <span class="badge badge-secondary">'+this.badge+'</span>';}return A;
+}if(this.href||this.html||this.glyphicon||this.icon||this.fa){A.cn=[{tag:this.tagtype,href:this.href||"#",html:this.html||'',cls:''}];if(this.tagtype=='a'){A.cn[0].cls='nav-link'+(this.active?' active':'')+' '+this.linkcls;}if(this.icon){A.cn[0].html='<i class="'+this.icon+'"></i> <span class="nav-html">'+A.cn[0].html+'</span>';
+}else if(this.fa){A.cn[0].html='<i class="fa fas fa-'+this.fa+'"></i> <span class="nav-html">'+A.cn[0].html+'</span>';}else if(this.glyphicon){A.cn[0].html='<span class="glyphicon glyphicon-'+this.glyphicon+'"></span> '+A.cn[0].html;}else{A.cn[0].cls+=" nav-html";
+}if(this.menu){A.cn[0].html+=" <span class='caret'></span>";}if(this.badge!==''){A.cn[0].html+=' <span class="badge badge-secondary">'+this.badge+'</span>';}}return A;},onRender:function(ct,A){if(Roo.bootstrap.version==4&&ct.dom.type!='ul'){this.tag='div';
+}var B=Roo.bootstrap.NavItem.superclass.onRender.call(this,ct,A);this.navLink=this.el.select('.nav-link',true).first();return B;},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.htmlEl=this.el.select('.nav-html',true).first();this.parent().register(this);},onClick:function(e){if(e.getTarget('.dropdown-menu-item')){return;}if(this.preventDefault||this.href=='#'){Roo.log("NavItem - prevent Default?");
 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 A=this.el.select('a',true).first();
 if(A&&this.animateRef&&this.href.indexOf('#')>-1){if(A.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(A,B,C){if(this.active&&!A&&this.navId){this.was_active=true;var nv=Roo.bootstrap.NavGroup.get(this.navId);
@@ -265,7 +266,7 @@ if(nv){nv.clearWasActive(this);}}this.active=A;if(!A){this.el.removeClass('activ
 }}if(B){this.fireEvent('changed',this,A);}if(!this.navId||!this.tabId||!A||C){return;}var tg=Roo.bootstrap.TabGroup.get(this.navId);if(!tg){return;}var D=tg.getPanelByName(this.tabId);if(!D){return;}if(false==tg.showPanel(D)){var nv=Roo.bootstrap.NavGroup.get(this.navId);
 if(nv){var E=nv.getWasActive();if(E){E.setActive(true,false,true);}}}},setDisabled:function(A){this.disabled=A;if(!A){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 A=Roo.get(c).select('a[name='+this.href.split('#')[1]+']',true).first();if(!A){return;}var o=A.calcOffsetsTo(c);var B={target:A,value:o[1]}
-;this.fireEvent('scrollto',this,B,e);Roo.get(c).scrollTo('top',B.value,true);return;}});
+;this.fireEvent('scrollto',this,B,e);Roo.get(c).scrollTo('top',B.value,true);return;},setHtml:function(A){this.htmlEl.dom.innerHTML=A;}});
 // Roo/bootstrap/NavSidebarItem.js
 Roo.bootstrap.NavSidebarItem=function(A){Roo.bootstrap.NavSidebarItem.superclass.constructor.call(this,A);this.addEvents({"click":true,'changed':true});};Roo.extend(Roo.bootstrap.NavSidebarItem,Roo.bootstrap.NavItem,{badgeWeight:'default',open:false,buttonView:false,buttonWeight:'default',buttonSize:'md',showArrow:true,getAutoCreate:function(){var a={tag:'a',href:this.href||'#',cls:'',html:'',cn:[]}
 ;if(this.buttonView){a={tag:'button',href:this.href||'#',cls:'btn btn-'+this.buttonWeight+' btn-'+this.buttonSize+'roo-button-dropdown-toggle',html:this.html,cn:[]};}var A={tag:'li',cls:'',cn:[a]};if(this.active){A.cls+=' active';}if(this.disabled){A.cls+=' disabled';