Fix #6465 - drag drop for cards

[roojs1] / Roo / bootstrap / FieldLabel.js

diff --git a/Roo/bootstrap/FieldLabel.js b/Roo/bootstrap/FieldLabel.js
index 6a88a50..c59405c 100644 (file)
--- a/Roo/bootstrap/FieldLabel.js
+++ b/Roo/bootstrap/FieldLabel.js
@@ -12,10 +12,12 @@
  * @cfg {String} html contents of the element
  * @cfg {String} tag tag of the element default label
  * @cfg {String} cls class of the element
- * @cfg {String} for label target 
+ * @cfg {String} target label target 
  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
- * @cfg {String} invalidClass default "text-danger fa fa-lg fa-exclamation-triangle"
- * @cfg {String} validClass default "text-success fa fa-lg fa-check"
+ * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
+ * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
+ * @cfg {String} iconTooltip default "This field is required"
+ * @cfg {String} indicatorpos (left|right) default left
  * 
  * @constructor
  * Create a new FieldLabel
@@ -47,21 +49,29 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
     tag: 'label',
     cls: '',
     html: '',
-    for: '',
+    target: '',
     allowBlank : true,
-    invalidClass : 'text-danger fa fa-lg fa-exclamation-triangle',
-    validClass : 'text-success fa fa-lg fa-check',
+    invalidClass : 'has-warning',
+    validClass : 'has-success',
+    iconTooltip : 'This field is required',
+    indicatorpos : 'left',
     
     getAutoCreate : function(){
         
+       var cls = "";
+       if (!this.allowBlank) {
+           cls  = "visible";
+       }
+       
         var cfg = {
             tag : this.tag,
             cls : 'roo-bootstrap-field-label ' + this.cls,
-            for : this.for,
+            for : this.target,
             cn : [
                 {
                     tag : 'i',
-                    cls : ''
+                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
+                    tooltip : this.iconTooltip
                 },
                 {
                     tag : 'span',
@@ -70,6 +80,25 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
             ] 
         };
         
+        if(this.indicatorpos == 'right'){
+            var cfg = {
+                tag : this.tag,
+                cls : 'roo-bootstrap-field-label ' + this.cls,
+                for : this.target,
+                cn : [
+                    {
+                        tag : 'span',
+                        html : this.html
+                    },
+                    {
+                        tag : 'i',
+                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
+                        tooltip : this.iconTooltip
+                    }
+                ] 
+            };
+        }
+        
         return cfg;
     },
     
@@ -77,23 +106,45 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
     {
         Roo.bootstrap.Element.superclass.initEvents.call(this);
         
-        this.iconEl = this.el.select('i', true).first();
+        this.indicator = this.indicatorEl();
         
-        this.iconEl.setVisibilityMode(Roo.Element.DISPLAY).hide();
+        if(this.indicator){
+            this.indicator.removeClass('visible');
+            this.indicator.addClass('invisible');
+        }
         
         Roo.bootstrap.FieldLabel.register(this);
     },
     
+    indicatorEl : function()
+    {
+        var indicator = this.el.select('i.roo-required-indicator',true).first();
+        
+        if(!indicator){
+            return false;
+        }
+        
+        return indicator;
+        
+    },
+    
     /**
      * Mark this field as valid
      */
     markValid : function()
     {
-        this.iconEl.show();
-        
-        this.iconEl.removeClass(this.invalidClass);
+        if(this.indicator){
+            this.indicator.removeClass('visible');
+            this.indicator.addClass('invisible');
+        }
+        if (Roo.bootstrap.version == 3) {
+           this.el.removeClass(this.invalidClass);
+           this.el.addClass(this.validClass);
+       } else {
+           this.el.removeClass('is-invalid');
+            this.el.addClass('is-valid');
+       }
         
-        this.iconEl.addClass(this.validClass);
         
         this.fireEvent('valid', this);
     },
@@ -104,11 +155,18 @@ Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
      */
     markInvalid : function(msg)
     {
-        this.iconEl.show();
-        
-        this.iconEl.removeClass(this.validClass);
+        if(this.indicator){
+            this.indicator.removeClass('invisible');
+            this.indicator.addClass('visible');
+        }
+          if (Roo.bootstrap.version == 3) {
+           this.el.removeClass(this.validClass);
+           this.el.addClass(this.invalidClass);
+       } else {
+           this.el.removeClass('is-valid');
+            this.el.addClass('is-invalid');
+       }
         
-        this.iconEl.addClass(this.invalidClass);
         
         this.fireEvent('invalid', this, msg);
     }
@@ -121,37 +179,30 @@ Roo.apply(Roo.bootstrap.FieldLabel, {
     groups: {},
     
      /**
-    * register a CheckBox Group
-    * @param {Roo.bootstrap.CheckBox} the CheckBox to add
+    * register a FieldLabel Group
+    * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
     */
     register : function(label)
     {
-        if(typeof(this.groups[label.for]) == 'undefined'){
-            this.groups[label.for] = {};
-        }
-        
-        if(this.groups.hasOwnProperty(label.for)){
+        if(this.groups.hasOwnProperty(label.target)){
             return;
         }
-        Roo.log('register???')
-        Roo.log(label);
-        this.groups[label.for] = label;
+     
+        this.groups[label.target] = label;
        
     },
     /**
-    * fetch a CheckBox Group based on the group ID
-    * @param {string} the group ID
-    * @returns {Roo.bootstrap.CheckBox} the CheckBox group
+    * fetch a FieldLabel Group based on the target
+    * @param {string} target
+    * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
     */
-    get: function(name) {
-        if (typeof(this.groups[name]) == 'undefined') {
+    get: function(target) {
+        if (typeof(this.groups[target]) == 'undefined') {
             return false;
         }
         
-        return this.groups[name] ;
+        return this.groups[target] ;
     }
-    
-    
 });