git.roojs.org Git - roojs1/blob - Roo/bootstrap/NavItem.js

   1 /*
   2  * - LGPL
   3  *
   4  * row
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavItem
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Navbar.NavItem class
  12  * @cfg {String} href  link to
  13  * @cfg {String} html content of button
  14  * @cfg {String} badge text inside badge
  15  * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
  16  * @cfg {String} glyphicon DEPRICATED - use fa
  17  * @cfg {String} icon DEPRICATED - use fa
  18  * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
  19  * @cfg {Boolean} active Is item active
  20  * @cfg {Boolean} disabled Is item disabled
  21
  22  * @cfg {Boolean} preventDefault (true | false) default false
  23  * @cfg {String} tabId the tab that this item activates.
  24  * @cfg {String} tagtype (a|span) render as a href or span?
  25  * @cfg {Boolean} animateRef (true|false) link to element default false
  26
  27  * @constructor
  28  * Create a new Navbar Item
  29  * @param {Object} config The config object
  30  */
  31 Roo.bootstrap.NavItem = function(config){
  32     Roo.bootstrap.NavItem.superclass.constructor.call(this, config);
  33     this.addEvents({
  34         // raw events
  35         /**
  36          * @event click
  37          * The raw click event for the entire grid.
  38          * @param {Roo.EventObject} e
  39          */
  40         "click" : true,
  41          /**
  42             * @event changed
  43             * Fires when the active item active state changes
  44             * @param {Roo.bootstrap.NavItem} this
  45             * @param {boolean} state the new state
  46
  47          */
  48         'changed': true,
  49         /**
  50             * @event scrollto
  51             * Fires when scroll to element
  52             * @param {Roo.bootstrap.NavItem} this
  53             * @param {Object} options
  54             * @param {Roo.EventObject} e
  55
  56          */
  57         'scrollto': true
  58     });
  59
  60 };
  61
  62 Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
  63
  64     href: false,
  65     html: '',
  66     badge: '',
  67     icon: false,
  68     fa : false,
  69     glyphicon: false,
  70     active: false,
  71     preventDefault : false,
  72     tabId : false,
  73     tagtype : 'a',
  74     tag: 'li',
  75     disabled : false,
  76     animateRef : false,
  77     was_active : false,
  78
  79     getAutoCreate : function(){
  80
  81         var cfg = {
  82             tag: this.tag,
  83             cls: 'nav-item'
  84
  85         };
  86
  87         if (this.active) {
  88             cfg.cls = typeof(cfg.cls) == 'undefined' ? 'active' : cfg.cls + ' active';
  89         }
  90         if (this.disabled) {
  91             cfg.cls += ' disabled';
  92         }
  93
  94         if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
  95             cfg.cn = [
  96                 {
  97                     tag: this.tagtype,
  98                     href : this.href || "#",
  99                     html: this.html || ''
 100                 }
 101             ];
 102             if (this.tagtype == 'a') {
 103                 cfg.cn[0].cls = 'nav-link';
 104             }
 105             if (this.icon) {
 106                 cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
 107             }
 108             if (this.fa) {
 109                 cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
 110             }
 111             if(this.glyphicon) {
 112                 cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> '  + cfg.cn[0].html;
 113             }
 114
 115             if (this.menu) {
 116
 117                 cfg.cn[0].html += " <span class='caret'></span>";
 118
 119             }
 120
 121             if (this.badge !== '') {
 122
 123                 cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
 124             }
 125         }
 126
 127
 128
 129         return cfg;
 130     },
 131     onRender : function(ct, position)
 132     {
 133        // Roo.log("Call onRender: " + this.xtype);
 134         if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') {
 135             this.tag = 'div';
 136         }
 137
 138         return Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
 139     },
 140
 141
 142     initEvents: function()
 143     {
 144         if (typeof (this.menu) != 'undefined') {
 145             this.menu.parentType = this.xtype;
 146             this.menu.triggerEl = this.el;
 147             this.menu = this.addxtype(Roo.apply({}, this.menu));
 148         }
 149
 150         this.el.select('a',true).on('click', this.onClick, this);
 151
 152         if(this.tagtype == 'span'){
 153             this.el.select('span',true).on('click', this.onClick, this);
 154         }
 155
 156         // at this point parent should be available..
 157         this.parent().register(this);
 158     },
 159
 160     onClick : function(e)
 161     {
 162         if (e.getTarget('.dropdown-menu-item')) {
 163             // did you click on a menu itemm.... - then don't trigger onclick..
 164             return;
 165         }
 166
 167         if(
 168                 this.preventDefault ||
 169                 this.href == '#'
 170         ){
 171             Roo.log("NavItem - prevent Default?");
 172             e.preventDefault();
 173         }
 174
 175         if (this.disabled) {
 176             return;
 177         }
 178
 179         var tg = Roo.bootstrap.TabGroup.get(this.navId);
 180         if (tg && tg.transition) {
 181             Roo.log("waiting for the transitionend");
 182             return;
 183         }
 184
 185
 186
 187         //Roo.log("fire event clicked");
 188         if(this.fireEvent('click', this, e) === false){
 189             return;
 190         };
 191
 192         if(this.tagtype == 'span'){
 193             return;
 194         }
 195
 196         //Roo.log(this.href);
 197         var ael = this.el.select('a',true).first();
 198         //Roo.log(ael);
 199
 200         if(ael && this.animateRef && this.href.indexOf('#') > -1){
 201             //Roo.log(["test:",ael.dom.href.split("#")[0], document.location.toString().split("#")[0]]);
 202             if (ael.dom.href.split("#")[0] != document.location.toString().split("#")[0]) {
 203                 return; // ignore... - it's a 'hash' to another page.
 204             }
 205             Roo.log("NavItem - prevent Default?");
 206             e.preventDefault();
 207             this.scrollToElement(e);
 208         }
 209
 210
 211         var p =  this.parent();
 212
 213         if (['tabs','pills'].indexOf(p.type)!==-1) {
 214             if (typeof(p.setActiveItem) !== 'undefined') {
 215                 p.setActiveItem(this);
 216             }
 217         }
 218
 219         // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
 220         if (p.parentType == 'NavHeaderbar' && !this.menu) {
 221             // remove the collapsed menu expand...
 222             p.parent().el.select('.navbar-collapse',true).removeClass('in');
 223         }
 224     },
 225
 226     isActive: function () {
 227         return this.active
 228     },
 229     setActive : function(state, fire, is_was_active)
 230     {
 231         if (this.active && !state && this.navId) {
 232             this.was_active = true;
 233             var nv = Roo.bootstrap.NavGroup.get(this.navId);
 234             if (nv) {
 235                 nv.clearWasActive(this);
 236             }
 237
 238         }
 239         this.active = state;
 240
 241         if (!state ) {
 242             this.el.removeClass('active');
 243         } else if (!this.el.hasClass('active')) {
 244             this.el.addClass('active');
 245         }
 246         if (fire) {
 247             this.fireEvent('changed', this, state);
 248         }
 249
 250         // show a panel if it's registered and related..
 251
 252         if (!this.navId || !this.tabId || !state || is_was_active) {
 253             return;
 254         }
 255
 256         var tg = Roo.bootstrap.TabGroup.get(this.navId);
 257         if (!tg) {
 258             return;
 259         }
 260         var pan = tg.getPanelByName(this.tabId);
 261         if (!pan) {
 262             return;
 263         }
 264         // if we can not flip to new panel - go back to old nav highlight..
 265         if (false == tg.showPanel(pan)) {
 266             var nv = Roo.bootstrap.NavGroup.get(this.navId);
 267             if (nv) {
 268                 var onav = nv.getWasActive();
 269                 if (onav) {
 270                     onav.setActive(true, false, true);
 271                 }
 272             }
 273
 274         }
 275
 276
 277
 278     },
 279      // this should not be here...
 280     setDisabled : function(state)
 281     {
 282         this.disabled = state;
 283         if (!state ) {
 284             this.el.removeClass('disabled');
 285         } else if (!this.el.hasClass('disabled')) {
 286             this.el.addClass('disabled');
 287         }
 288
 289     },
 290
 291     /**
 292      * Fetch the element to display the tooltip on.
 293      * @return {Roo.Element} defaults to this.el
 294      */
 295     tooltipEl : function()
 296     {
 297         return this.el.select('' + this.tagtype + '', true).first();
 298     },
 299
 300     scrollToElement : function(e)
 301     {
 302         var c = document.body;
 303
 304         /*
 305          * Firefox / IE places the overflow at the html level, unless specifically styled to behave differently.
 306          */
 307         if(Roo.isFirefox || Roo.isIE || Roo.isIE11){
 308             c = document.documentElement;
 309         }
 310
 311         var target = Roo.get(c).select('a[name=' + this.href.split('#')[1] +']', true).first();
 312
 313         if(!target){
 314             return;
 315         }
 316
 317         var o = target.calcOffsetsTo(c);
 318
 319         var options = {
 320             target : target,
 321             value : o[1]
 322         };
 323
 324         this.fireEvent('scrollto', this, options, e);
 325
 326         Roo.get(c).scrollTo('top', options.value, true);
 327
 328         return;
 329     }
 330 });
 331
 332
 333