b018d22ebb6e8d41d1767c6265bf1fb233597586
[roojs1] / Roo / bootstrap / TriggerField.js
1 /*
2  * - LGPL
3  *
4  * trigger field - base class for combo..
5  * 
6  */
7  
8 /**
9  * @class Roo.bootstrap.TriggerField
10  * @extends Roo.bootstrap.Input
11  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
12  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
13  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
14  * for which you can provide a custom implementation.  For example:
15  * <pre><code>
16 var trigger = new Roo.bootstrap.TriggerField();
17 trigger.onTriggerClick = myTriggerFn;
18 trigger.applyTo('my-field');
19 </code></pre>
20  *
21  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
22  * {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
23  * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
24  * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
25  * @cfg {String} caret (search|calendar) BS3 only - carat fa name
26
27  * @constructor
28  * Create a new TriggerField.
29  * @param {Object} config Configuration options (valid {@Roo.bootstrap.Input} config options will also be applied
30  * to the base TextField)
31  */
32 Roo.bootstrap.TriggerField = function(config){
33     this.mimicing = false;
34     Roo.bootstrap.TriggerField.superclass.constructor.call(this, config);
35 };
36
37 Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
38     /**
39      * @cfg {String} triggerClass A CSS class to apply to the trigger
40      */
41      /**
42      * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
43      */
44     hideTrigger:false,
45
46     /**
47      * @cfg {Boolean} removable (true|false) special filter default false
48      */
49     removable : false,
50     
51     /** @cfg {Boolean} grow @hide */
52     /** @cfg {Number} growMin @hide */
53     /** @cfg {Number} growMax @hide */
54
55     /**
56      * @hide 
57      * @method
58      */
59     autoSize: Roo.emptyFn,
60     // private
61     monitorTab : true,
62     // private
63     deferHeight : true,
64
65     
66     actionMode : 'wrap',
67     
68     caret : false,
69     
70     
71     getAutoCreate : function(){
72        
73         var align = this.labelAlign || this.parentLabelAlign();
74         
75         var id = Roo.id();
76         
77         var cfg = {
78             cls: 'form-group' //input-group
79         };
80         
81         
82         var input =  {
83             tag: 'input',
84             id : id,
85             type : this.inputType,
86             cls : 'form-control',
87             autocomplete: 'new-password',
88             placeholder : this.placeholder || '' 
89             
90         };
91         if (this.name) {
92             input.name = this.name;
93         }
94         if (this.size) {
95             input.cls += ' input-' + this.size;
96         }
97         
98         if (this.disabled) {
99             input.disabled=true;
100         }
101         
102         var inputblock = input;
103         
104         if(this.hasFeedback && !this.allowBlank){
105             
106             var feedback = {
107                 tag: 'span',
108                 cls: 'glyphicon form-control-feedback'
109             };
110             
111             if(this.removable && !this.editable && !this.tickable){
112                 inputblock = {
113                     cls : 'has-feedback',
114                     cn :  [
115                         inputblock,
116                         {
117                             tag: 'button',
118                             html : 'x',
119                             cls : 'roo-combo-removable-btn close'
120                         },
121                         feedback
122                     ] 
123                 };
124             } else {
125                 inputblock = {
126                     cls : 'has-feedback',
127                     cn :  [
128                         inputblock,
129                         feedback
130                     ] 
131                 };
132             }
133
134         } else {
135             if(this.removable && !this.editable && !this.tickable){
136                 inputblock = {
137                     cls : 'roo-removable',
138                     cn :  [
139                         inputblock,
140                         {
141                             tag: 'button',
142                             html : 'x',
143                             cls : 'roo-combo-removable-btn close'
144                         }
145                     ] 
146                 };
147             }
148         }
149         
150         if (this.before || this.after) {
151             
152             inputblock = {
153                 cls : 'input-group',
154                 cn :  [] 
155             };
156             if (this.before) {
157                 inputblock.cn.push({
158                     tag :'span',
159                     cls : 'input-group-addon input-group-prepend input-group-text',
160                     html : this.before
161                 });
162             }
163             
164             inputblock.cn.push(input);
165             
166             if(this.hasFeedback && !this.allowBlank){
167                 inputblock.cls += ' has-feedback';
168                 inputblock.cn.push(feedback);
169             }
170             
171             if (this.after) {
172                 inputblock.cn.push({
173                     tag :'span',
174                     cls : 'input-group-addon input-group-append input-group-text',
175                     html : this.after
176                 });
177             }
178             
179         };
180         
181       
182         
183         var ibwrap = inputblock;
184         
185         if(this.multiple){
186             ibwrap = {
187                 tag: 'ul',
188                 cls: 'roo-select2-choices',
189                 cn:[
190                     {
191                         tag: 'li',
192                         cls: 'roo-select2-search-field',
193                         cn: [
194
195                             inputblock
196                         ]
197                     }
198                 ]
199             };
200                 
201         }
202         
203         var combobox = {
204             cls: 'roo-select2-container input-group',
205             cn: [
206                  {
207                     tag: 'input',
208                     type : 'hidden',
209                     cls: 'form-hidden-field'
210                 },
211                 ibwrap
212             ]
213         };
214         
215         if(!this.multiple && this.showToggleBtn){
216             
217             var caret = {
218                         tag: 'span',
219                         cls: 'caret'
220              };
221             if (this.caret != false) {
222                 caret = {
223                      tag: 'i',
224                      cls: 'fa fa-' + this.caret
225                 };
226                 
227             }
228             
229             combobox.cn.push({
230                 tag :'span',
231                 cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
232                 cn : [
233                     Roo.bootstrap.version == 3 ? caret : '',
234                     {
235                         tag: 'span',
236                         cls: 'combobox-clear',
237                         cn  : [
238                             {
239                                 tag : 'i',
240                                 cls: 'icon-remove'
241                             }
242                         ]
243                     }
244                 ]
245
246             })
247         }
248         
249         if(this.multiple){
250             combobox.cls += ' roo-select2-container-multi';
251         }
252          var indicator = {
253             tag : 'i',
254             cls : 'roo-required-indicator ' + (this.indicatorpos == 'right'  ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
255             tooltip : 'This field is required'
256         };
257         if (Roo.bootstrap.version == 4) {
258             indicator = {
259                 tag : 'i',
260                 style : 'display:none'
261             };
262         }
263         
264         
265         if (align ==='left' && this.fieldLabel.length) {
266             
267             cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
268
269             cfg.cn = [
270                 indicator,
271                 {
272                     tag: 'label',
273                     'for' :  id,
274                     cls : 'control-label',
275                     html : this.fieldLabel
276
277                 },
278                 {
279                     cls : "", 
280                     cn: [
281                         combobox
282                     ]
283                 }
284
285             ];
286             
287             var labelCfg = cfg.cn[1];
288             var contentCfg = cfg.cn[2];
289             
290             if(this.indicatorpos == 'right'){
291                 cfg.cn = [
292                     {
293                         tag: 'label',
294                         'for' :  id,
295                         cls : 'control-label',
296                         cn : [
297                             {
298                                 tag : 'span',
299                                 html : this.fieldLabel
300                             },
301                             indicator
302                         ]
303                     },
304                     {
305                         cls : "", 
306                         cn: [
307                             combobox
308                         ]
309                     }
310
311                 ];
312                 
313                 labelCfg = cfg.cn[0];
314                 contentCfg = cfg.cn[1];
315             }
316             
317             if(this.labelWidth > 12){
318                 labelCfg.style = "width: " + this.labelWidth + 'px';
319             }
320             
321             if(this.labelWidth < 13 && this.labelmd == 0){
322                 this.labelmd = this.labelWidth;
323             }
324             
325             if(this.labellg > 0){
326                 labelCfg.cls += ' col-lg-' + this.labellg;
327                 contentCfg.cls += ' col-lg-' + (12 - this.labellg);
328             }
329             
330             if(this.labelmd > 0){
331                 labelCfg.cls += ' col-md-' + this.labelmd;
332                 contentCfg.cls += ' col-md-' + (12 - this.labelmd);
333             }
334             
335             if(this.labelsm > 0){
336                 labelCfg.cls += ' col-sm-' + this.labelsm;
337                 contentCfg.cls += ' col-sm-' + (12 - this.labelsm);
338             }
339             
340             if(this.labelxs > 0){
341                 labelCfg.cls += ' col-xs-' + this.labelxs;
342                 contentCfg.cls += ' col-xs-' + (12 - this.labelxs);
343             }
344             
345         } else if ( this.fieldLabel.length) {
346 //                Roo.log(" label");
347             cfg.cn = [
348                 indicator,
349                {
350                    tag: 'label',
351                    //cls : 'input-group-addon',
352                    html : this.fieldLabel
353
354                },
355
356                combobox
357
358             ];
359             
360             if(this.indicatorpos == 'right'){
361                 
362                 cfg.cn = [
363                     {
364                        tag: 'label',
365                        cn : [
366                            {
367                                tag : 'span',
368                                html : this.fieldLabel
369                            },
370                            indicator
371                        ]
372
373                     },
374                     combobox
375
376                 ];
377
378             }
379
380         } else {
381             
382 //                Roo.log(" no label && no align");
383                 cfg = combobox
384                      
385                 
386         }
387         
388         var settings=this;
389         ['xs','sm','md','lg'].map(function(size){
390             if (settings[size]) {
391                 cfg.cls += ' col-' + size + '-' + settings[size];
392             }
393         });
394         
395         return cfg;
396         
397     },
398     
399     
400     
401     // private
402     onResize : function(w, h){
403 //        Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
404 //        if(typeof w == 'number'){
405 //            var x = w - this.trigger.getWidth();
406 //            this.inputEl().setWidth(this.adjustWidth('input', x));
407 //            this.trigger.setStyle('left', x+'px');
408 //        }
409     },
410
411     // private
412     adjustSize : Roo.BoxComponent.prototype.adjustSize,
413
414     // private
415     getResizeEl : function(){
416         return this.inputEl();
417     },
418
419     // private
420     getPositionEl : function(){
421         return this.inputEl();
422     },
423
424     // private
425     alignErrorIcon : function(){
426         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
427     },
428
429     // private
430     initEvents : function(){
431         
432         this.createList();
433         
434         Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
435         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
436         if(!this.multiple && this.showToggleBtn){
437             this.trigger = this.el.select('span.dropdown-toggle',true).first();
438             if(this.hideTrigger){
439                 this.trigger.setDisplayed(false);
440             }
441             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
442         }
443         
444         if(this.multiple){
445             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
446         }
447         
448         if(this.removable && !this.editable && !this.tickable){
449             var close = this.closeTriggerEl();
450             
451             if(close){
452                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
453                 close.on('click', this.removeBtnClick, this, close);
454             }
455         }
456         
457         //this.trigger.addClassOnOver('x-form-trigger-over');
458         //this.trigger.addClassOnClick('x-form-trigger-click');
459         
460         //if(!this.width){
461         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
462         //}
463     },
464     
465     closeTriggerEl : function()
466     {
467         var close = this.el.select('.roo-combo-removable-btn', true).first();
468         return close ? close : false;
469     },
470     
471     removeBtnClick : function(e, h, el)
472     {
473         e.preventDefault();
474         
475         if(this.fireEvent("remove", this) !== false){
476             this.reset();
477             this.fireEvent("afterremove", this)
478         }
479     },
480     
481     createList : function()
482     {
483         this.list = Roo.get(document.body).createChild({
484             tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
485             cls: 'typeahead typeahead-long dropdown-menu',
486             style: 'display:none'
487         });
488         
489         this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
490         
491     },
492
493     // private
494     initTrigger : function(){
495        
496     },
497
498     // private
499     onDestroy : function(){
500         if(this.trigger){
501             this.trigger.removeAllListeners();
502           //  this.trigger.remove();
503         }
504         //if(this.wrap){
505         //    this.wrap.remove();
506         //}
507         Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
508     },
509
510     // private
511     onFocus : function(){
512         Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
513         /*
514         if(!this.mimicing){
515             this.wrap.addClass('x-trigger-wrap-focus');
516             this.mimicing = true;
517             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
518             if(this.monitorTab){
519                 this.el.on("keydown", this.checkTab, this);
520             }
521         }
522         */
523     },
524
525     // private
526     checkTab : function(e){
527         if(e.getKey() == e.TAB){
528             this.triggerBlur();
529         }
530     },
531
532     // private
533     onBlur : function(){
534         // do nothing
535     },
536
537     // private
538     mimicBlur : function(e, t){
539         /*
540         if(!this.wrap.contains(t) && this.validateBlur()){
541             this.triggerBlur();
542         }
543         */
544     },
545
546     // private
547     triggerBlur : function(){
548         this.mimicing = false;
549         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
550         if(this.monitorTab){
551             this.el.un("keydown", this.checkTab, this);
552         }
553         //this.wrap.removeClass('x-trigger-wrap-focus');
554         Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
555     },
556
557     // private
558     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
559     validateBlur : function(e, t){
560         return true;
561     },
562
563     // private
564     onDisable : function(){
565         this.inputEl().dom.disabled = true;
566         //Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
567         //if(this.wrap){
568         //    this.wrap.addClass('x-item-disabled');
569         //}
570     },
571
572     // private
573     onEnable : function(){
574         this.inputEl().dom.disabled = false;
575         //Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
576         //if(this.wrap){
577         //    this.el.removeClass('x-item-disabled');
578         //}
579     },
580
581     // private
582     onShow : function(){
583         var ae = this.getActionEl();
584         
585         if(ae){
586             ae.dom.style.display = '';
587             ae.dom.style.visibility = 'visible';
588         }
589     },
590
591     // private
592     
593     onHide : function(){
594         var ae = this.getActionEl();
595         ae.dom.style.display = 'none';
596     },
597
598     /**
599      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
600      * by an implementing function.
601      * @method
602      * @param {EventObject} e
603      */
604     onTriggerClick : Roo.emptyFn
605 });
606