Roo/bootstrap/Input.js

[roojs1] / Roo / bootstrap / Input.js

diff --git a/Roo/bootstrap/Input.js b/Roo/bootstrap/Input.js
index e6278d2..6b970c1 100644 (file)
--- a/Roo/bootstrap/Input.js
+++ b/Roo/bootstrap/Input.js
@@ -31,12 +31,11 @@
  * @cfg {Boolean} readOnly Specifies that the field should be read-only
  * @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
  * @cfg {String} indicatorpos (left|right) default left
+ * @cfg {String} capture (user|camera) use for file input only. (default empty)
+ * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
 
  * @cfg {String} align (left|center|right) Default left
  * @cfg {Boolean} forceFeedback (true|false) Default false
- * @cfg {Boolean} hideParent (true|false) Default false also hide the parent
- * 
- * 
  * 
  * @constructor
  * Create a new Input
@@ -247,7 +246,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
     labelsm : 0,
     labelxs : 0,
     
-    hideParent : false,
+    capture : '',
+    accept : '',
     
     parentLabelAlign : function()
     {
@@ -284,6 +284,14 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             autocomplete : this.autocomplete || 'new-password'
         };
         
+        if(this.capture.length){
+            input.capture = this.capture;
+        }
+        
+        if(this.accept.length){
+            input.accept = this.accept + "/*";
+        }
+        
         if(this.align){
             input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
         }
@@ -344,7 +352,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'roo-input-before input-group-addon',
+                    cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
                     html : this.before
                 });
             }
@@ -353,7 +361,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'roo-input-before input-group-' +
+                    cls : 'roo-input-before input-group-prepend input-group-text input-group-' +
                         (this.before.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
                 });
             }
@@ -363,7 +371,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             if (this.after && typeof(this.after) == 'string') {
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'roo-input-after input-group-addon',
+                    cls : 'roo-input-after input-group-append input-group-text input-group-addon',
                     html : this.after
                 });
             }
@@ -372,7 +380,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 
                 inputblock.cn.push({
                     tag :'span',
-                    cls : 'roo-input-after input-group-' +
+                    cls : 'roo-input-after input-group-append input-group-text input-group-' +
                         (this.after.xtype == 'Button' ? 'btn' : 'addon')  //?? what about checkboxes - that looks like a bit of a hack thought? 
                 });
             }
@@ -382,21 +390,27 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                 inputblock.cn.push(feedback);
             }
         };
-        
+        var indicator = {
+            tag : 'i',
+            cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
+            tooltip : 'This field is required'
+        };
+        if (Roo.bootstrap.version == 4) {
+            indicator = {
+                tag : 'i',
+                style : 'display-none'
+            };
+        }
         if (align ==='left' && this.fieldLabel.length) {
             
-            cfg.cls += ' roo-form-group-label-left';
+            cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
             
             cfg.cn = [
-                {
-                    tag : 'i',
-                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
-                    tooltip : 'This field is required'
-                },
+                indicator,
                 {
                     tag: 'label',
                     'for' :  id,
-                    cls : 'control-label',
+                    cls : 'control-label col-form-label',
                     html : this.fieldLabel
 
                 },
@@ -416,17 +430,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
                     {
                         tag: 'label',
                         'for' :  id,
-                        cls : 'control-label',
+                        cls : 'control-label col-form-label',
                         cn : [
                             {
                                 tag : 'span',
                                 html : this.fieldLabel
                             },
-                            {
-                                tag : 'i',
-                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                                tooltip : 'This field is required'
-                            }
+                            indicator
                         ]
                     },
                     {
@@ -550,6 +560,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
     
     indicatorEl : function()
     {
+        if (Roo.bootstrap.version == 4) {
+            return false; // not enabled in v4 yet.
+        }
+        
         var indicator = this.el.select('i.roo-required-indicator',true).first();
         
         if(!indicator){
@@ -582,8 +596,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         this.indicator = this.indicatorEl();
         
         if(this.indicator){
-            this.indicator.addClass('invisible');
-            
+            this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? - 
         }
  
         // reference to original value for reset
@@ -622,6 +635,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             this.after.render(this.el.select('.roo-input-after',true).first());
         }
         
+        this.inputEl().on('change', this.onChange, this);
         
     },
     filterValidation : function(e){
@@ -653,7 +667,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
      */
     validateValue : function(value)
     {
-        if(this.getEl().hasClass('hidden') || !this.inputEl().isVisible(true)){
+        if(this.getVisibilityEl().hasClass('hidden')){
             return true;
         }
         
@@ -741,6 +755,15 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         this.fireEvent("blur", this);
     },
     
+    onChange : function(e)
+    {
+        var v = this.getValue();
+        if(String(v) !== String(this.startValue)){
+            this.fireEvent('change', this, v, this.startValue);
+        }
+        
+    },
+    
     /**
      * Resets the current field value to the originally loaded value and clears any validation messages
      */
@@ -865,6 +888,11 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             
         }
         
+        if(this.indicator){
+            this.indicator.removeClass('visible');
+            this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
+        }
+        
         this.fireEvent('valid', this);
     },
     
@@ -887,7 +915,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         
         if(this.indicator){
             this.indicator.removeClass('visible');
-            this.indicator.addClass('invisible');
+            this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
         }
         
         if(this.disabled){
@@ -941,7 +969,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         }
         
         if(this.indicator){
-            this.indicator.removeClass('invisible');
+            this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
             this.indicator.addClass('visible');
         }
         
@@ -1021,7 +1049,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
             return;
         }
         
-        if(this.indicator){
+        if(this.indicatorEl()){
             var ar = this.el.select('label > span',true);
             
             if (ar.elements.length) {