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