Roo/bootstrap/NavItem.js

[roojs1] / Roo / bootstrap / NavItem.js

diff --git a/Roo/bootstrap/NavItem.js b/Roo/bootstrap/NavItem.js
index bd1c06e..32654fb 100644 (file)
--- a/Roo/bootstrap/NavItem.js
+++ b/Roo/bootstrap/NavItem.js
@@ -13,8 +13,9 @@
  * @cfg {String} html content of button
  * @cfg {String} badge text inside badge
  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
+ * @cfg {String} glyphicon DEPRICATED - use fa
+ * @cfg {String} icon DEPRICATED - use fa
+ * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
  * @cfg {Boolean} active Is item active
  * @cfg {Boolean} disabled Is item disabled
  
@@ -64,19 +65,23 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     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,
     
+    navLink: false,
+    
     getAutoCreate : function(){
          
         var cfg = {
-            tag: 'li',
+            tag: this.tag,
             cls: 'nav-item'
             
         };
@@ -88,7 +93,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             cfg.cls += ' disabled';
         }
         
-        if (this.href || this.html || this.glyphicon || this.icon) {
+        if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
             cfg.cn = [
                 {
                     tag: this.tagtype,
@@ -96,11 +101,15 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
                     html: this.html || ''
                 }
             ];
-            
+            if (this.tagtype == 'a') {
+               cfg.cn[0].cls = 'nav-link';
+           }
             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 = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
             }
@@ -113,7 +122,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             
             if (this.badge !== '') {
                  
-                cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+                cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
             }
         }
         
@@ -121,6 +130,19 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
         return cfg;
     },
+    onRender : function(ct, position)
+    {
+       // Roo.log("Call onRender: " + this.xtype);
+        if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
+           this.tag = 'div';
+       }
+       
+        var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+       this.navLink = this.el.select('.nav-link',true).first();
+       return ret;
+    },
+      
+    
     initEvents: function() 
     {
         if (typeof (this.menu) != 'undefined') {
@@ -141,11 +163,16 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     
     onClick : function(e)
     {
+        if (e.getTarget('.dropdown-menu-item')) {
+            // did you click on a menu itemm.... - then don't trigger onclick..
+            return;
+        }
+        
         if(
                 this.preventDefault || 
                 this.href == '#' 
         ){
-            
+            Roo.log("NavItem - prevent Default?");
             e.preventDefault();
         }
         
@@ -179,7 +206,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
                 return; // ignore... - it's a 'hash' to another page.
             }
-            
+            Roo.log("NavItem - prevent Default?");
             e.preventDefault();
             this.scrollToElement(e);
         }
@@ -217,8 +244,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
         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);