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) Weight of the message
  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         this.htmlEl = this.el.select('.roo-alert-text',true).first();
  91         if (this.seconds > 0) {
  92             this.hide.defer(this.seconds, this);
  93         }
  94     },
  95     /**
  96      * Set the Title Message HTML
  97      * @param {String} html
  98      */
  99     setTitle : function(str)
 100     {
 101         this.titleEl.dom.innerHTML = str;
 102     },
 103
 104      /**
 105      * Set the Body Message HTML
 106      * @param {String} html
 107      */
 108     setHtml : function(str)
 109     {
 110         this.htmlEl.dom.innerHTML = str;
 111     },
 112     /**
 113      * Set the Weight of the alert
 114      * @param {String} (success|info|warning|danger) weight
 115      */
 116
 117     setWeight : function(weight)
 118     {
 119         if(this.weight){
 120             this.el.removeClass('alert-' + this.weight);
 121         }
 122
 123         this.weight = weight;
 124
 125         this.el.addClass('alert-' + this.weight);
 126     },
 127       /**
 128      * Set the Icon of the alert
 129      * @param {String} see fontawsome names (name without the 'fa-' bit)
 130      */
 131     setIcon : function(icon)
 132     {
 133         if(this.faicon){
 134             this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
 135         }
 136
 137         this.faicon = icon;
 138
 139         this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
 140     },
 141     /**
 142      * Hide the Alert
 143      */
 144     hide: function()
 145     {
 146         this.el.hide();
 147     },
 148     /**
 149      * Show the Alert
 150      */
 151     show: function()
 152     {
 153         this.el.show();
 154     }
 155
 156 });
 157
 158