Uncommited changes synced
[roojs1] / Roo / bootstrap / NavItem.js
index 991d9c1..cc2ce29 100644 (file)
  * @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
  
  * @cfg {Boolean} preventDefault (true | false) default false
  * @cfg {String} tabId the tab that this item activates.
  * @cfg {String} tagtype (a|span) render as a href or span?
- * @cfg {Boolean} animateRef (true|false) link to element default false
+ * @cfg {Boolean} animateRef (true|false) link to element default false  
   
  * @constructor
  * Create a new Navbar Item
@@ -64,11 +65,13 @@ 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,
@@ -76,10 +79,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     getAutoCreate : function(){
          
         var cfg = {
-            tag: 'li',
+            tag: this.tag,
             cls: 'nav-item'
             
-        }
+        };
+        
         if (this.active) {
             cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active';
         }
@@ -87,7 +91,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,
@@ -95,11 +99,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;
             }
@@ -112,7 +120,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>';
             }
         }
         
@@ -120,6 +128,17 @@ 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';
+       }
+       
+        return Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+    },
+      
+    
     initEvents: function() 
     {
         if (typeof (this.menu) != 'undefined') {
@@ -140,11 +159,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 == '#' ||
-                (this.animateRef && this.href.charAt(0) == '#')
+                this.href == '#' 
         ){
+            Roo.log("NavItem - prevent Default?");
             e.preventDefault();
         }
         
@@ -158,7 +182,9 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             return;
         }
         
-        Roo.log("fire event clicked");
+        
+        
+        //Roo.log("fire event clicked");
         if(this.fireEvent('click', this, e) === false){
             return;
         };
@@ -167,23 +193,34 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
             return;
         }
         
-        if(this.animateRef && this.href.charAt(0) == '#'){
+        //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.
+            }
+            Roo.log("NavItem - prevent Default?");
+            e.preventDefault();
             this.scrollToElement(e);
-            return;
         }
         
-        var p = this.parent();
+        
+        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 () {
@@ -191,7 +228,7 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     },
     setActive : function(state, fire, is_was_active)
     {
-        if (this.active && !state & this.navId) {
+        if (this.active && !state && this.navId) {
             this.was_active = true;
             var nv = Roo.bootstrap.NavGroup.get(this.navId);
             if (nv) {
@@ -264,25 +301,29 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
     {
         var c = document.body;
         
-        var target = Roo.get(c).select('a[name=' + this.href.replace('#', '') +']', true).first();
+        /*
+         * 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;
         }
-        
-        Roo.log('target...');
-        Roo.log(target);
-        
+
         var o = target.calcOffsetsTo(c);
         
         var options = {
             target : target,
             value : o[1]
-        }
+        };
+        
         this.fireEvent('scrollto', this, options, e);
-
-        Roo.log(value);
-        Roo.get(c).scrollTo('top', value, true);
+        
+        Roo.get(c).scrollTo('top', options.value, true);
         
         return;
     }