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

   1 /**
   2  * @class Roo.bootstrap.Alert
   3  * @extends Roo.bootstrap.Component
   4  * Bootstrap Alert class - shows an alert area box
   5  * eg
   6  * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
   7   Enter a valid email address
   8 </div>
   9  * @licence LGPL
  10  * @cfg {String} title The title of alert
  11  * @cfg {String} html The content of alert
  12  * @cfg {String} weight (  success | info | warning | danger )
  13  * @cfg {String} fa font-awesomeicon
  14  * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
  15  * @cfg {Boolean} close true to show a x closer
  16  *
  17  *
  18  * @constructor
  19  * Create a new alert
  20  * @param {Object} config The config object
  21  */
  22
  23
  24 Roo.bootstrap.Alert = function(config){
  25     Roo.bootstrap.Alert.superclass.constructor.call(this, config);
  26
  27 };
  28
  29 Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
  30
  31     title: '',
  32     html: '',
  33     weight: false,
  34     fa: false,
  35     faicon: false, // BC
  36     close : false,
  37
  38
  39     getAutoCreate : function()
  40     {
  41
  42         var cfg = {
  43             tag : 'div',
  44             cls : 'alert',
  45             cn : [
  46                 {
  47                     tag: 'button',
  48                     type :  "button",
  49                     cls: "close",
  50                     html : '×',
  51                     style : this.close ? '' : 'display:none'
  52                 },
  53                 {
  54                     tag : 'i',
  55                     cls : 'roo-alert-icon'
  56
  57                 },
  58                 {
  59                     tag : 'b',
  60                     cls : 'roo-alert-title',
  61                     html : this.title
  62                 },
  63                 {
  64                     tag : 'span',
  65                     cls : 'roo-alert-text',
  66                     html : this.html
  67                 }
  68             ]
  69         };
  70
  71         if(this.faicon){
  72             cfg.cn[0].cls += ' fa ' + this.faicon;
  73         }
  74         if(this.fa){
  75             cfg.cn[0].cls += ' fa ' + this.fa;
  76         }
  77
  78         if(this.weight){
  79             cfg.cls += ' alert-' + this.weight;
  80         }
  81
  82         return cfg;
  83     },
  84
  85     initEvents: function()
  86     {
  87         this.el.setVisibilityMode(Roo.Element.DISPLAY);
  88         this.titleEl =  this.el.select('.roo-alert-title',true).first();
  89         this.iconEl = this.el.select('.roo-alert-icon',true).first();
  90         if (this.seconds > 0) {
  91             this.hide.defer(this.seconds, this);
  92         }
  93     },
  94
  95     setTitle : function(str)
  96     {
  97         this.titleEl.dom.innerHTML = str;
  98     },
  99
 100     setText : function(str)
 101     {
 102         this.titleEl.dom.innerHTML = str;
 103     },
 104
 105     setWeight : function(weight)
 106     {
 107         if(this.weight){
 108             this.el.removeClass('alert-' + this.weight);
 109         }
 110
 111         this.weight = weight;
 112
 113         this.el.addClass('alert-' + this.weight);
 114     },
 115
 116     setIcon : function(icon)
 117     {
 118         if(this.faicon){
 119             this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
 120         }
 121
 122         this.faicon = icon;
 123
 124         this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
 125     },
 126
 127     hide: function()
 128     {
 129         this.el.hide();
 130     },
 131
 132     show: function()
 133     {
 134         this.el.show();
 135     }
 136
 137 });
 138
 139