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

   1 /*
   2  * - LGPL
   3  *
   4  * button
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Button
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Button class
  12  * @cfg {String} html The button content
  13  * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link ) default
  14  * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link ) default (same as button)
  15  * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
  16  * @cfg {String} size (lg|sm|xs)
  17  * @cfg {String} tag (a|input|submit)
  18  * @cfg {String} href empty or href
  19  * @cfg {Boolean} disabled default false;
  20  * @cfg {Boolean} isClose default false;
  21  * @cfg {String} glyphicon depricated - use fa
  22  * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
  23  * @cfg {String} badge text for badge
  24  * @cfg {String} theme (default|glow)
  25  * @cfg {Boolean} inverse dark themed version
  26  * @cfg {Boolean} toggle is it a slidy toggle button
  27  * @cfg {Boolean} pressed　  default null - if the button ahs active state
  28  * @cfg {String} ontext text for on slidy toggle state
  29  * @cfg {String} offtext text for off slidy toggle state
  30  * @cfg {Boolean} preventDefault  default true (stop click event triggering the URL if it's a link.)
  31  * @cfg {Boolean} removeClass remove the standard class..
  32  * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
  33  *
  34  * @constructor
  35  * Create a new button
  36  * @param {Object} config The config object
  37  */
  38
  39
  40 Roo.bootstrap.Button = function(config){
  41     Roo.bootstrap.Button.superclass.constructor.call(this, config);
  42     this.weightClass = ["btn-default btn-outline-secondary",
  43                        "btn-primary",
  44                        "btn-success",
  45                        "btn-info",
  46                        "btn-warning",
  47                        "btn-danger",
  48                        "btn-link"
  49                       ],
  50     this.addEvents({
  51         // raw events
  52         /**
  53          * @event click
  54          * When a butotn is pressed
  55          * @param {Roo.bootstrap.Button} btn
  56          * @param {Roo.EventObject} e
  57          */
  58         "click" : true,
  59          /**
  60          * @event toggle
  61          * After the button has been toggles
  62          * @param {Roo.bootstrap.Button} btn
  63          * @param {Roo.EventObject} e
  64          * @param {boolean} pressed (also available as button.pressed)
  65          */
  66         "toggle" : true
  67     });
  68 };
  69
  70 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
  71     html: false,
  72     active: false,
  73     weight: '',
  74     badge_weight: '',
  75     outline : false,
  76     size: '',
  77     tag: 'button',
  78     href: '',
  79     disabled: false,
  80     isClose: false,
  81     glyphicon: '',
  82     fa: '',
  83     badge: '',
  84     theme: 'default',
  85     inverse: false,
  86
  87     toggle: false,
  88     ontext: 'ON',
  89     offtext: 'OFF',
  90     defaulton: true,
  91     preventDefault: true,
  92     removeClass: false,
  93     name: false,
  94     target: false,
  95
  96     pressed : null,
  97
  98
  99     getAutoCreate : function(){
 100
 101         var cfg = {
 102             tag : 'button',
 103             cls : 'roo-button',
 104             html: ''
 105         };
 106
 107         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
 108             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
 109             this.tag = 'button';
 110         } else {
 111             cfg.tag = this.tag;
 112         }
 113         cfg.html = '<span class="roo-button-text">' + (this.html || cfg.html) + '</span>';
 114
 115         if (this.toggle == true) {
 116             cfg={
 117                 tag: 'div',
 118                 cls: 'slider-frame roo-button',
 119                 cn: [
 120                     {
 121                         tag: 'span',
 122                         'data-on-text':'ON',
 123                         'data-off-text':'OFF',
 124                         cls: 'slider-button',
 125                         html: this.offtext
 126                     }
 127                 ]
 128             };
 129
 130             if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 131                 cfg.cls += ' '+this.weight;
 132             }
 133
 134             return cfg;
 135         }
 136
 137         if (this.isClose) {
 138             cfg.cls += ' close';
 139
 140             cfg["aria-hidden"] = true;
 141
 142             cfg.html = "&times;";
 143
 144             return cfg;
 145         }
 146
 147
 148         if (this.theme==='default') {
 149             cfg.cls = 'btn roo-button';
 150
 151             //if (this.parentType != 'Navbar') {
 152             this.weight = this.weight.length ?  this.weight : 'default';
 153             //}
 154             if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 155
 156                 var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
 157                 var weight = this.weight == 'default' ? 'secondary' : this.weight;
 158                 cfg.cls += ' btn-' + outline + weight;
 159                 if (this.weight == 'default') {
 160                     // BC
 161                     cfg.cls += ' btn-' + this.weight;
 162                 }
 163             }
 164         } else if (this.theme==='glow') {
 165
 166             cfg.tag = 'a';
 167             cfg.cls = 'btn-glow roo-button';
 168
 169             if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 170
 171                 cfg.cls += ' ' + this.weight;
 172             }
 173         }
 174
 175
 176         if (this.inverse) {
 177             this.cls += ' inverse';
 178         }
 179
 180
 181         if (this.active || this.pressed === true) {
 182             cfg.cls += ' active';
 183         }
 184
 185         if (this.disabled) {
 186             cfg.disabled = 'disabled';
 187         }
 188
 189         if (this.items) {
 190             Roo.log('changing to ul' );
 191             cfg.tag = 'ul';
 192             this.glyphicon = 'caret';
 193             if (Roo.bootstrap.version == 4) {
 194                 this.fa = 'caret-down';
 195             }
 196
 197         }
 198
 199         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
 200
 201         //gsRoo.log(this.parentType);
 202         if (this.parentType === 'Navbar' && !this.parent().bar) {
 203             Roo.log('changing to li?');
 204
 205             cfg.tag = 'li';
 206
 207             cfg.cls = '';
 208             cfg.cn =  [{
 209                 tag : 'a',
 210                 cls : 'roo-button',
 211                 html : this.html,
 212                 href : this.href || '#'
 213             }];
 214             if (this.menu) {
 215                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
 216                 cfg.cls += ' dropdown';
 217             }
 218
 219             delete cfg.html;
 220
 221         }
 222
 223        cfg.cls += this.parentType === 'Navbar' ?  ' navbar-btn' : '';
 224
 225         if (this.glyphicon) {
 226             cfg.html = ' ' + cfg.html;
 227
 228             cfg.cn = [
 229                 {
 230                     tag: 'span',
 231                     cls: 'glyphicon glyphicon-' + this.glyphicon
 232                 }
 233             ];
 234         }
 235         if (this.fa) {
 236             cfg.html = ' ' + cfg.html;
 237
 238             cfg.cn = [
 239                 {
 240                     tag: 'i',
 241                     cls: 'fa fas fa-' + this.fa
 242                 }
 243             ];
 244         }
 245
 246         if (this.badge) {
 247             cfg.html += ' ';
 248
 249             cfg.tag = 'a';
 250
 251 //            cfg.cls='btn roo-button';
 252
 253             cfg.href=this.href;
 254
 255             var value = cfg.html;
 256
 257             if(this.glyphicon){
 258                 value = {
 259                     tag: 'span',
 260                     cls: 'glyphicon glyphicon-' + this.glyphicon,
 261                     html: this.html
 262                 };
 263             }
 264             if(this.fa){
 265                 value = {
 266                     tag: 'i',
 267                     cls: 'fa fas fa-' + this.fa,
 268                     html: this.html
 269                 };
 270             }
 271
 272             var bw = this.badge_weight.length ? this.badge_weight :
 273                 (this.weight.length ? this.weight : 'secondary');
 274             bw = bw == 'default' ? 'secondary' : bw;
 275
 276             cfg.cn = [
 277                 value,
 278                 {
 279                     tag: 'span',
 280                     cls: 'badge badge-' + bw,
 281                     html: this.badge
 282                 }
 283             ];
 284
 285             cfg.html='';
 286         }
 287
 288         if (this.menu) {
 289             cfg.cls += ' dropdown';
 290             cfg.html = typeof(cfg.html) != 'undefined' ?
 291                     cfg.html + ' <span class="caret"></span>' : '<span class="caret"></span>';
 292         }
 293
 294         if (cfg.tag !== 'a' && this.href !== '') {
 295             throw "Tag must be a to set href.";
 296         } else if (this.href.length > 0) {
 297             cfg.href = this.href;
 298         }
 299
 300         if(this.removeClass){
 301             cfg.cls = '';
 302         }
 303
 304         if(this.target){
 305             cfg.target = this.target;
 306         }
 307
 308         return cfg;
 309     },
 310     initEvents: function() {
 311        // Roo.log('init events?');
 312 //        Roo.log(this.el.dom);
 313         // add the menu...
 314
 315         if (typeof (this.menu) != 'undefined') {
 316             this.menu.parentType = this.xtype;
 317             this.menu.triggerEl = this.el;
 318             this.addxtype(Roo.apply({}, this.menu));
 319         }
 320
 321
 322        if (this.el.hasClass('roo-button')) {
 323             this.el.on('click', this.onClick, this);
 324        } else {
 325             this.el.select('.roo-button').on('click', this.onClick, this);
 326        }
 327
 328        if(this.removeClass){
 329            this.el.on('click', this.onClick, this);
 330        }
 331
 332        this.el.enableDisplayMode();
 333
 334     },
 335     onClick : function(e)
 336     {
 337         if (this.disabled) {
 338             return;
 339         }
 340
 341         Roo.log('button on click ');
 342         if(this.preventDefault){
 343             e.preventDefault();
 344         }
 345
 346         if (this.pressed === true || this.pressed === false) {
 347             this.toggleActive(e);
 348         }
 349
 350
 351         this.fireEvent('click', this, e);
 352     },
 353
 354     /**
 355      * Enables this button
 356      */
 357     enable : function()
 358     {
 359         this.disabled = false;
 360         this.el.removeClass('disabled');
 361     },
 362
 363     /**
 364      * Disable this button
 365      */
 366     disable : function()
 367     {
 368         this.disabled = true;
 369         this.el.addClass('disabled');
 370     },
 371      /**
 372      * sets the active state on/off,
 373      * @param {Boolean} state (optional) Force a particular state
 374      */
 375     setActive : function(v) {
 376
 377         this.el[v ? 'addClass' : 'removeClass']('active');
 378         this.pressed = v;
 379     },
 380      /**
 381      * toggles the current active state
 382      */
 383     toggleActive : function(e)
 384     {
 385         this.setActive(!this.pressed);
 386         this.fireEvent('toggle', this, e, !this.pressed);
 387     },
 388      /**
 389      * get the current active state
 390      * @return {boolean} true if it's active
 391      */
 392     isActive : function()
 393     {
 394         return this.el.hasClass('active');
 395     },
 396     /**
 397      * set the text of the first selected button
 398      */
 399     setText : function(str)
 400     {
 401         this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
 402     },
 403     /**
 404      * get the text of the first selected button
 405      */
 406     getText : function()
 407     {
 408         return this.el.select('.roo-button-text',true).first().dom.innerHTML;
 409     },
 410
 411     setWeight : function(str)
 412     {
 413         this.el.removeClass(this.weightClass);
 414         this.weight = str;
 415         var outline = this.outline ? 'outline-' : '';
 416         if (str == 'default') {
 417             this.el.addClass('btn-default btn-outline-secondary');
 418             return;
 419         }
 420         this.el.addClass('btn-' + outline + str);
 421     }
 422
 423
 424 });
 425
 426