* Availability: https://github.com/jackocnr/intl-tel-input.git
**/
+/**
+ * @class Roo.bootstrap.PhoneInput
+ * @extends Roo.bootstrap.TriggerField
+ * An input with International dial-code selection
+
+ * @cfg {String} defaultDialCode default '+852'
+ * @cfg {Array} preferedCountries default []
+
+ * @constructor
+ * Create a new PhoneInput.
+ * @param {Object} config Configuration options
+ */
+
Roo.bootstrap.PhoneInput = function(config) {
Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
};
Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
- triggerList : true,
-
listWidth: undefined,
selectedClass: 'active',
- allCountries: [],
+ invalidClass : "has-warning",
+
+ validClass: 'has-success',
- dialCodeMapping: [],
+ allowed: '0123456789',
- preferedDialCode: [
- '+852',
- '+44',
- '+1'
- ],
+ /**
+ * @cfg {String} defaultDialCode The default dial code when initializing the input
+ */
+ defaultDialCode: '+852',
- defaultDialCode: '+852', //hk
+ /**
+ * @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()
{
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] = {
var input = {
tag: 'input',
id : id,
- type : 'number',
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) {
tag: 'div',
cls: this.hasFeedback ? 'has-feedback' : '',
cn: [
+ hiddenInput,
input,
{
tag: 'input',
})
});
- if(this.preferedDialCode) {
- for (var i = 0; i < this.preferedDialCode.length; i++) {
+ if(!this.preferedCountries) {
+ this.preferedCountries = [
+ 'hk',
+ 'gb',
+ 'us'
+ ];
+ }
+
+ var p = this.preferedCountries.reverse();
+
+ if(p) {
+ for (var i = 0; i < p.length; i++) {
for (var j = 0; j < this.allCountries.length; j++) {
- if(this.allCountries[j].dialCode == this.preferedDialCode[i]) {
+ if(this.allCountries[j].iso2 == p[i]) {
var t = this.allCountries[j];
this.allCountries.splice(j,1);
this.allCountries.unshift(t);
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>';
onTriggerClick : function(e)
{
Roo.log('trigger click');
- if(this.disabled || !this.triggerList){
+ if(this.disabled){
return;
}
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)
setValue : function(v)
{
var d = this.getDialCode(v);
- this.value = v;
- if(!d || d.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);
}
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;
}
return dialCode;
},
- validate : function()
+ reset : function()
+ {
+ this.setValue(this.defaultDialCode);
+ this.validate();
+ },
+
+ hiddenEl : function()
{
- //
- return false;
+ 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
projects / roojs1 / blobdiff