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