update docs and fix api for BS Alert

[roojs1] / Roo / bootstrap / Alert.js

diff --git a/Roo/bootstrap/Alert.js b/Roo/bootstrap/Alert.js
index 25f4414..1a31c67 100644 (file)
--- a/Roo/bootstrap/Alert.js
+++ b/Roo/bootstrap/Alert.js
@@ -1,18 +1,19 @@
-/*
- * - LGPL
- *
- * Alert
- * 
- */
-
 /**
  * @class Roo.bootstrap.Alert
  * @extends Roo.bootstrap.Component
- * Bootstrap Alert class
+ * Bootstrap Alert class - shows an alert area box
+ * eg
+ * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
+  Enter a valid email address
+</div>
+ * @licence LGPL
  * @cfg {String} title The title of alert
  * @cfg {String} html The content of alert
- * @cfg {String} weight (  success | info | warning | danger )
- * @cfg {String} faicon font-awesomeicon
+ * @cfg {String} weight (success|info|warning|danger) Weight of the message
+ * @cfg {String} fa font-awesomeicon
+ * @cfg {Number} seconds default:-1 Number of seconds until it disapears (-1 means never.)
+ * @cfg {Boolean} close true to show a x closer
+ * 
  * 
  * @constructor
  * Create a new alert
@@ -29,8 +30,11 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
     
     title: '',
     html: '',
-    weight: '',
-    faicon: false,
+    weight: false,
+    fa: false,
+    faicon: false, // BC
+    close : false,
+    
     
     getAutoCreate : function()
     {
@@ -39,6 +43,18 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
             tag : 'div',
             cls : 'alert',
             cn : [
+                {
+                    tag: 'button',
+                    type :  "button",
+                    cls: "close",
+                    html : '×',
+                    style : this.close ? '' : 'display:none'
+                },
+                {
+                    tag : 'i',
+                    cls : 'roo-alert-icon'
+                    
+                },
                 {
                     tag : 'b',
                     cls : 'roo-alert-title',
@@ -46,17 +62,21 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
                 },
                 {
                     tag : 'span',
-                    cls : 'roo-alert-content',
+                    cls : 'roo-alert-text',
                     html : this.html
                 }
             ]
         };
         
         if(this.faicon){
-            cfg.cn.unshift({
-                tag : 'i',
-                cls : 'fa ' + this.faicon
-            });
+            cfg.cn[0].cls += ' fa ' + this.faicon;
+        }
+        if(this.fa){
+            cfg.cn[0].cls += ' fa ' + this.fa;
+        }
+        
+        if(this.weight){
+            cfg.cls += ' alert-' + this.weight;
         }
         
         return cfg;
@@ -64,19 +84,70 @@ Roo.extend(Roo.bootstrap.Alert, Roo.bootstrap.Component,  {
     
     initEvents: function() 
     {
-        
+        this.el.setVisibilityMode(Roo.Element.DISPLAY);
+        this.titleEl =  this.el.select('.roo-alert-title',true).first();
+        this.iconEl = this.el.select('.roo-alert-icon',true).first();
+        this.htmlEl = this.el.select('.roo-alert-text',true).first();
+        if (this.seconds > 0) {
+            this.hide.defer(this.seconds, this);
+        }
     },
-    
-    setText : function(str)
+    /**
+     * Set the Title Message HTML
+     * @param {String} html
+     */
+    setTitle : function(str)
     {
-        this.el.select('.roo-button-text',true).first().dom.innerHTML = str;
+        this.titleEl.dom.innerHTML = str;
     },
+     
+     /**
+     * Set the Body Message HTML
+     * @param {String} html
+     */
+    setHtml : function(str)
+    {
+        this.htmlEl.dom.innerHTML = str;
+    },
+    /**
+     * Set the Weight of the alert
+     * @param {String} (success|info|warning|danger) weight
+     */
     
+    setWeight : function(weight)
+    {
+        if(this.weight){
+            this.el.removeClass('alert-' + this.weight);
+        }
+        
+        this.weight = weight;
+        
+        this.el.addClass('alert-' + this.weight);
+    },
+      /**
+     * Set the Icon of the alert
+     * @param {String} see fontawsome names (name without the 'fa-' bit)
+     */
+    setIcon : function(icon)
+    {
+        if(this.faicon){
+            this.alertEl.removeClass(['fa', 'fa-' + this.faicon]);
+        }
+        
+        this.faicon = icon;
+        
+        this.alertEl.addClass(['fa', 'fa-' + this.faicon]);
+    },
+    /**
+     * Hide the Alert
+     */
     hide: function() 
     {
         this.el.hide();   
     },
-    
+    /**
+     * Show the Alert
+     */
     show: function() 
     {  
         this.el.show();