/**
* @class Roo.bootstrap.FieldLabel
* @extends Roo.bootstrap.Component
- * Bootstrap Element class
+ * Bootstrap FieldLabel class
* @cfg {String} html contents of the element
- * @cfg {String} tag tag of the element
+ * @cfg {String} tag tag of the element default label
* @cfg {String} cls class of the element
- * @cfg {Boolean} preventDefault (true|false) default false
- * @cfg {Boolean} clickable (true|false) default false
+ * @cfg {String} target label target
+ * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
+ * @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 Element
+ * Create a new FieldLabel
* @param {Object} config The config object
*/
-Roo.bootstrap.Element = function(config){
+Roo.bootstrap.FieldLabel = function(config){
Roo.bootstrap.Element.superclass.constructor.call(this, config);
this.addEvents({
- // raw events
- /**
- * @event click
- * When a element is chick
- * @param {Roo.bootstrap.Element} this
- * @param {Roo.EventObject} e
- */
- "click" : true
- });
+ /**
+ * @event invalid
+ * Fires after the field has been marked as invalid.
+ * @param {Roo.form.FieldLabel} this
+ * @param {String} msg The validation message
+ */
+ invalid : true,
+ /**
+ * @event valid
+ * Fires after the field has been validated with no errors.
+ * @param {Roo.form.FieldLabel} this
+ */
+ valid : true
+ });
};
-Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, {
- tag: 'div',
+ tag: 'label',
cls: '',
html: '',
- preventDefault: false,
- clickable: false,
+ target: '',
+ allowBlank : true,
+ 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: this.cls,
- html: this.html
+ tag : this.tag,
+ cls : 'roo-bootstrap-field-label ' + this.cls,
+ for : this.target,
+ cn : [
+ {
+ tag : 'i',
+ cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
+ tooltip : this.iconTooltip
+ },
+ {
+ tag : 'span',
+ html : this.html
+ }
+ ]
};
+ 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;
},
{
Roo.bootstrap.Element.superclass.initEvents.call(this);
- if(this.clickable){
- this.el.on('click', this.onClick, this);
+ this.indicator = this.indicatorEl();
+
+ if(this.indicator){
+ this.indicator.removeClass('visible');
+ this.indicator.addClass('invisible');
}
+ Roo.bootstrap.FieldLabel.register(this);
},
- onClick : function(e)
+ indicatorEl : function()
{
- if(this.preventDefault){
- e.preventDefault();
+ var indicator = this.el.select('i.roo-required-indicator',true).first();
+
+ if(!indicator){
+ return false;
}
- this.fireEvent('click', this, e);
+ return indicator;
+
},
- getValue : function()
+ /**
+ * Mark this field as valid
+ */
+ markValid : function()
{
- return this.el.dom.innerHTML;
+ 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.fireEvent('valid', this);
},
- setValue : function(value)
+ /**
+ * Mark this field as invalid
+ * @param {String} msg The validation message
+ */
+ markInvalid : function(msg)
{
- this.el.dom.innerHTML = value;
+ 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.fireEvent('invalid', this, msg);
}
+
});
+Roo.apply(Roo.bootstrap.FieldLabel, {
+
+ groups: {},
+
+ /**
+ * register a FieldLabel Group
+ * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
+ */
+ register : function(label)
+ {
+ if(this.groups.hasOwnProperty(label.target)){
+ return;
+ }
+
+ this.groups[label.target] = label;
+
+ },
+ /**
+ * fetch a FieldLabel Group based on the target
+ * @param {string} target
+ * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
+ */
+ get: function(target) {
+ if (typeof(this.groups[target]) == 'undefined') {
+ return false;
+ }
+
+ return this.groups[target] ;
+ }
+});
+
\ No newline at end of file
projects / roojs1 / blobdiff