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