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)
341 this.selectedIndex = index;
342 this.view.select(index);
343 if(scrollIntoView !== false){
344 var el = this.view.getNode(index);
346 this.list.scrollChildIntoView(el, false);
351 createList : function()
353 this.list = Roo.get(document.body).createChild({
355 cls: 'typeahead typeahead-long dropdown-menu tel-list',
356 style: 'display:none'
358 this.list.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';;
361 collapseIf : function(e)
363 var in_combo = e.within(this.el);
364 var in_list = e.within(this.list);
365 var is_list = (Roo.get(e.getTarget()).id == this.list.id) ? true : false;
367 if (in_combo || in_list || is_list) {
373 onSelect : function(record, index)
375 if(this.fireEvent('beforeselect', this, record, index) !== false){
377 this.setFlagClass(record.data.iso2);
378 this.setDialCode(record.data.dialCode);
379 this.hasFocus = false;
381 this.fireEvent('select', this, record, index);
387 var flag = this.el.select('div.flag',true).first();
394 dialCodeHolderEl : function()
396 var d = this.el.select('input.dial-code-holder',true).first();
403 setDialCode : function(v)
405 this.dialCodeHolder.dom.value = '+'+v;
408 setFlagClass : function(n)
410 this.flag.dom.className = 'flag '+n;
413 getValue : function()
415 var v = this.inputEl().getValue();
416 if(this.dialCodeHolder) {
417 v = this.dialCodeHolder.dom.value+this.inputEl().getValue();
422 setValue : function(v)
424 var d = this.getDialCode(v);
427 if(!d || d.length == 0) {
429 this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
434 this.setFlagClass(this.dialCodeMapping[d].iso2);
436 this.inputEl().dom.value = v.replace('+'+d,'');
439 getDialCode : function(v = '')
442 return this.dialCodeHolder.dom.value;
446 // only interested in international numbers (starting with a plus)
447 if (v.charAt(0) != "+") {
450 var numericChars = "";
451 for (var i = 1; i < v.length; i++) {
455 if (this.dialCodeMapping[numericChars]) {
456 dialCode = v.substr(1, i);
458 if (numericChars.length == 4) {
466 validate : function()
474 "Afghanistan (افغانستان)",
479 "Albania (Shqipëri)",
484 "Algeria (الجزائر)",
509 "Antigua and Barbuda",
519 "Armenia (Հայաստան)",
535 "Austria (Österreich)",
540 "Azerbaijan (Azərbaycan)",
550 "Bahrain (البحرين)",
555 "Bangladesh (বাংলাদেশ)",
565 "Belarus (Беларусь)",
600 "Bosnia and Herzegovina (Босна и Херцеговина)",
615 "British Indian Ocean Territory",
620 "British Virgin Islands",
630 "Bulgaria (България)",
640 "Burundi (Uburundi)",
645 "Cambodia (កម្ពុជា)",
650 "Cameroon (Cameroun)",
659 ["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"]
662 "Cape Verde (Kabu Verdi)",
667 "Caribbean Netherlands",
678 "Central African Republic (République centrafricaine)",
704 "Cocos (Keeling) Islands",
715 "Comoros (جزر القمر)",
720 "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)",
725 "Congo (Republic) (Congo-Brazzaville)",
745 "Croatia (Hrvatska)",
766 "Czech Republic (Česká republika)",
786 "Dominican Republic (República Dominicana)",
790 ["809", "829", "849"]
808 "Equatorial Guinea (Guinea Ecuatorial)",
828 "Falkland Islands (Islas Malvinas)",
833 "Faroe Islands (Føroyar)",
854 "French Guiana (Guyane française)",
859 "French Polynesia (Polynésie française)",
874 "Georgia (საქართველო)",
879 "Germany (Deutschland)",
899 "Greenland (Kalaallit Nunaat)",
936 "Guinea-Bissau (Guiné Bissau)",
961 "Hungary (Magyarország)",
1002 "Israel (ישראל)",
1029 "Jordan (الأردن)",
1034 "Kazakhstan (Казахстан)",
1055 "Kuwait (الكويت)",
1060 "Kyrgyzstan (Кыргызстан)",
1075 "Lebanon (لبنان)",
1100 "Lithuania (Lietuva)",
1115 "Macedonia (FYROM) (Македонија)",
1120 "Madagascar (Madagasikara)",
1160 "Mauritania (موريتانيا)",
1165 "Mauritius (Moris)",
1186 "Moldova (Republica Moldova)",
1196 "Mongolia (Монгол)",
1201 "Montenegro (Crna Gora)",
1211 "Morocco (المغرب)",
1217 "Mozambique (Moçambique)",
1222 "Myanmar (Burma) (မြန်မာ)",
1227 "Namibia (Namibië)",
1242 "Netherlands (Nederland)",
1247 "New Caledonia (Nouvelle-Calédonie)",
1282 "North Korea (조선 민주주의 인민 공화국)",
1287 "Northern Mariana Islands",
1303 "Pakistan (پاکستان)",
1313 "Palestine (فلسطين)",
1365 "Réunion (La Réunion)",
1371 "Romania (România)",
1398 "Saint Kitts and Nevis",
1408 "Saint Martin (Saint-Martin (partie française))",
1414 "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)",
1419 "Saint Vincent and the Grenadines",
1434 "São Tomé and Príncipe (São Tomé e Príncipe)",
1439 "Saudi Arabia (المملكة العربية السعودية)",
1444 "Senegal (Sénégal)",
1474 "Slovakia (Slovensko)",
1479 "Slovenia (Slovenija)",
1489 "Somalia (Soomaaliya)",
1499 "South Korea (대한민국)",
1504 "South Sudan (جنوب السودان)",
1514 "Sri Lanka (ශ්රී ලංකාව)",
1519 "Sudan (السودان)",
1529 "Svalbard and Jan Mayen",
1545 "Switzerland (Schweiz)",
1595 "Trinidad and Tobago",
1600 "Tunisia (تونس)",
1615 "Turks and Caicos Islands",
1625 "U.S. Virgin Islands",
1635 "Ukraine (Україна)",
1640 "United Arab Emirates (الإمارات العربية المتحدة)",
1662 "Uzbekistan (Oʻzbekiston)",
1672 "Vatican City (Città del Vaticano)",
1683 "Vietnam (Việt Nam)",
1688 "Wallis and Futuna (Wallis-et-Futuna)",
1693 "Western Sahara (الصحراء الغربية)",