1 Roo.bootstrap.PhoneInput = function(config) {
2 Roo.bootstrap.PhoneInput.superclass.constructor.call(this, config);
5 Roo.extend(Roo.bootstrap.PhoneInput, Roo.bootstrap.TriggerField, {
11 selectedClass: 'active',
15 defaultCountry: 'hk',//
17 preferedCountries: [],//
19 getAutoCreate : function()
21 var align = this.labelAlign || this.parentLabelAlign();
24 for (var i = 0; i < this.allCountries.length; i++) {
25 var c = this.allCountries[i];
26 this.allCountries[i] = {
31 areaCodes: c[4] || null
33 this.dialCodeMapping[c[2]] = {
37 areaCodes: c[4] || null
50 cls : 'form-control tel-input',
51 autocomplete: 'new-password'
55 input.name = this.name;
59 input.disabled = true;
62 var flag_container = {
79 cls: this.hasFeedback ? 'has-feedback' : '',
84 cls: 'dial-code-holder',
91 cls: 'roo-select2-container input-group',
98 if (this.fieldLabel.length) {
101 tooltip: 'This field is required'
107 cls: 'control-label',
113 html: this.fieldLabel
116 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star left-indicator';
122 if(this.indicatorpos == 'right') {
123 indicator.cls = 'roo-required-indicator text-danger fa fa-lg fa-star right-indicator';
130 if(align == 'left') {
138 if(this.labelWidth > 12){
139 label.style = "width: " + this.labelWidth + 'px';
141 if(this.labelWidth < 13 && this.labelmd == 0){
142 this.labelmd = this.labelWidth;
144 if(this.labellg > 0){
145 label.cls += ' col-lg-' + this.labellg;
146 input.cls += ' col-lg-' + (12 - this.labellg);
148 if(this.labelmd > 0){
149 label.cls += ' col-md-' + this.labelmd;
150 container.cls += ' col-md-' + (12 - this.labelmd);
152 if(this.labelsm > 0){
153 label.cls += ' col-sm-' + this.labelsm;
154 container.cls += ' col-sm-' + (12 - this.labelsm);
156 if(this.labelxs > 0){
157 label.cls += ' col-xs-' + this.labelxs;
158 container.cls += ' col-xs-' + (12 - this.labelxs);
170 ['xs','sm','md','lg'].map(function(size){
171 if (settings[size]) {
172 cfg.cls += ' col-' + size + '-' + settings[size];
176 this.store = new Roo.data.Store({
177 proxy : new Roo.data.MemoryProxy({}),
178 reader : new Roo.data.JsonReader({
197 'name' : 'areaCodes',
204 this.store.proxy.data = {
206 data: this.allCountries
212 initEvents : function()
215 Roo.bootstrap.PhoneInput.superclass.initEvents.call(this);
217 this.indicator = this.indicatorEl();
218 this.flag = this.flagEl();
219 this.dialCodeHolder = this.dialCodeHolderEl();
221 this.trigger = this.el.select('div.flag-box',true).first();
222 this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
227 var lw = _this.listWidth || Math.max(_this.inputEl().getWidth(), _this.minListWidth);
228 _this.list.setWidth(lw);
231 this.list.on('mouseover', this.onViewOver, this);
232 this.list.on('mousemove', this.onViewMove, this);
233 //this.list.on('scroll', this.onViewScroll, this);
235 this.tpl = '<li><a href="#"><div class="flag {iso2}"></div>{name} <span class="dial-code">+{dialCode}</span></a></li>';
237 this.view = new Roo.View(this.list, this.tpl, {
238 singleSelect:true, store: this.store, selectedClass: this.selectedClass
241 this.view.on('click', this.onViewClick, this);
242 //this.select(default country)
246 onTriggerClick : function(e)
248 Roo.log('trigger click');
249 if(this.disabled || !this.triggerList){
253 if(this.isExpanded()){
255 this.hasFocus = false;
258 this.hasFocus = true;
263 isExpanded : function()
265 return this.list.isVisible();
268 collapse : function()
270 if(!this.isExpanded()){
274 Roo.get(document).un('mousedown', this.collapseIf, this);
275 Roo.get(document).un('mousewheel', this.collapseIf, this);
276 this.fireEvent('collapse', this);
284 if(this.isExpanded() || !this.hasFocus){
288 var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
289 this.list.setWidth(lw);
292 this.restrictHeight();
294 Roo.get(document).on('mousedown', this.collapseIf, this);
295 Roo.get(document).on('mousewheel', this.collapseIf, this);
297 this.fireEvent('expand', this);
300 restrictHeight : function()
302 this.list.alignTo(this.inputEl(), this.listAlign);
303 this.list.alignTo(this.inputEl(), this.listAlign);
306 onViewOver : function(e, t)
311 var item = this.view.findItemFromChild(t);
314 var index = this.view.indexOf(item);
315 this.select(index, false);
320 onViewClick : function(view, doFocus, el, e)
322 var index = this.view.getSelectedIndexes()[0];
324 var r = this.store.getAt(index);
327 this.onSelect(r, index);
329 if(doFocus !== false && !this.blockFocus){
330 this.inputEl().focus();
334 onViewMove : function(e, t)
336 this.inKeyMode = false;
339 select : function(index, scrollIntoView)
342 Roo.log(scrollIntoView);
344 this.selectedIndex = index;
345 this.view.select(index);
346 if(scrollIntoView !== false){
347 var el = this.view.getNode(index);
349 this.list.scrollChildIntoView(el, false);
354 createList : function()
356 this.list = Roo.get(document.body).createChild({
358 cls: 'typeahead typeahead-long dropdown-menu tel-list',
359 style: 'display:none'
361 this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
364 collapseIf : function(e)
366 var in_combo = e.within(this.el);
367 var in_list = e.within(this.list);
368 var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
370 if (in_combo || in_list || is_list) {
376 onSelect : function(record, index)
378 if(this.fireEvent('beforeselect', this, record, index) !== false){
380 this.setFlagClass(record.data.iso2);
381 this.setDialCode(record.data.dialCode);
382 this.hasFocus = false;
384 this.fireEvent('select', this, record, index);
390 var flag = this.el.select('div.flag',true).first();
397 dialCodeHolderEl : function()
399 var d = this.el.select('input.dial-code-holder',true).first();
406 setDialCode : function(v)
408 this.dialCodeHolder.dom.value = '+'+v;
411 setFlagClass : function(n)
413 this.flag.dom.className = 'flag '+n;
416 getValue : function()
418 var v = this.inputEl().getValue();
419 if(this.dialCodeHolder) {
420 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
425 setValue : function(v)
427 var d = this.getDialCode(v);
430 if(!d || d.length == 0) {
432 this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
437 this.setFlagClass(this.dialCodeMapping[d].iso2);
439 this.inputEl().dom.value = v.replace('+'+d,'');
442 getDialCode : function(v = '')
445 return this.dialCodeHolder.dom.value;
449 // only interested in international numbers (starting with a plus)
450 if (v.charAt(0) != "+") {
453 var numericChars = "";
454 for (var i = 1; i < v.length; i++) {
458 if (this.dialCodeMapping[numericChars]) {
459 dialCode = v.substr(1, i);
461 if (numericChars.length == 4) {
469 validate : function()
477 "Afghanistan (افغانستان)",
482 "Albania (Shqipëri)",
487 "Algeria (الجزائر)",
512 "Antigua and Barbuda",
522 "Armenia (Հայաստան)",
538 "Austria (Österreich)",
543 "Azerbaijan (Azərbaycan)",
553 "Bahrain (البحرين)",
558 "Bangladesh (বাংলাদেশ)",
568 "Belarus (Беларусь)",
603 "Bosnia and Herzegovina (Босна и Херцеговина)",
618 "British Indian Ocean Territory",
623 "British Virgin Islands",
633 "Bulgaria (България)",
643 "Burundi (Uburundi)",
648 "Cambodia (កម្ពុជា)",
653 "Cameroon (Cameroun)",
662 ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
665 "Cape Verde (Kabu Verdi)",
670 "Caribbean Netherlands",
681 "Central African Republic (République centrafricaine)",
707 "Cocos (Keeling) Islands",
718 "Comoros (جزر القمر)",
723 "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
728 "Congo (Republic) (Congo-Brazzaville)",
748 "Croatia (Hrvatska)",
769 "Czech Republic (Česká republika)",
789 "Dominican Republic (República Dominicana)",
793 ["809", "829", "849"]
811 "Equatorial Guinea (Guinea Ecuatorial)",
831 "Falkland Islands (Islas Malvinas)",
836 "Faroe Islands (Føroyar)",
857 "French Guiana (Guyane française)",
862 "French Polynesia (Polynésie française)",
877 "Georgia (საქართველო)",
882 "Germany (Deutschland)",
902 "Greenland (Kalaallit Nunaat)",
939 "Guinea-Bissau (Guiné Bissau)",
964 "Hungary (Magyarország)",
1005 "Israel (ישראל)",
1032 "Jordan (الأردن)",
1037 "Kazakhstan (Казахстан)",
1058 "Kuwait (الكويت)",
1063 "Kyrgyzstan (Кыргызстан)",
1078 "Lebanon (لبنان)",
1103 "Lithuania (Lietuva)",
1118 "Macedonia (FYROM) (Македонија)",
1123 "Madagascar (Madagasikara)",
1163 "Mauritania (موريتانيا)",
1168 "Mauritius (Moris)",
1189 "Moldova (Republica Moldova)",
1199 "Mongolia (Монгол)",
1204 "Montenegro (Crna Gora)",
1214 "Morocco (المغرب)",
1220 "Mozambique (Moçambique)",
1225 "Myanmar (Burma) (မြန်မာ)",
1230 "Namibia (Namibië)",
1245 "Netherlands (Nederland)",
1250 "New Caledonia (Nouvelle-Calédonie)",
1285 "North Korea (조선 민주주의 인민 공화국)",
1290 "Northern Mariana Islands",
1306 "Pakistan (پاکستان)",
1316 "Palestine (فلسطين)",
1368 "Réunion (La Réunion)",
1374 "Romania (România)",
1401 "Saint Kitts and Nevis",
1411 "Saint Martin (Saint-Martin (partie française))",
1417 "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
1422 "Saint Vincent and the Grenadines",
1437 "São Tomé and Príncipe (São Tomé e Príncipe)",
1442 "Saudi Arabia (المملكة العربية السعودية)",
1447 "Senegal (Sénégal)",
1477 "Slovakia (Slovensko)",
1482 "Slovenia (Slovenija)",
1492 "Somalia (Soomaaliya)",
1502 "South Korea (대한민국)",
1507 "South Sudan (جنوب السودان)",
1517 "Sri Lanka (ශ්රී ලංකාව)",
1522 "Sudan (السودان)",
1532 "Svalbard and Jan Mayen",
1548 "Switzerland (Schweiz)",
1598 "Trinidad and Tobago",
1603 "Tunisia (تونس)",
1618 "Turks and Caicos Islands",
1628 "U.S. Virgin Islands",
1638 "Ukraine (Україна)",
1643 "United Arab Emirates (الإمارات العربية المتحدة)",
1665 "Uzbekistan (Oʻzbekiston)",
1675 "Vatican City (Città del Vaticano)",
1686 "Vietnam (Việt Nam)",
1691 "Wallis and Futuna (Wallis-et-Futuna)",
1696 "Western Sahara (الصحراء الغربية)",