git.roojs.org Git - roojs1/blob - 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) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
  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',
 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',
 175                     html : this.after
 176                 });
 177             }
 178
 179         };
 180
 181         var box = {
 182             tag: 'div',
 183             cn: [
 184                 {
 185                     tag: 'input',
 186                     type : 'hidden',
 187                     cls: 'form-hidden-field'
 188                 },
 189                 inputblock
 190             ]
 191
 192         };
 193
 194         if(this.multiple){
 195             box = {
 196                 tag: 'div',
 197                 cn: [
 198                     {
 199                         tag: 'input',
 200                         type : 'hidden',
 201                         cls: 'form-hidden-field'
 202                     },
 203                     {
 204                         tag: 'ul',
 205                         cls: 'roo-select2-choices',
 206                         cn:[
 207                             {
 208                                 tag: 'li',
 209                                 cls: 'roo-select2-search-field',
 210                                 cn: [
 211
 212                                     inputblock
 213                                 ]
 214                             }
 215                         ]
 216                     }
 217                 ]
 218             }
 219         };
 220
 221         var combobox = {
 222             cls: 'roo-select2-container input-group',
 223             cn: [
 224                 box
 225 //                {
 226 //                    tag: 'ul',
 227 //                    cls: 'typeahead typeahead-long dropdown-menu',
 228 //                    style: 'display:none'
 229 //                }
 230             ]
 231         };
 232
 233         if(!this.multiple && this.showToggleBtn){
 234
 235             var caret = {
 236                         tag: 'span',
 237                         cls: 'caret'
 238              };
 239             if (this.caret != false) {
 240                 caret = {
 241                      tag: 'i',
 242                      cls: 'fa fa-' + this.caret
 243                 };
 244
 245             }
 246
 247             combobox.cn.push({
 248                 tag :'span',
 249                 cls : 'input-group-addon btn dropdown-toggle',
 250                 cn : [
 251                     caret,
 252                     {
 253                         tag: 'span',
 254                         cls: 'combobox-clear',
 255                         cn  : [
 256                             {
 257                                 tag : 'i',
 258                                 cls: 'icon-remove'
 259                             }
 260                         ]
 261                     }
 262                 ]
 263
 264             })
 265         }
 266
 267         if(this.multiple){
 268             combobox.cls += ' roo-select2-container-multi';
 269         }
 270
 271         if (align ==='left' && this.fieldLabel.length) {
 272
 273             cfg.cn = [
 274                 {
 275                     tag : 'i',
 276                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
 277                     tooltip : 'This field is required'
 278                 },
 279                 {
 280                     tag: 'label',
 281                     'for' :  id,
 282                     cls : 'control-label',
 283                     html : this.fieldLabel
 284
 285                 },
 286                 {
 287                     cls : "",
 288                     cn: [
 289                         combobox
 290                     ]
 291                 }
 292
 293             ];
 294
 295             var labelCfg = cfg.cn[1];
 296             var contentCfg = cfg.cn[2];
 297
 298             if(this.indicatorpos == 'right'){
 299                 cfg.cn = [
 300                     {
 301                         tag: 'label',
 302                         'for' :  id,
 303                         cls : 'control-label col-sm-' + this.labelWidth,
 304                         html : this.fieldLabel
 305
 306                     },
 307                     {
 308                         tag : 'i',
 309                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
 310                         tooltip : 'This field is required'
 311                     },
 312                     {
 313                         cls : "col-sm-" + (12 - this.labelWidth),
 314                         cn: [
 315                             combobox
 316                         ]
 317                     }
 318
 319                 ];
 320             }
 321
 322         } else if ( this.fieldLabel.length) {
 323 //                Roo.log(" label");
 324             cfg.cn = [
 325                 {
 326                    tag : 'i',
 327                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
 328                    tooltip : 'This field is required'
 329                },
 330                {
 331                    tag: 'label',
 332                    //cls : 'input-group-addon',
 333                    html : this.fieldLabel
 334
 335                },
 336
 337                combobox
 338
 339             ];
 340
 341             if(this.indicatorpos == 'right'){
 342
 343                 cfg.cn = [
 344                     {
 345                        tag: 'label',
 346                        //cls : 'input-group-addon',
 347                        html : this.fieldLabel
 348
 349                     },
 350                     {
 351                        tag : 'i',
 352                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
 353                        tooltip : 'This field is required'
 354                     },
 355
 356                     combobox
 357
 358                 ];
 359
 360             }
 361
 362         } else {
 363
 364 //                Roo.log(" no label && no align");
 365                 cfg = combobox
 366
 367
 368         }
 369
 370         var settings=this;
 371         ['xs','sm','md','lg'].map(function(size){
 372             if (settings[size]) {
 373                 cfg.cls += ' col-' + size + '-' + settings[size];
 374             }
 375         });
 376
 377         return cfg;
 378
 379     },
 380
 381
 382
 383     // private
 384     onResize : function(w, h){
 385 //        Roo.bootstrap.TriggerField.superclass.onResize.apply(this, arguments);
 386 //        if(typeof w == 'number'){
 387 //            var x = w - this.trigger.getWidth();
 388 //            this.inputEl().setWidth(this.adjustWidth('input', x));
 389 //            this.trigger.setStyle('left', x+'px');
 390 //        }
 391     },
 392
 393     // private
 394     adjustSize : Roo.BoxComponent.prototype.adjustSize,
 395
 396     // private
 397     getResizeEl : function(){
 398         return this.inputEl();
 399     },
 400
 401     // private
 402     getPositionEl : function(){
 403         return this.inputEl();
 404     },
 405
 406     // private
 407     alignErrorIcon : function(){
 408         this.errorIcon.alignTo(this.inputEl(), 'tl-tr', [2, 0]);
 409     },
 410
 411     // private
 412     initEvents : function(){
 413
 414         this.createList();
 415
 416         Roo.bootstrap.TriggerField.superclass.initEvents.call(this);
 417         //this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
 418         if(!this.multiple && this.showToggleBtn){
 419             this.trigger = this.el.select('span.dropdown-toggle',true).first();
 420             if(this.hideTrigger){
 421                 this.trigger.setDisplayed(false);
 422             }
 423             this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
 424         }
 425
 426         if(this.multiple){
 427             this.inputEl().on("click", this.onTriggerClick, this, {preventDefault:true});
 428         }
 429
 430         if(this.removable && !this.editable && !this.tickable){
 431             var close = this.closeTriggerEl();
 432
 433             if(close){
 434                 close.setVisibilityMode(Roo.Element.DISPLAY).hide();
 435                 close.on('click', this.removeBtnClick, this, close);
 436             }
 437         }
 438
 439         //this.trigger.addClassOnOver('x-form-trigger-over');
 440         //this.trigger.addClassOnClick('x-form-trigger-click');
 441
 442         //if(!this.width){
 443         //    this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
 444         //}
 445     },
 446
 447     closeTriggerEl : function()
 448     {
 449         var close = this.el.select('.roo-combo-removable-btn', true).first();
 450         return close ? close : false;
 451     },
 452
 453     removeBtnClick : function(e, h, el)
 454     {
 455         e.preventDefault();
 456
 457         if(this.fireEvent("remove", this) !== false){
 458             this.reset();
 459             this.fireEvent("afterremove", this)
 460         }
 461     },
 462
 463     createList : function()
 464     {
 465         this.list = Roo.get(document.body).createChild({
 466             tag: 'ul',
 467             cls: 'typeahead typeahead-long dropdown-menu',
 468             style: 'display:none'
 469         });
 470
 471         this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
 472
 473     },
 474
 475     // private
 476     initTrigger : function(){
 477
 478     },
 479
 480     // private
 481     onDestroy : function(){
 482         if(this.trigger){
 483             this.trigger.removeAllListeners();
 484           //  this.trigger.remove();
 485         }
 486         //if(this.wrap){
 487         //    this.wrap.remove();
 488         //}
 489         Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
 490     },
 491
 492     // private
 493     onFocus : function(){
 494         Roo.bootstrap.TriggerField.superclass.onFocus.call(this);
 495         /*
 496         if(!this.mimicing){
 497             this.wrap.addClass('x-trigger-wrap-focus');
 498             this.mimicing = true;
 499             Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
 500             if(this.monitorTab){
 501                 this.el.on("keydown", this.checkTab, this);
 502             }
 503         }
 504         */
 505     },
 506
 507     // private
 508     checkTab : function(e){
 509         if(e.getKey() == e.TAB){
 510             this.triggerBlur();
 511         }
 512     },
 513
 514     // private
 515     onBlur : function(){
 516         // do nothing
 517     },
 518
 519     // private
 520     mimicBlur : function(e, t){
 521         /*
 522         if(!this.wrap.contains(t) && this.validateBlur()){
 523             this.triggerBlur();
 524         }
 525         */
 526     },
 527
 528     // private
 529     triggerBlur : function(){
 530         this.mimicing = false;
 531         Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
 532         if(this.monitorTab){
 533             this.el.un("keydown", this.checkTab, this);
 534         }
 535         //this.wrap.removeClass('x-trigger-wrap-focus');
 536         Roo.bootstrap.TriggerField.superclass.onBlur.call(this);
 537     },
 538
 539     // private
 540     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
 541     validateBlur : function(e, t){
 542         return true;
 543     },
 544
 545     // private
 546     onDisable : function(){
 547         this.inputEl().dom.disabled = true;
 548         //Roo.bootstrap.TriggerField.superclass.onDisable.call(this);
 549         //if(this.wrap){
 550         //    this.wrap.addClass('x-item-disabled');
 551         //}
 552     },
 553
 554     // private
 555     onEnable : function(){
 556         this.inputEl().dom.disabled = false;
 557         //Roo.bootstrap.TriggerField.superclass.onEnable.call(this);
 558         //if(this.wrap){
 559         //    this.el.removeClass('x-item-disabled');
 560         //}
 561     },
 562
 563     // private
 564     onShow : function(){
 565         var ae = this.getActionEl();
 566
 567         if(ae){
 568             ae.dom.style.display = '';
 569             ae.dom.style.visibility = 'visible';
 570         }
 571     },
 572
 573     // private
 574
 575     onHide : function(){
 576         var ae = this.getActionEl();
 577         ae.dom.style.display = 'none';
 578     },
 579
 580     /**
 581      * The function that should handle the trigger's click event.  This method does nothing by default until overridden
 582      * by an implementing function.
 583      * @method
 584      * @param {EventObject} e
 585      */
 586     onTriggerClick : Roo.emptyFn
 587 });
 588