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

   1 /*
   2  * - LGPL
   3  *
   4  * Input
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.form.TextArea
  10  * @extends Roo.bootstrap.form.Input
  11  * Bootstrap TextArea class
  12  * @cfg {Number} cols Specifies the visible width of a text area
  13  * @cfg {Number} rows Specifies the visible number of lines in a text area
  14  * @cfg {string} wrap (soft|hard)Specifies how the text in a text area is to be wrapped when submitted in a form
  15  * @cfg {string} resize (none|both|horizontal|vertical|inherit|initial)
  16  * @cfg {string} html text
  17  *
  18  * @constructor
  19  * Create a new TextArea
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.form.TextArea = function(config){
  24     Roo.bootstrap.form.TextArea.superclass.constructor.call(this, config);
  25
  26 };
  27
  28 Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input,  {
  29
  30     cols : false,
  31     rows : 5,
  32     readOnly : false,
  33     warp : 'soft',
  34     resize : false,
  35     value: false,
  36     html: false,
  37
  38     getAutoCreate : function(){
  39
  40         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  41
  42         var id = Roo.id();
  43
  44         var cfg = {};
  45
  46         if(this.inputType != 'hidden'){
  47             cfg.cls = 'form-group' //input-group
  48         }
  49
  50         var input =  {
  51             tag: 'textarea',
  52             id : id,
  53             warp : this.warp,
  54             rows : this.rows,
  55             value : this.value || '',
  56             html: this.html || '',
  57             cls : 'form-control',
  58             placeholder : this.placeholder || ''
  59
  60         };
  61
  62         if(this.maxLength && this.maxLength != Number.MAX_VALUE){
  63             input.maxLength = this.maxLength;
  64         }
  65
  66         if(this.resize){
  67             input.style = (typeof(input.style) == 'undefined') ? 'resize:' + this.resize : input.style + 'resize:' + this.resize;
  68         }
  69
  70         if(this.cols){
  71             input.cols = this.cols;
  72         }
  73
  74         if (this.readOnly) {
  75             input.readonly = true;
  76         }
  77
  78         if (this.name) {
  79             input.name = this.name;
  80         }
  81
  82         if (this.size) {
  83             input.cls = (typeof(input.cls) == 'undefined') ? 'input-' + this.size : input.cls + ' input-' + this.size;
  84         }
  85
  86         var settings=this;
  87         ['xs','sm','md','lg'].map(function(size){
  88             if (settings[size]) {
  89                 cfg.cls += ' col-' + size + '-' + settings[size];
  90             }
  91         });
  92
  93         var inputblock = input;
  94
  95         if(this.hasFeedback && !this.allowBlank){
  96
  97             var feedback = {
  98                 tag: 'span',
  99                 cls: 'glyphicon form-control-feedback'
 100             };
 101
 102             inputblock = {
 103                 cls : 'has-feedback',
 104                 cn :  [
 105                     input,
 106                     feedback
 107                 ]
 108             };
 109         }
 110
 111
 112         if (this.before || this.after) {
 113
 114             inputblock = {
 115                 cls : 'input-group',
 116                 cn :  []
 117             };
 118             if (this.before) {
 119                 inputblock.cn.push({
 120                     tag :'span',
 121                     cls : 'input-group-addon',
 122                     html : this.before
 123                 });
 124             }
 125
 126             inputblock.cn.push(input);
 127
 128             if(this.hasFeedback && !this.allowBlank){
 129                 inputblock.cls += ' has-feedback';
 130                 inputblock.cn.push(feedback);
 131             }
 132
 133             if (this.after) {
 134                 inputblock.cn.push({
 135                     tag :'span',
 136                     cls : 'input-group-addon',
 137                     html : this.after
 138                 });
 139             }
 140
 141         }
 142
 143         if (align ==='left' && this.fieldLabel.length) {
 144             cfg.cn = [
 145                 {
 146                     tag: 'label',
 147                     'for' :  id,
 148                     cls : 'control-label',
 149                     html : this.fieldLabel
 150                 },
 151                 {
 152                     cls : "",
 153                     cn: [
 154                         inputblock
 155                     ]
 156                 }
 157
 158             ];
 159
 160             if(this.labelWidth > 12){
 161                 cfg.cn[0].style = "width: " + this.labelWidth + 'px';
 162             }
 163
 164             if(this.labelWidth < 13 && this.labelmd == 0){
 165                 this.labelmd = this.labelWidth;
 166             }
 167
 168             if(this.labellg > 0){
 169                 cfg.cn[0].cls += ' col-lg-' + this.labellg;
 170                 cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
 171             }
 172
 173             if(this.labelmd > 0){
 174                 cfg.cn[0].cls += ' col-md-' + this.labelmd;
 175                 cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
 176             }
 177
 178             if(this.labelsm > 0){
 179                 cfg.cn[0].cls += ' col-sm-' + this.labelsm;
 180                 cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
 181             }
 182
 183             if(this.labelxs > 0){
 184                 cfg.cn[0].cls += ' col-xs-' + this.labelxs;
 185                 cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
 186             }
 187
 188         } else if ( this.fieldLabel.length) {
 189             cfg.cn = [
 190
 191                {
 192                    tag: 'label',
 193                    //cls : 'input-group-addon',
 194                    html : this.fieldLabel
 195
 196                },
 197
 198                inputblock
 199
 200            ];
 201
 202         } else {
 203
 204             cfg.cn = [
 205
 206                 inputblock
 207
 208             ];
 209
 210         }
 211
 212         if (this.disabled) {
 213             input.disabled=true;
 214         }
 215
 216         return cfg;
 217
 218     },
 219     /**
 220      * return the real textarea element.
 221      */
 222     inputEl: function ()
 223     {
 224         return this.el.select('textarea.form-control',true).first();
 225     },
 226
 227     /**
 228      * Clear any invalid styles/messages for this field
 229      */
 230     clearInvalid : function()
 231     {
 232
 233         if(!this.el || this.preventMark){ // not rendered
 234             return;
 235         }
 236
 237         var label = this.el.select('label', true).first();
 238         var icon = this.el.select('i.fa-star', true).first();
 239
 240         if(label && icon){
 241             icon.remove();
 242         }
 243         this.el.removeClass( this.validClass);
 244         this.inputEl().removeClass('is-invalid');
 245
 246         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
 247
 248             var feedback = this.el.select('.form-control-feedback', true).first();
 249
 250             if(feedback){
 251                 this.el.select('.form-control-feedback', true).first().removeClass(this.invalidFeedbackClass);
 252             }
 253
 254         }
 255
 256         this.fireEvent('valid', this);
 257     },
 258
 259      /**
 260      * Mark this field as valid
 261      */
 262     markValid : function()
 263     {
 264         if(!this.el  || this.preventMark){ // not rendered
 265             return;
 266         }
 267
 268         this.el.removeClass([this.invalidClass, this.validClass]);
 269         this.inputEl().removeClass(['is-valid', 'is-invalid']);
 270
 271         var feedback = this.el.select('.form-control-feedback', true).first();
 272
 273         if(feedback){
 274             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 275         }
 276
 277         if(this.disabled || this.allowBlank){
 278             return;
 279         }
 280
 281         var label = this.el.select('label', true).first();
 282         var icon = this.el.select('i.fa-star', true).first();
 283
 284         if(label && icon){
 285             icon.remove();
 286         }
 287         if (Roo.bootstrap.version == 3) {
 288             this.el.addClass(this.validClass);
 289         } else {
 290             this.inputEl().addClass('is-valid');
 291         }
 292
 293
 294         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
 295
 296             var feedback = this.el.select('.form-control-feedback', true).first();
 297
 298             if(feedback){
 299                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 300                 this.el.select('.form-control-feedback', true).first().addClass([this.validFeedbackClass]);
 301             }
 302
 303         }
 304
 305         this.fireEvent('valid', this);
 306     },
 307
 308      /**
 309      * Mark this field as invalid
 310      * @param {String} msg The validation message
 311      */
 312     markInvalid : function(msg)
 313     {
 314         if(!this.el  || this.preventMark){ // not rendered
 315             return;
 316         }
 317
 318         this.el.removeClass([this.invalidClass, this.validClass]);
 319         this.inputEl().removeClass(['is-valid', 'is-invalid']);
 320
 321         var feedback = this.el.select('.form-control-feedback', true).first();
 322
 323         if(feedback){
 324             this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 325         }
 326
 327         if(this.disabled || this.allowBlank){
 328             return;
 329         }
 330
 331         var label = this.el.select('label', true).first();
 332         var icon = this.el.select('i.fa-star', true).first();
 333
 334         if(!this.getValue().length && label && !icon){
 335             this.el.createChild({
 336                 tag : 'i',
 337                 cls : 'text-danger fa fa-lg fa-star',
 338                 tooltip : 'This field is required',
 339                 style : 'margin-right:5px;'
 340             }, label, true);
 341         }
 342
 343         if (Roo.bootstrap.version == 3) {
 344             this.el.addClass(this.invalidClass);
 345         } else {
 346             this.inputEl().addClass('is-invalid');
 347         }
 348
 349         // fixme ... this may be depricated need to test..
 350         if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
 351
 352             var feedback = this.el.select('.form-control-feedback', true).first();
 353
 354             if(feedback){
 355                 this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
 356
 357                 if(this.getValue().length || this.forceFeedback){
 358                     this.el.select('.form-control-feedback', true).first().addClass([this.invalidFeedbackClass]);
 359                 }
 360
 361             }
 362
 363         }
 364
 365         this.fireEvent('invalid', this, msg);
 366     }
 367 });
 368
 369