/*
* - LGPL
*
* trigger field - base class for combo..
*
*/
/**
* @class Roo.bootstrap.TriggerField
* @extends Roo.bootstrap.Input
* Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
* The trigger has no default action, so you must assign a function to implement the trigger click handler by
* overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
* for which you can provide a custom implementation. For example:
* <pre><code>
var trigger = new Roo.bootstrap.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyTo('my-field');
</code></pre>
*
* However, in general you will most likely want to use TriggerField as the base class for a reusable component.
* {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
* @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
* @cfg {String} caret (search|calendar) BS3 only - carat fa name
* @constructor
* Create a new TriggerField.
* @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
* to the base TextField)
*/
Roo.bootstrap.TriggerField = function(config){
this.mimicing = false;
Roo.bootstrap.TriggerField.superclass.constructor.call(this, config);
};
Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, {
/**
* @cfg {String} triggerClass A CSS class to apply to the trigger
*/
/**
* @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
*/
hideTrigger:false,
/**
* @cfg {Boolean} removable (true|false) special filter default false
*/
removable : false,
/** @cfg {Boolean} grow @hide */
/** @cfg {Number} growMin @hide */
/** @cfg {Number} growMax @hide */
/**
* @hide
* @method
*/
autoSize: Roo.emptyFn,
// private
monitorTab : true,
// private
deferHeight : true,
actionMode : 'wrap',
caret : false,
getAutoCreate : function(){
var align = this.labelAlign || this.parentLabelAlign();
var id = Roo.id();
var cfg = {
cls: 'form-group' //input-group
};
var input = {
tag: 'input',
id : id,
type : this.inputType,
cls : 'form-control',
autocomplete: 'new-password',
placeholder : this.placeholder || ''
};
if (this.name) {
input.name = this.name;
}
if (this.size) {
input.cls += ' input-' + this.size;
}
if (this.disabled) {
input.disabled=true;
}
var inputblock = input;
if(this.hasFeedback && !this.allowBlank){
var feedback = {
tag: 'span',
cls: 'glyphicon form-control-feedback'
};
if(this.removable && !this.editable ){
inputblock = {
cls : 'has-feedback',
cn : [
inputblock,
{
tag: 'button',
html : 'x',
cls : 'roo-combo-removable-btn close'
},
feedback
]
};
} else {
inputblock = {
cls : 'has-feedback',
cn : [
inputblock,
feedback
]
};
}
} else {
if(this.removable && !this.editable ){
inputblock = {
cls : 'roo-removable',
cn : [
inputblock,
{
tag: 'button',
html : 'x',
cls : 'roo-combo-removable-btn close'
}
]
};
}
}
if (this.before || this.after) {
inputblock = {
cls : 'input-group',
cn : []
};
if (this.before) {
inputblock.cn.push({
tag :'span',
cls : 'input-group-addon input-group-prepend input-group-text',
html : this.before
});
}
inputblock.cn.push(input);
if(this.hasFeedback && !this.allowBlank){
inputblock.cls += ' has-feedback';
inputblock.cn.push(feedback);
}
if (this.after) {
inputblock.cn.push({
tag :'span',
cls : 'input-group-addon input-group-append input-group-text',
html : this.after
});
}
};
var ibwrap = inputblock;
if(this.multiple){
ibwrap = {
tag: 'ul',
cls: 'roo-select2-choices',
cn:[
{
tag: 'li',
cls: 'roo-select2-search-field',
cn: [
inputblock
]
}
]
};
}
var combobox = {
cls: 'roo-select2-container input-group',
cn: [
{
tag: 'input',
type : 'hidden',
cls: 'form-hidden-field'
},
ibwrap
]
};
if(!this.multiple && this.showToggleBtn){
var caret = {
tag: 'span',
cls: 'caret'
};
if (this.caret != false) {
caret = {
tag: 'i',
cls: 'fa fa-' + this.caret
};
}
combobox.cn.push({
tag :'span',
cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
cn : [
Roo.bootstrap.version == 3 ? caret : '',
{
tag: 'span',
cls: 'combobox-clear',
cn : [
{
tag : 'i',
cls: 'icon-remove'
}
]
}
]
})
}
if(this.multiple){
combobox.cls += ' roo-select2-container-multi';
}
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' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
{
tag: 'label',
'for' : id,
cls : 'control-label',
html : this.fieldLabel
},
{
cls : "",
cn: [
combobox
]
}
];
var labelCfg = cfg.cn[1];
var contentCfg = cfg.cn[2];
if(this.indicatorpos == 'right'){
cfg.cn = [
{
tag: 'label',
'for' : id,
cls : 'control-label',
cn : [
{
tag : 'span',
html : this.fieldLabel
},
indicator
]
},
{
cls : "",
cn: [
combobox
]
}
];
labelCfg = cfg.cn[0];
contentCfg = cfg.cn[1];
}
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
if(this.labellg > 0){
labelCfg.cls += ' col-lg-' + this.labellg;
contentCfg.cls += ' col-lg-' + (12 - this.labellg);
}
if(this.labelmd > 0){
labelCfg.cls += ' col-md-' + this.labelmd;
contentCfg.cls += ' col-md-' + (12 - this.labelmd);
}
if(this.labelsm > 0){
labelCfg.cls += ' col-sm-' + this.labelsm;
contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
}
if(this.labelxs > 0){
labelCfg.cls += ' col-xs-' + this.labelxs;
contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
}
} else if ( this.fieldLabel.length) {
// Roo.log(" label");
cfg.cn = [
indicator,
{
tag: 'label',
//cls : 'input-group-addon',
html : this.fieldLabel
},
combobox
];
if(this.indicatorpos == 'right'){
cfg.cn = [
{
tag: 'label',
cn : [
{
tag : 'span',
html : this.fieldLabel
},
indicator
]
},
combobox
];
}
} else {
// Roo.log(" no label && no align");
cfg = combobox
}
var settings=this;
['xs','sm','md','lg'].map(function(size){
if (settings[size]) {
cfg.cls += ' col-' + size + '-' + settings[size];
}
});
return cfg;
},
// private
onResize : function(w, h){
// Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
// if(typeof w == 'number'){
// var x = w - this.trigger.getWidth();
// this.inputEl().setWidth(this.adjustWidth('input', x));
// this.trigger.setStyle('left', x+'px');
// }
},
// private
adjustSize : Roo.BoxComponent.prototype.adjustSize,
// private
getResizeEl : function(){
return this.inputEl();
},
// private
getPositionEl : function(){
return this.inputEl();
},
// private
alignErrorIcon : function(){
this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
},
// private
initEvents : function(){
this.createList();
Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
//this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
if(!this.multiple && this.showToggleBtn){
this.trigger = this.el.select('span.dropdown-toggle',true).first();
if(this.hideTrigger){
this.trigger.setDisplayed(false);
}
this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
}
if(this.multiple){
this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
}
if(this.removable && !this.editable && !this.tickable){
var close = this.closeTriggerEl();
if(close){
close.setVisibilityMode(Roo.Element.DISPLAY).hide();
close.on('click', this.removeBtnClick, this, close);
}
}
//this.trigger.addClassOnOver('x-form-trigger-over');
//this.trigger.addClassOnClick('x-form-trigger-click');
//if(!this.width){
// this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
//}
},
closeTriggerEl : function()
{
var close = this.el.select('.roo-combo-removable-btn', true).first();
return close ? close : false;
},
removeBtnClick : function(e, h, el)
{
e.preventDefault();
if(this.fireEvent("remove", this) !== false){
this.reset();
this.fireEvent("afterremove", this)
}
},
createList : function()
{
this.list = Roo.get(document.body).createChild({
tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
cls: 'typeahead typeahead-long dropdown-menu',
style: 'display:none'
});
this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
},
// private
initTrigger : function(){
},
// private
onDestroy : function(){
if(this.trigger){
this.trigger.removeAllListeners();
// this.trigger.remove();
}
//if(this.wrap){
// this.wrap.remove();
//}
Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
},
// private
onFocus : function(){
Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
/*
if(!this.mimicing){
this.wrap.addClass('x-trigger-wrap-focus');
this.mimicing = true;
Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
if(this.monitorTab){
this.el.on("keydown", this.checkTab, this);
}
}
*/
},
// private
checkTab : function(e){
if(e.getKey() == e.TAB){
this.triggerBlur();
}
},
// private
onBlur : function(){
// do nothing
},
// private
mimicBlur : function(e, t){
/*
if(!this.wrap.contains(t) && this.validateBlur()){
this.triggerBlur();
}
*/
},
// private
triggerBlur : function(){
this.mimicing = false;
Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
if(this.monitorTab){
this.el.un("keydown", this.checkTab, this);
}
//this.wrap.removeClass('x-trigger-wrap-focus');
Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
},
// private
// This should be overriden by any subclass that needs to check whether or not the field can be blurred.
validateBlur : function(e, t){
return true;
},
// private
onDisable : function(){
this.inputEl().dom.disabled = true;
//Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
//if(this.wrap){
// this.wrap.addClass('x-item-disabled');
//}
},
// private
onEnable : function(){
this.inputEl().dom.disabled = false;
//Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
//if(this.wrap){
// this.el.removeClass('x-item-disabled');
//}
},
// private
onShow : function(){
var ae = this.getActionEl();
if(ae){
ae.dom.style.display = '';
ae.dom.style.visibility = 'visible';
}
},
// private
onHide : function(){
var ae = this.getActionEl();
ae.dom.style.display = 'none';
},
/**
* The function that should handle the trigger's click event. This method does nothing by default until overridden
* by an implementing function.
* @method
* @param {EventObject} e
*/
onTriggerClick : Roo.emptyFn
});