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