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