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

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