Roo/bootstrap/PhoneInput.js

[roojs1] / Roo / bootstrap / PhoneInput.js

diff --git a/Roo/bootstrap/PhoneInput.js b/Roo/bootstrap/PhoneInput.js
index afe1083..43c2956 100644 (file)
--- a/Roo/bootstrap/PhoneInput.js
+++ b/Roo/bootstrap/PhoneInput.js
@@ -9,7 +9,7 @@
 /**
  * @class Roo.bootstrap.PhoneInput
  * @extends Roo.bootstrap.TriggerField
- * An input combines with  dial-code selection
+ * An input with International dial-code selection
  
  * @cfg {String} defaultDialCode default '+852'
  * @cfg {Array} preferedCountries default []
@@ -25,30 +25,27 @@ Roo.bootstrap.PhoneInput = function(config) {
 
 Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
         
-        triggerList : true,
-        
         listWidth: undefined,
         
         selectedClass: 'active',
         
         invalidClass : "has-warning",
         
-        allCountries: [],
-        
-        dialCodeMapping: [],
+        validClass: 'has-success',
         
+        allowed: '0123456789',
         
-        validClass: 'has-success',
+        max_length: 15,
         
+        /**
+         * @cfg {String} defaultDialCode The default dial code when initializing the input
+         */
         defaultDialCode: '+852',
         
-        preferedCountries: [
-            'hk',
-            'gb',
-            'us'
-        ],
-        
-        //white list / black list for countries?
+        /**
+         * @cfg {Array} preferedCountries A list of iso2 in array (e.g. ['hk','us']). Those related countries will show at the top of the input's choices
+         */
+        preferedCountries: false,
         
         getAutoCreate : function()
         {
@@ -56,6 +53,9 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
             var align = this.labelAlign || this.parentLabelAlign();
             var id = Roo.id();
             
+            this.allCountries = [];
+            this.dialCodeMapping = [];
+            
             for (var i = 0; i < data.length; i++) {
               var c = data[i];
               this.allCountries[i] = {
@@ -81,12 +81,19 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
             var input =  {
                 tag: 'input',
                 id : id,
+                maxlength: this.max_length,
                 cls : 'form-control tel-input',
                 autocomplete: 'new-password'
             };
             
+            var hiddenInput = {
+                tag: 'input',
+                type: 'hidden',
+                cls: 'hidden-tel-input'
+            };
+            
             if (this.name) {
-                input.name = this.name;
+                hiddenInput.name = this.name;
             }
             
             if (this.disabled) {
@@ -112,6 +119,7 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
                 tag: 'div',
                 cls: this.hasFeedback ? 'has-feedback' : '',
                 cn: [
+                    hiddenInput,
                     input,
                     {
                         tag: 'input',
@@ -235,6 +243,14 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
                 })
             });
             
+            if(!this.preferedCountries) {
+                this.preferedCountries = [
+                    'hk',
+                    'gb',
+                    'us'
+                ];
+            }
+            
             var p = this.preferedCountries.reverse();
             
             if(p) {
@@ -278,7 +294,7 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
             
             this.list.on('mouseover', this.onViewOver, this);
             this.list.on('mousemove', this.onViewMove, this);
-            //this.list.on('scroll', this.onViewScroll, this);
+            this.inputEl().on("keyup", this.onKeyUp, this);
             
             this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
 
@@ -293,7 +309,7 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
         onTriggerClick : function(e)
         {
             Roo.log('trigger click');
-            if(this.disabled || !this.triggerList){
+            if(this.disabled){
                 return;
             }
             
@@ -402,7 +418,8 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
                 cls: 'typeahead typeahead-long dropdown-menu tel-list',
                 style: 'display:none'
             });
-            this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
+            
+            this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         },
         
         collapseIf : function(e)
@@ -469,31 +486,34 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
         setValue : function(v)
         {
             var d = this.getDialCode(v);
-            this.value = v;
             
-            if(!d || d.length == 0 || v.length == 0) {
+            //invalid dial code
+            if(v.length == 0 || !d || d.length == 0) {
                 if(this.rendered){
                     this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
+                    this.hiddenEl().dom.value = (v === null || v === undefined ? '' : v);
                 }
-                this.validate();
                 return;
             }
             
+            //valid dial code
             this.setFlagClass(this.dialCodeMapping[d].iso2);
             this.setDialCode(d);
             this.inputEl().dom.value = v.replace('+'+d,'');
+            this.hiddenEl().dom.value = this.getValue();
             
             this.validate();
         },
         
-        getDialCode : function(v = '')
+        getDialCode : function(v)
         {
+            v = v ||  '';
+            
             if (v.length == 0) {
                 return this.dialCodeHolder.dom.value;
             }
             
             var dialCode = "";
-            // only interested in international numbers (starting with a plus)
             if (v.charAt(0) != "+") {
                 return false;
             }
@@ -516,5 +536,34 @@ Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
         reset : function()
         {
             this.setValue(this.defaultDialCode);
+            this.validate();
+        },
+        
+        hiddenEl : function()
+        {
+            return this.el.select('input.hidden-tel-input',true).first();
+        },
+        
+        onKeyUp : function(e){
+            
+            var k = e.getKey();
+            var c = e.getCharCode();
+            
+            if(
+                    (String.fromCharCode(c) == '.' || String.fromCharCode(c) == '-') &&
+                    this.allowed.indexOf(String.fromCharCode(c)) === -1
+            ){
+                e.stopEvent();
+            }
+            
+            // if(!Roo.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
+            //     return;
+            // }
+            if(this.allowed.indexOf(String.fromCharCode(c)) === -1){
+                e.stopEvent();
+            }
+            
+            this.setValue(this.getValue());
         }
+        
 });
\ No newline at end of file