intl-tel-input-rails 3.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +19 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +32 -0
- data/Rakefile +1 -0
- data/intl-tel-input-rails.gemspec +23 -0
- data/lib/intl-tel-input/rails.rb +8 -0
- data/lib/intl-tel-input/rails/version.rb +5 -0
- data/vendor/assets/javascripts/intlTelInput.js +941 -0
- data/vendor/assets/javascripts/libphonenumber/utils.js +479 -0
- data/vendor/assets/stylesheets/intlTelInput.css +1 -0
- metadata +97 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 7548f1c56be7400a2d81d88f166585530d127bb1
|
4
|
+
data.tar.gz: f79217b1b2e6ef7c8c8ebc27a9b9836bd467f84f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 27debc32721bc6dd5a56664ee2c34b19308ecf7ac84410138b55de1dea1e98d221ec44145c2ac4c18024b9603bbd99d069adcd7108c9b2f71b74e1dd7f59d7aa
|
7
|
+
data.tar.gz: 823ae12c17b70758a02eb6af92b49bc621284b58c305034b189460eb55d7386e88968ecd16c1accca6d45774312599506eee1053c6638b075a8df8eafeb8c2ac
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Ilias Spyropoulos
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
# intl-tel-input-rails
|
2
|
+
|
3
|
+
This gem is a simple wrapper for the [intl-tel-input](https://github.com/Bluefieldscom/intl-tel-input)
|
4
|
+
library.
|
5
|
+
|
6
|
+
## Installation
|
7
|
+
|
8
|
+
Add this line to your application's Gemfile:
|
9
|
+
|
10
|
+
gem 'intl-tel-input-rails'
|
11
|
+
|
12
|
+
And then execute:
|
13
|
+
|
14
|
+
$ bundle
|
15
|
+
|
16
|
+
Or install it yourself as:
|
17
|
+
|
18
|
+
$ gem install intl-tel-input-rails
|
19
|
+
|
20
|
+
## Usage
|
21
|
+
|
22
|
+
Add the following directive to your Javascript manifest file:
|
23
|
+
|
24
|
+
//= require intl-tel-input
|
25
|
+
|
26
|
+
Coffeescript flavor:
|
27
|
+
|
28
|
+
#= require intl-tel-input
|
29
|
+
|
30
|
+
## Versioning
|
31
|
+
|
32
|
+
rsvpjs-rails 3.4.0 == intl-tel-input 3.4.0
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'intl-tel-input/rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "intl-tel-input-rails"
|
8
|
+
spec.version = IntlTelInput::Rails::VERSION
|
9
|
+
spec.authors = ["Ilias Spyropoulos"]
|
10
|
+
spec.email = ["ilias@incrediblue.com"]
|
11
|
+
spec.summary = %q{intl-tel-input for the Rails asset pipeline.}
|
12
|
+
spec.homepage = "https://github.com/ispyropoulos/intl-tel-input-rails"
|
13
|
+
spec.license = "MIT"
|
14
|
+
|
15
|
+
spec.files = `git ls-files -z`.split("\x0")
|
16
|
+
|
17
|
+
spec.require_paths = ["lib"]
|
18
|
+
|
19
|
+
spec.add_dependency "railties", "~> 3.1"
|
20
|
+
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.5"
|
22
|
+
spec.add_development_dependency "rake"
|
23
|
+
end
|
@@ -0,0 +1,941 @@
|
|
1
|
+
/*
|
2
|
+
International Telephone Input v3.3.0
|
3
|
+
https://github.com/Bluefieldscom/intl-tel-input.git
|
4
|
+
*/
|
5
|
+
// wrap in UMD - see https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
|
6
|
+
(function(factory) {
|
7
|
+
if (typeof define === "function" && define.amd) {
|
8
|
+
define([ "jquery" ], function($) {
|
9
|
+
factory($, window, document);
|
10
|
+
});
|
11
|
+
} else {
|
12
|
+
factory(jQuery, window, document);
|
13
|
+
}
|
14
|
+
})(function($, window, document, undefined) {
|
15
|
+
"use strict";
|
16
|
+
var pluginName = "intlTelInput", id = 1, // give each instance it's own id for namespaced event handling
|
17
|
+
defaults = {
|
18
|
+
// automatically format the number according to the selected country
|
19
|
+
autoFormat: true,
|
20
|
+
// if there is just a dial code in the input: remove it on blur, and re-add it on focus
|
21
|
+
autoHideDialCode: true,
|
22
|
+
// default country
|
23
|
+
defaultCountry: "",
|
24
|
+
// don't insert international dial codes
|
25
|
+
nationalMode: false,
|
26
|
+
// display only these countries
|
27
|
+
onlyCountries: [],
|
28
|
+
// the countries at the top of the list. defaults to united states and united kingdom
|
29
|
+
preferredCountries: [ "us", "gb" ],
|
30
|
+
// make the dropdown the same width as the input
|
31
|
+
responsiveDropdown: false,
|
32
|
+
// specify the path to the libphonenumber script to enable validation/formatting
|
33
|
+
utilsScript: ""
|
34
|
+
}, keys = {
|
35
|
+
UP: 38,
|
36
|
+
DOWN: 40,
|
37
|
+
ENTER: 13,
|
38
|
+
ESC: 27,
|
39
|
+
PLUS: 43,
|
40
|
+
A: 65,
|
41
|
+
Z: 90,
|
42
|
+
ZERO: 48,
|
43
|
+
NINE: 57,
|
44
|
+
SPACE: 32,
|
45
|
+
BSPACE: 8,
|
46
|
+
DEL: 46,
|
47
|
+
CTRL: 17,
|
48
|
+
CMD1: 91,
|
49
|
+
// Chrome
|
50
|
+
CMD2: 224
|
51
|
+
}, windowLoaded = false;
|
52
|
+
// keep track of if the window.load event has fired as impossible to check after the fact
|
53
|
+
$(window).load(function() {
|
54
|
+
windowLoaded = true;
|
55
|
+
});
|
56
|
+
function Plugin(element, options) {
|
57
|
+
this.element = element;
|
58
|
+
this.options = $.extend({}, defaults, options);
|
59
|
+
this._defaults = defaults;
|
60
|
+
// event namespace
|
61
|
+
this.ns = "." + pluginName + id++;
|
62
|
+
// Chrome, FF, Safari, IE9+
|
63
|
+
this.isGoodBrowser = Boolean(element.setSelectionRange);
|
64
|
+
this.hadInitialPlaceholder = Boolean($(element).attr("placeholder"));
|
65
|
+
this._name = pluginName;
|
66
|
+
this.init();
|
67
|
+
}
|
68
|
+
Plugin.prototype = {
|
69
|
+
init: function() {
|
70
|
+
var that = this;
|
71
|
+
// if defaultCountry is set to "auto", we must do a lookup first
|
72
|
+
if (this.options.defaultCountry == "auto") {
|
73
|
+
$.get("http://ipinfo.io", function(response) {
|
74
|
+
that.options.defaultCountry = response && response.country ? response.country.toLowerCase() : "";
|
75
|
+
that.ready();
|
76
|
+
}, "jsonp");
|
77
|
+
} else {
|
78
|
+
this.ready();
|
79
|
+
}
|
80
|
+
},
|
81
|
+
ready: function() {
|
82
|
+
// if in nationalMode, disable options relating to dial codes
|
83
|
+
if (this.options.nationalMode) {
|
84
|
+
this.options.autoHideDialCode = false;
|
85
|
+
}
|
86
|
+
// IE Mobile and Chrome for Android have issues with key events (see issues 56 and 68) which make autoFormat impossible
|
87
|
+
if (navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/Chrome/i)) {
|
88
|
+
this.options.autoFormat = false;
|
89
|
+
}
|
90
|
+
// auto enable responsiveDropdown mode on small screens (dropdown is currently set to 430px in CSS)
|
91
|
+
if (window.innerWidth < 500) {
|
92
|
+
this.options.responsiveDropdown = true;
|
93
|
+
}
|
94
|
+
// process all the data: onlyCounties, preferredCountries, defaultCountry etc
|
95
|
+
this._processCountryData();
|
96
|
+
// generate the markup
|
97
|
+
this._generateMarkup();
|
98
|
+
// set the initial state of the input value and the selected flag
|
99
|
+
this._setInitialState();
|
100
|
+
// start all of the event listeners: autoHideDialCode, input keydown, selectedFlag click
|
101
|
+
this._initListeners();
|
102
|
+
},
|
103
|
+
/********************
|
104
|
+
* PRIVATE METHODS
|
105
|
+
********************/
|
106
|
+
// prepare all of the country data, including onlyCountries, preferredCountries and
|
107
|
+
// defaultCountry options
|
108
|
+
_processCountryData: function() {
|
109
|
+
// set the instances country data objects
|
110
|
+
this._setInstanceCountryData();
|
111
|
+
// set the preferredCountries property
|
112
|
+
this._setPreferredCountries();
|
113
|
+
},
|
114
|
+
// add a country code to this.countryCodes
|
115
|
+
_addCountryCode: function(iso2, dialCode, priority) {
|
116
|
+
if (!(dialCode in this.countryCodes)) {
|
117
|
+
this.countryCodes[dialCode] = [];
|
118
|
+
}
|
119
|
+
var index = priority || 0;
|
120
|
+
this.countryCodes[dialCode][index] = iso2;
|
121
|
+
},
|
122
|
+
// process onlyCountries array if present, and generate the countryCodes map
|
123
|
+
_setInstanceCountryData: function() {
|
124
|
+
var i;
|
125
|
+
// process onlyCountries option
|
126
|
+
if (this.options.onlyCountries.length) {
|
127
|
+
this.countries = [];
|
128
|
+
for (i = 0; i < this.options.onlyCountries.length; i++) {
|
129
|
+
var countryData = this._getCountryData(this.options.onlyCountries[i], true, false);
|
130
|
+
if (countryData) {
|
131
|
+
this.countries.push(countryData);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
} else {
|
135
|
+
this.countries = allCountries;
|
136
|
+
}
|
137
|
+
// generate countryCodes map
|
138
|
+
this.countryCodes = {};
|
139
|
+
for (i = 0; i < this.countries.length; i++) {
|
140
|
+
var c = this.countries[i];
|
141
|
+
this._addCountryCode(c.iso2, c.dialCode, c.priority);
|
142
|
+
// area codes
|
143
|
+
if (c.areaCodes) {
|
144
|
+
for (var j = 0; j < c.areaCodes.length; j++) {
|
145
|
+
// full dial code is country code + dial code
|
146
|
+
this._addCountryCode(c.iso2, c.dialCode + c.areaCodes[j]);
|
147
|
+
}
|
148
|
+
}
|
149
|
+
}
|
150
|
+
},
|
151
|
+
// process preferred countries - iterate through the preferences,
|
152
|
+
// fetching the country data for each one
|
153
|
+
_setPreferredCountries: function() {
|
154
|
+
this.preferredCountries = [];
|
155
|
+
for (var i = 0; i < this.options.preferredCountries.length; i++) {
|
156
|
+
var countryCode = this.options.preferredCountries[i], countryData = this._getCountryData(countryCode, false, true);
|
157
|
+
if (countryData) {
|
158
|
+
this.preferredCountries.push(countryData);
|
159
|
+
}
|
160
|
+
}
|
161
|
+
},
|
162
|
+
// generate all of the markup for the plugin: the selected flag overlay, and the dropdown
|
163
|
+
_generateMarkup: function() {
|
164
|
+
// telephone input
|
165
|
+
this.telInput = $(this.element);
|
166
|
+
// containers (mostly for positioning)
|
167
|
+
this.telInput.wrap($("<div>", {
|
168
|
+
"class": "intl-tel-input"
|
169
|
+
}));
|
170
|
+
var flagsContainer = $("<div>", {
|
171
|
+
"class": "flag-dropdown"
|
172
|
+
}).insertAfter(this.telInput);
|
173
|
+
// currently selected flag (displayed to left of input)
|
174
|
+
var selectedFlag = $("<div>", {
|
175
|
+
"class": "selected-flag"
|
176
|
+
}).appendTo(flagsContainer);
|
177
|
+
this.selectedFlagInner = $("<div>", {
|
178
|
+
"class": "flag"
|
179
|
+
}).appendTo(selectedFlag);
|
180
|
+
// CSS triangle
|
181
|
+
$("<div>", {
|
182
|
+
"class": "arrow"
|
183
|
+
}).appendTo(this.selectedFlagInner);
|
184
|
+
// country list contains: preferred countries, then divider, then all countries
|
185
|
+
this.countryList = $("<ul>", {
|
186
|
+
"class": "country-list v-hide"
|
187
|
+
}).appendTo(flagsContainer);
|
188
|
+
if (this.preferredCountries.length) {
|
189
|
+
this._appendListItems(this.preferredCountries, "preferred");
|
190
|
+
$("<li>", {
|
191
|
+
"class": "divider"
|
192
|
+
}).appendTo(this.countryList);
|
193
|
+
}
|
194
|
+
this._appendListItems(this.countries, "");
|
195
|
+
// now we can grab the dropdown height, and hide it properly
|
196
|
+
this.dropdownHeight = this.countryList.outerHeight();
|
197
|
+
this.countryList.removeClass("v-hide").addClass("hide");
|
198
|
+
// and set the width
|
199
|
+
if (this.options.responsiveDropdown) {
|
200
|
+
this.countryList.outerWidth(this.telInput.outerWidth());
|
201
|
+
}
|
202
|
+
// this is useful in lots of places
|
203
|
+
this.countryListItems = this.countryList.children(".country");
|
204
|
+
},
|
205
|
+
// add a country <li> to the countryList <ul> container
|
206
|
+
_appendListItems: function(countries, className) {
|
207
|
+
// we create so many DOM elements, I decided it was faster to build a temp string
|
208
|
+
// and then add everything to the DOM in one go at the end
|
209
|
+
var tmp = "";
|
210
|
+
// for each country
|
211
|
+
for (var i = 0; i < countries.length; i++) {
|
212
|
+
var c = countries[i];
|
213
|
+
// open the list item
|
214
|
+
tmp += "<li class='country " + className + "' data-dial-code='" + c.dialCode + "' data-country-code='" + c.iso2 + "'>";
|
215
|
+
// add the flag
|
216
|
+
tmp += "<div class='flag " + c.iso2 + "'></div>";
|
217
|
+
// and the country name and dial code
|
218
|
+
tmp += "<span class='country-name'>" + c.name + "</span>";
|
219
|
+
tmp += "<span class='dial-code'>+" + c.dialCode + "</span>";
|
220
|
+
// close the list item
|
221
|
+
tmp += "</li>";
|
222
|
+
}
|
223
|
+
this.countryList.append(tmp);
|
224
|
+
},
|
225
|
+
// set the initial state of the input value and the selected flag
|
226
|
+
_setInitialState: function() {
|
227
|
+
var val = this.telInput.val();
|
228
|
+
// if there is a number, and it's valid, we can go ahead and set the flag, else fall back to default
|
229
|
+
if (this._getDialCode(val)) {
|
230
|
+
this._updateFlagFromNumber(val);
|
231
|
+
} else {
|
232
|
+
var defaultCountry;
|
233
|
+
// check the defaultCountry option, else fall back to the first in the list
|
234
|
+
if (this.options.defaultCountry) {
|
235
|
+
defaultCountry = this._getCountryData(this.options.defaultCountry, false, false);
|
236
|
+
} else {
|
237
|
+
defaultCountry = this.preferredCountries.length ? this.preferredCountries[0] : this.countries[0];
|
238
|
+
}
|
239
|
+
this._selectFlag(defaultCountry.iso2);
|
240
|
+
// if empty, insert the default dial code (this function will check !nationalMode and !autoHideDialCode)
|
241
|
+
if (!val) {
|
242
|
+
this._resetToDialCode(defaultCountry.dialCode);
|
243
|
+
}
|
244
|
+
}
|
245
|
+
// format
|
246
|
+
if (val) {
|
247
|
+
// this wont be run after _resetToDialCode as that's only called if val is empty
|
248
|
+
this._updateVal(val, false);
|
249
|
+
}
|
250
|
+
},
|
251
|
+
// initialise the main event listeners: input keyup, and click selected flag
|
252
|
+
_initListeners: function() {
|
253
|
+
var that = this;
|
254
|
+
// auto hide dial code option
|
255
|
+
if (this.options.autoHideDialCode) {
|
256
|
+
this._initAutoHideDialCode();
|
257
|
+
}
|
258
|
+
// hack for input nested inside label: clicking the selected-flag to open the dropdown would then automatically trigger a 2nd click on the input which would close it again
|
259
|
+
var label = this.telInput.closest("label");
|
260
|
+
if (label.length) {
|
261
|
+
label.on("click" + this.ns, function(e) {
|
262
|
+
// if the dropdown is closed, then focus the input, else ignore the click
|
263
|
+
if (that.countryList.hasClass("hide")) {
|
264
|
+
that.telInput.focus();
|
265
|
+
} else {
|
266
|
+
e.preventDefault();
|
267
|
+
}
|
268
|
+
});
|
269
|
+
}
|
270
|
+
if (this.options.autoFormat) {
|
271
|
+
// format number and update flag on keypress
|
272
|
+
// use keypress event as we want to ignore all input except for a select few keys,
|
273
|
+
// but we dont want to ignore the navigation keys like the arrows etc.
|
274
|
+
// NOTE: no point in refactoring this to only bind these listeners on focus/blur because then you would need to have those 2 listeners running the whole time anyway...
|
275
|
+
this.telInput.on("keypress" + this.ns, function(e) {
|
276
|
+
// 32 is space, and after that it's all chars (not meta/nav keys)
|
277
|
+
// this fix is needed for Firefox, which triggers keypress event for some meta/nav keys
|
278
|
+
// Update: also ignore if this is a metaKey e.g. FF and Safari trigger keypress on the v of Ctrl+v
|
279
|
+
if (e.which >= keys.SPACE && !e.metaKey) {
|
280
|
+
e.preventDefault();
|
281
|
+
// allowed keys are just numeric keys and plus
|
282
|
+
// we must allow plus for the case where the user does select-all and then hits plus to start typing a new number. we could refine this logic to first check that the selection contains a plus, but that wont work in old browsers, and I think it's overkill anyway
|
283
|
+
var isAllowedKey = e.which >= keys.ZERO && e.which <= keys.NINE || e.which == keys.PLUS, input = that.telInput[0], noSelection = that.isGoodBrowser && input.selectionStart == input.selectionEnd, max = that.telInput.attr("maxlength"), // assumes that if max exists, it is >0
|
284
|
+
isBelowMax = max ? that.telInput.val().length < max : true;
|
285
|
+
// first: ensure we dont go over maxlength. we must do this here to prevent adding digits in the middle of the number
|
286
|
+
// still reformat even if not an allowed key as they could by typing a formatting char, but ignore if there's a selection as doesn't make sense to replace selection with illegal char and then immediately remove it
|
287
|
+
if (isBelowMax && (isAllowedKey || noSelection)) {
|
288
|
+
var newChar = isAllowedKey ? String.fromCharCode(e.which) : null;
|
289
|
+
that._handleInputKey(newChar, true);
|
290
|
+
}
|
291
|
+
}
|
292
|
+
});
|
293
|
+
}
|
294
|
+
// handle keyup event
|
295
|
+
// for autoFormat: we use keyup to catch delete events after the fact
|
296
|
+
this.telInput.on("keyup" + this.ns, function(e) {
|
297
|
+
// the "enter" key event from selecting a dropdown item is triggered here on the input, because the document.keydown handler that initially handles that event triggers a focus on the input, and so the keyup for that same key event gets triggered here. weird, but just make sure we dont bother doing any re-formatting in this case (we've already done preventDefault in the keydown handler, so it wont actually submit the form or anything).
|
298
|
+
if (e.which == keys.ENTER) {} else if (that.options.autoFormat) {
|
299
|
+
var isCtrl = e.which == keys.CTRL || e.which == keys.CMD1 || e.which == keys.CMD2, input = that.telInput[0], noSelection = that.isGoodBrowser && input.selectionStart == input.selectionEnd, cursorAtEnd = that.isGoodBrowser && input.selectionStart == that.telInput.val().length;
|
300
|
+
// if delete: format with suffix
|
301
|
+
// if backspace: format (if cursorAtEnd: no suffix)
|
302
|
+
// if ctrl and no selection (i.e. could have just been a paste): format with suffix
|
303
|
+
if (e.which == keys.DEL || e.which == keys.BSPACE || isCtrl && noSelection) {
|
304
|
+
var addSuffix = !(e.which == keys.BSPACE && cursorAtEnd);
|
305
|
+
that._handleInputKey(null, addSuffix);
|
306
|
+
}
|
307
|
+
// prevent deleting the plus (if not in nationalMode)
|
308
|
+
if (!that.options.nationalMode) {
|
309
|
+
var val = that.telInput.val();
|
310
|
+
if (val.substr(0, 1) != "+") {
|
311
|
+
// newCursorPos is current pos + 1 to account for the plus we are about to add
|
312
|
+
var newCursorPos = that.isGoodBrowser ? input.selectionStart + 1 : 0;
|
313
|
+
that.telInput.val("+" + val);
|
314
|
+
if (that.isGoodBrowser) {
|
315
|
+
input.setSelectionRange(newCursorPos, newCursorPos);
|
316
|
+
}
|
317
|
+
}
|
318
|
+
}
|
319
|
+
} else {
|
320
|
+
// if no autoFormat, just update flag
|
321
|
+
that._updateFlagFromNumber(that.telInput.val());
|
322
|
+
}
|
323
|
+
});
|
324
|
+
// toggle country dropdown on click
|
325
|
+
var selectedFlag = this.selectedFlagInner.parent();
|
326
|
+
selectedFlag.on("click" + this.ns, function(e) {
|
327
|
+
// only intercept this event if we're opening the dropdown
|
328
|
+
// else let it bubble up to the top ("click-off-to-close" listener)
|
329
|
+
// we cannot just stopPropagation as it may be needed to close another instance
|
330
|
+
if (that.countryList.hasClass("hide") && !that.telInput.prop("disabled")) {
|
331
|
+
that._showDropdown();
|
332
|
+
}
|
333
|
+
});
|
334
|
+
// if the user has specified the path to the utils script, fetch it on window.load
|
335
|
+
if (this.options.utilsScript) {
|
336
|
+
// if the plugin is being initialised after the window.load event has already been fired
|
337
|
+
if (windowLoaded) {
|
338
|
+
this.loadUtils();
|
339
|
+
} else {
|
340
|
+
// wait until the load event so we don't block any other requests e.g. the flags image
|
341
|
+
$(window).load(function() {
|
342
|
+
that.loadUtils();
|
343
|
+
});
|
344
|
+
}
|
345
|
+
}
|
346
|
+
},
|
347
|
+
// when autoFormat is enabled: handle various key events on the input: the 2 main situations are 1) adding a new number character, which will replace any selection, reformat, and try to preserve the cursor position. and 2) reformatting on backspace, or paste event
|
348
|
+
_handleInputKey: function(newNumericChar, addSuffix) {
|
349
|
+
var val = this.telInput.val(), newCursor = null, cursorAtEnd = false, // raw DOM element
|
350
|
+
input = this.telInput[0];
|
351
|
+
if (this.isGoodBrowser) {
|
352
|
+
var selectionEnd = input.selectionEnd, originalLen = val.length;
|
353
|
+
cursorAtEnd = selectionEnd == originalLen;
|
354
|
+
// if handling a new number character: insert it in the right place and calculate the new cursor position
|
355
|
+
if (newNumericChar) {
|
356
|
+
// replace any selection they may have made with the new char
|
357
|
+
val = val.substring(0, input.selectionStart) + newNumericChar + val.substring(selectionEnd, originalLen);
|
358
|
+
// if the cursor was not at the end then calculate it's new pos
|
359
|
+
if (!cursorAtEnd) {
|
360
|
+
newCursor = selectionEnd + (val.length - originalLen);
|
361
|
+
}
|
362
|
+
} else {
|
363
|
+
// here we're not handling a new char, we're just doing a re-format, but we still need to maintain the cursor position
|
364
|
+
newCursor = input.selectionStart;
|
365
|
+
}
|
366
|
+
} else if (newNumericChar) {
|
367
|
+
val += newNumericChar;
|
368
|
+
}
|
369
|
+
// update the number and flag
|
370
|
+
this.setNumber(val, addSuffix);
|
371
|
+
// update the cursor position
|
372
|
+
if (this.isGoodBrowser) {
|
373
|
+
// if it was at the end, keep it there
|
374
|
+
if (cursorAtEnd) {
|
375
|
+
newCursor = this.telInput.val().length;
|
376
|
+
}
|
377
|
+
input.setSelectionRange(newCursor, newCursor);
|
378
|
+
}
|
379
|
+
},
|
380
|
+
// on focus: if empty add dial code. on blur: if just dial code, then empty it
|
381
|
+
_initAutoHideDialCode: function() {
|
382
|
+
var that = this;
|
383
|
+
// mousedown decides where the cursor goes, so if we're focusing
|
384
|
+
// we must preventDefault as we'll be inserting the dial code,
|
385
|
+
// and we want the cursor to be at the end no matter where they click
|
386
|
+
this.telInput.on("mousedown" + this.ns, function(e) {
|
387
|
+
if (!that.telInput.is(":focus") && !that.telInput.val()) {
|
388
|
+
e.preventDefault();
|
389
|
+
// but this also cancels the focus, so we must trigger that manually
|
390
|
+
that.telInput.focus();
|
391
|
+
}
|
392
|
+
});
|
393
|
+
// on focus: if empty, insert the dial code for the currently selected flag
|
394
|
+
this.telInput.on("focus" + this.ns, function() {
|
395
|
+
if (!that.telInput.val()) {
|
396
|
+
that._updateVal("+" + that.selectedCountryData.dialCode, true);
|
397
|
+
// after auto-inserting a dial code, if the first key they hit is '+' then assume
|
398
|
+
// they are entering a new number, so remove the dial code.
|
399
|
+
// use keypress instead of keydown because keydown gets triggered for the shift key
|
400
|
+
// (required to hit the + key), and instead of keyup because that shows the new '+'
|
401
|
+
// before removing the old one
|
402
|
+
that.telInput.one("keypress.plus" + that.ns, function(e) {
|
403
|
+
if (e.which == keys.PLUS) {
|
404
|
+
// if autoFormat is enabled, this key event will have already have been handled by another keypress listener (hence we need to add the "+"). if disabled, it will be handled after this by a keyup listener (hence no need to add the "+").
|
405
|
+
var newVal = that.options.autoFormat ? "+" : "";
|
406
|
+
that.telInput.val(newVal);
|
407
|
+
}
|
408
|
+
});
|
409
|
+
// after tabbing in, make sure the cursor is at the end
|
410
|
+
// we must use setTimeout to get outside of the focus handler as it seems the
|
411
|
+
// selection happens after that
|
412
|
+
setTimeout(function() {
|
413
|
+
var input = that.telInput[0];
|
414
|
+
if (that.isGoodBrowser) {
|
415
|
+
var len = that.telInput.val().length;
|
416
|
+
input.setSelectionRange(len, len);
|
417
|
+
}
|
418
|
+
});
|
419
|
+
}
|
420
|
+
});
|
421
|
+
// on blur: if just a dial code then remove it
|
422
|
+
this.telInput.on("blur" + this.ns, function() {
|
423
|
+
var value = that.telInput.val(), startsPlus = value.substr(0, 1) == "+";
|
424
|
+
if (startsPlus) {
|
425
|
+
var numeric = that._getNumeric(value);
|
426
|
+
// if just a plus, or if just a dial code
|
427
|
+
if (!numeric || that.selectedCountryData.dialCode == numeric) {
|
428
|
+
that.telInput.val("");
|
429
|
+
}
|
430
|
+
}
|
431
|
+
// remove the keypress listener we added on focus
|
432
|
+
that.telInput.off("keypress.plus" + that.ns);
|
433
|
+
});
|
434
|
+
},
|
435
|
+
// extract the numeric digits from the given string
|
436
|
+
_getNumeric: function(s) {
|
437
|
+
return s.replace(/\D/g, "");
|
438
|
+
},
|
439
|
+
// show the dropdown
|
440
|
+
_showDropdown: function() {
|
441
|
+
this._setDropdownPosition();
|
442
|
+
// update highlighting and scroll to active list item
|
443
|
+
var activeListItem = this.countryList.children(".active");
|
444
|
+
this._highlightListItem(activeListItem);
|
445
|
+
// show it
|
446
|
+
this.countryList.removeClass("hide");
|
447
|
+
this._scrollTo(activeListItem);
|
448
|
+
// bind all the dropdown-related listeners: mouseover, click, click-off, keydown
|
449
|
+
this._bindDropdownListeners();
|
450
|
+
// update the arrow
|
451
|
+
this.selectedFlagInner.children(".arrow").addClass("up");
|
452
|
+
},
|
453
|
+
// decide where to position dropdown (depends on position within viewport, and scroll)
|
454
|
+
_setDropdownPosition: function() {
|
455
|
+
var inputTop = this.telInput.offset().top, windowTop = $(window).scrollTop(), // dropdownFitsBelow = (dropdownBottom < windowBottom)
|
456
|
+
dropdownFitsBelow = inputTop + this.telInput.outerHeight() + this.dropdownHeight < windowTop + $(window).height(), dropdownFitsAbove = inputTop - this.dropdownHeight > windowTop;
|
457
|
+
// dropdownHeight - 1 for border
|
458
|
+
var cssTop = !dropdownFitsBelow && dropdownFitsAbove ? "-" + (this.dropdownHeight - 1) + "px" : "";
|
459
|
+
this.countryList.css("top", cssTop);
|
460
|
+
},
|
461
|
+
// we only bind dropdown listeners when the dropdown is open
|
462
|
+
_bindDropdownListeners: function() {
|
463
|
+
var that = this;
|
464
|
+
// when mouse over a list item, just highlight that one
|
465
|
+
// we add the class "highlight", so if they hit "enter" we know which one to select
|
466
|
+
this.countryList.on("mouseover" + this.ns, ".country", function(e) {
|
467
|
+
that._highlightListItem($(this));
|
468
|
+
});
|
469
|
+
// listen for country selection
|
470
|
+
this.countryList.on("click" + this.ns, ".country", function(e) {
|
471
|
+
that._selectListItem($(this));
|
472
|
+
});
|
473
|
+
// click off to close
|
474
|
+
// (except when this initial opening click is bubbling up)
|
475
|
+
// we cannot just stopPropagation as it may be needed to close another instance
|
476
|
+
var isOpening = true;
|
477
|
+
$("html").on("click" + this.ns, function(e) {
|
478
|
+
if (!isOpening) {
|
479
|
+
that._closeDropdown();
|
480
|
+
}
|
481
|
+
isOpening = false;
|
482
|
+
});
|
483
|
+
// listen for up/down scrolling, enter to select, or letters to jump to country name.
|
484
|
+
// use keydown as keypress doesn't fire for non-char keys and we want to catch if they
|
485
|
+
// just hit down and hold it to scroll down (no keyup event).
|
486
|
+
// listen on the document because that's where key events are triggered if no input has focus
|
487
|
+
var query = "", queryTimer = null;
|
488
|
+
$(document).on("keydown" + this.ns, function(e) {
|
489
|
+
// prevent down key from scrolling the whole page,
|
490
|
+
// and enter key from submitting a form etc
|
491
|
+
e.preventDefault();
|
492
|
+
if (e.which == keys.UP || e.which == keys.DOWN) {
|
493
|
+
// up and down to navigate
|
494
|
+
that._handleUpDownKey(e.which);
|
495
|
+
} else if (e.which == keys.ENTER) {
|
496
|
+
// enter to select
|
497
|
+
that._handleEnterKey();
|
498
|
+
} else if (e.which == keys.ESC) {
|
499
|
+
// esc to close
|
500
|
+
that._closeDropdown();
|
501
|
+
} else if (e.which >= keys.A && e.which <= keys.Z || e.which == keys.SPACE) {
|
502
|
+
// upper case letters (note: keyup/keydown only return upper case letters)
|
503
|
+
// jump to countries that start with the query string
|
504
|
+
if (queryTimer) {
|
505
|
+
clearTimeout(queryTimer);
|
506
|
+
}
|
507
|
+
query += String.fromCharCode(e.which);
|
508
|
+
that._searchForCountry(query);
|
509
|
+
// if the timer hits 1 second, reset the query
|
510
|
+
queryTimer = setTimeout(function() {
|
511
|
+
query = "";
|
512
|
+
}, 1e3);
|
513
|
+
}
|
514
|
+
});
|
515
|
+
},
|
516
|
+
// highlight the next/prev item in the list (and ensure it is visible)
|
517
|
+
_handleUpDownKey: function(key) {
|
518
|
+
var current = this.countryList.children(".highlight").first();
|
519
|
+
var next = key == keys.UP ? current.prev() : current.next();
|
520
|
+
if (next.length) {
|
521
|
+
// skip the divider
|
522
|
+
if (next.hasClass("divider")) {
|
523
|
+
next = key == keys.UP ? next.prev() : next.next();
|
524
|
+
}
|
525
|
+
this._highlightListItem(next);
|
526
|
+
this._scrollTo(next);
|
527
|
+
}
|
528
|
+
},
|
529
|
+
// select the currently highlighted item
|
530
|
+
_handleEnterKey: function() {
|
531
|
+
var currentCountry = this.countryList.children(".highlight").first();
|
532
|
+
if (currentCountry.length) {
|
533
|
+
this._selectListItem(currentCountry);
|
534
|
+
}
|
535
|
+
},
|
536
|
+
// find the first list item whose name starts with the query string
|
537
|
+
_searchForCountry: function(query) {
|
538
|
+
for (var i = 0; i < this.countries.length; i++) {
|
539
|
+
if (this._startsWith(this.countries[i].name, query)) {
|
540
|
+
var listItem = this.countryList.children("[data-country-code=" + this.countries[i].iso2 + "]").not(".preferred");
|
541
|
+
// update highlighting and scroll
|
542
|
+
this._highlightListItem(listItem);
|
543
|
+
this._scrollTo(listItem, true);
|
544
|
+
break;
|
545
|
+
}
|
546
|
+
}
|
547
|
+
},
|
548
|
+
// check if (uppercase) string a starts with string b
|
549
|
+
_startsWith: function(a, b) {
|
550
|
+
return a.substr(0, b.length).toUpperCase() == b;
|
551
|
+
},
|
552
|
+
// update the input's value to the given val
|
553
|
+
// if autoFormat=true, format it first according to the country-specific formatting rules
|
554
|
+
_updateVal: function(val, addSuffix) {
|
555
|
+
var formatted;
|
556
|
+
if (this.options.autoFormat && window.intlTelInputUtils) {
|
557
|
+
formatted = intlTelInputUtils.formatNumber(val, this.selectedCountryData.iso2, addSuffix);
|
558
|
+
// ensure we dont go over maxlength. we must do this here to truncate any formatting suffix, and also handle paste events
|
559
|
+
var max = this.telInput.attr("maxlength");
|
560
|
+
if (max && formatted.length > max) {
|
561
|
+
formatted = formatted.substr(0, max);
|
562
|
+
}
|
563
|
+
} else {
|
564
|
+
// no autoFormat, so just insert the original value
|
565
|
+
formatted = val;
|
566
|
+
}
|
567
|
+
this.telInput.val(formatted);
|
568
|
+
},
|
569
|
+
// check if need to select a new flag based on the given number
|
570
|
+
_updateFlagFromNumber: function(number) {
|
571
|
+
// try and extract valid dial code from input
|
572
|
+
var dialCode = this._getDialCode(number);
|
573
|
+
if (dialCode) {
|
574
|
+
// check if one of the matching countries is already selected
|
575
|
+
var countryCodes = this.countryCodes[this._getNumeric(dialCode)], alreadySelected = false;
|
576
|
+
if (this.selectedCountryData) {
|
577
|
+
for (var i = 0; i < countryCodes.length; i++) {
|
578
|
+
if (countryCodes[i] == this.selectedCountryData.iso2) {
|
579
|
+
alreadySelected = true;
|
580
|
+
}
|
581
|
+
}
|
582
|
+
}
|
583
|
+
// if a matching country is not already selected (or this is an unknown NANP area code): choose the first in the list
|
584
|
+
if (!alreadySelected || this._isUnknownNanp(number, dialCode)) {
|
585
|
+
// if using onlyCountries option, countryCodes[0] may be empty, so we must find the first non-empty index
|
586
|
+
for (var j = 0; j < countryCodes.length; j++) {
|
587
|
+
if (countryCodes[j]) {
|
588
|
+
this._selectFlag(countryCodes[j]);
|
589
|
+
break;
|
590
|
+
}
|
591
|
+
}
|
592
|
+
}
|
593
|
+
}
|
594
|
+
},
|
595
|
+
// check if the given number contains an unknown area code from the North American Numbering Plan i.e. the only dialCode that could be extracted was +1 but the actual number's length is >=4
|
596
|
+
_isUnknownNanp: function(number, dialCode) {
|
597
|
+
return dialCode == "+1" && this._getNumeric(number).length >= 4;
|
598
|
+
},
|
599
|
+
// reset the input value to just a dial code
|
600
|
+
_resetToDialCode: function(dialCode) {
|
601
|
+
if (!this.options.nationalMode && !this.options.autoHideDialCode) {
|
602
|
+
this.telInput.val("+" + dialCode);
|
603
|
+
}
|
604
|
+
},
|
605
|
+
// remove highlighting from other list items and highlight the given item
|
606
|
+
_highlightListItem: function(listItem) {
|
607
|
+
this.countryListItems.removeClass("highlight");
|
608
|
+
listItem.addClass("highlight");
|
609
|
+
},
|
610
|
+
// find the country data for the given country code
|
611
|
+
// the ignoreOnlyCountriesOption is only used during init() while parsing the onlyCountries array
|
612
|
+
_getCountryData: function(countryCode, ignoreOnlyCountriesOption, allowFail) {
|
613
|
+
var countryList = ignoreOnlyCountriesOption ? allCountries : this.countries;
|
614
|
+
for (var i = 0; i < countryList.length; i++) {
|
615
|
+
if (countryList[i].iso2 == countryCode) {
|
616
|
+
return countryList[i];
|
617
|
+
}
|
618
|
+
}
|
619
|
+
if (allowFail) {
|
620
|
+
return null;
|
621
|
+
} else {
|
622
|
+
throw new Error("No country data for '" + countryCode + "'");
|
623
|
+
}
|
624
|
+
},
|
625
|
+
// select the given flag, update the placeholder and the active list item
|
626
|
+
_selectFlag: function(countryCode) {
|
627
|
+
// do this first as it will throw an error and stop if countryCode is invalid
|
628
|
+
this.selectedCountryData = this._getCountryData(countryCode, false, false);
|
629
|
+
this.selectedFlagInner.attr("class", "flag " + countryCode);
|
630
|
+
// update the selected country's title attribute
|
631
|
+
var title = this.selectedCountryData.name + ": +" + this.selectedCountryData.dialCode;
|
632
|
+
this.selectedFlagInner.parent().attr("title", title);
|
633
|
+
// and the input's placeholder
|
634
|
+
this._updatePlaceholder();
|
635
|
+
// update the active list item
|
636
|
+
var listItem = this.countryListItems.children(".flag." + countryCode).first().parent();
|
637
|
+
this.countryListItems.removeClass("active");
|
638
|
+
listItem.addClass("active");
|
639
|
+
},
|
640
|
+
// update the input placeholder to an example number from the currently selected country
|
641
|
+
_updatePlaceholder: function() {
|
642
|
+
if (window.intlTelInputUtils && !this.hadInitialPlaceholder) {
|
643
|
+
var iso2 = this.selectedCountryData.iso2, placeholder = intlTelInputUtils.getExampleNumber(iso2, this.options.nationalMode);
|
644
|
+
this.telInput.attr("placeholder", placeholder);
|
645
|
+
}
|
646
|
+
},
|
647
|
+
// called when the user selects a list item from the dropdown
|
648
|
+
_selectListItem: function(listItem) {
|
649
|
+
// update selected flag and active list item
|
650
|
+
var countryCode = listItem.attr("data-country-code");
|
651
|
+
this._selectFlag(countryCode);
|
652
|
+
this._closeDropdown();
|
653
|
+
// update input value
|
654
|
+
if (!this.options.nationalMode) {
|
655
|
+
this._updateDialCode("+" + listItem.attr("data-dial-code"));
|
656
|
+
}
|
657
|
+
// always fire the change event as even if nationalMode=true (and we haven't updated
|
658
|
+
// the input val), the system as a whole has still changed - see country-sync example
|
659
|
+
this.telInput.trigger("change");
|
660
|
+
// focus the input
|
661
|
+
this.telInput.focus();
|
662
|
+
},
|
663
|
+
// close the dropdown and unbind any listeners
|
664
|
+
_closeDropdown: function() {
|
665
|
+
this.countryList.addClass("hide");
|
666
|
+
// update the arrow
|
667
|
+
this.selectedFlagInner.children(".arrow").removeClass("up");
|
668
|
+
// unbind key events
|
669
|
+
$(document).off(this.ns);
|
670
|
+
// unbind click-off-to-close
|
671
|
+
$("html").off(this.ns);
|
672
|
+
// unbind hover and click listeners
|
673
|
+
this.countryList.off(this.ns);
|
674
|
+
},
|
675
|
+
// check if an element is visible within it's container, else scroll until it is
|
676
|
+
_scrollTo: function(element, middle) {
|
677
|
+
var container = this.countryList, containerHeight = container.height(), containerTop = container.offset().top, containerBottom = containerTop + containerHeight, elementHeight = element.outerHeight(), elementTop = element.offset().top, elementBottom = elementTop + elementHeight, newScrollTop = elementTop - containerTop + container.scrollTop(), middleOffset = containerHeight / 2 - elementHeight / 2;
|
678
|
+
if (elementTop < containerTop) {
|
679
|
+
// scroll up
|
680
|
+
if (middle) {
|
681
|
+
newScrollTop -= middleOffset;
|
682
|
+
}
|
683
|
+
container.scrollTop(newScrollTop);
|
684
|
+
} else if (elementBottom > containerBottom) {
|
685
|
+
// scroll down
|
686
|
+
if (middle) {
|
687
|
+
newScrollTop += middleOffset;
|
688
|
+
}
|
689
|
+
var heightDifference = containerHeight - elementHeight;
|
690
|
+
container.scrollTop(newScrollTop - heightDifference);
|
691
|
+
}
|
692
|
+
},
|
693
|
+
// replace any existing dial code with the new one
|
694
|
+
// currently this is only called from _selectListItem
|
695
|
+
_updateDialCode: function(newDialCode) {
|
696
|
+
var inputVal = this.telInput.val(), prevDialCode = this._getDialCode(inputVal), newNumber;
|
697
|
+
// if the previous number contained a valid dial code, replace it
|
698
|
+
// (if more than just a plus character)
|
699
|
+
if (prevDialCode.length > 1) {
|
700
|
+
newNumber = inputVal.replace(prevDialCode, newDialCode);
|
701
|
+
} else {
|
702
|
+
// if the previous number didn't contain a dial code, we should persist it
|
703
|
+
var existingNumber = inputVal && inputVal.substr(0, 1) != "+" ? $.trim(inputVal) : "";
|
704
|
+
newNumber = newDialCode + existingNumber;
|
705
|
+
}
|
706
|
+
this._updateVal(newNumber, true);
|
707
|
+
},
|
708
|
+
// try and extract a valid international dial code from a full telephone number
|
709
|
+
// Note: returns the raw string inc plus character and any whitespace/dots etc
|
710
|
+
_getDialCode: function(number) {
|
711
|
+
var dialCode = "";
|
712
|
+
// only interested in international numbers (starting with a plus)
|
713
|
+
if (number.charAt(0) == "+") {
|
714
|
+
var numericChars = "";
|
715
|
+
// iterate over chars
|
716
|
+
for (var i = 0; i < number.length; i++) {
|
717
|
+
var c = number.charAt(i);
|
718
|
+
// if char is number
|
719
|
+
if ($.isNumeric(c)) {
|
720
|
+
numericChars += c;
|
721
|
+
// if current numericChars make a valid dial code
|
722
|
+
if (this.countryCodes[numericChars]) {
|
723
|
+
// store the actual raw string (useful for matching later)
|
724
|
+
dialCode = number.substring(0, i + 1);
|
725
|
+
}
|
726
|
+
// longest dial code is 4 chars
|
727
|
+
if (numericChars.length == 4) {
|
728
|
+
break;
|
729
|
+
}
|
730
|
+
}
|
731
|
+
}
|
732
|
+
}
|
733
|
+
return dialCode;
|
734
|
+
},
|
735
|
+
/********************
|
736
|
+
* PUBLIC METHODS
|
737
|
+
********************/
|
738
|
+
// remove plugin
|
739
|
+
destroy: function() {
|
740
|
+
// make sure the dropdown is closed (and unbind listeners)
|
741
|
+
this._closeDropdown();
|
742
|
+
// key events, and focus/blur events if autoHideDialCode=true
|
743
|
+
this.telInput.off(this.ns);
|
744
|
+
// click event to open dropdown
|
745
|
+
this.selectedFlagInner.parent().off(this.ns);
|
746
|
+
// label click hack
|
747
|
+
this.telInput.closest("label").off(this.ns);
|
748
|
+
// remove markup
|
749
|
+
var container = this.telInput.parent();
|
750
|
+
container.before(this.telInput).remove();
|
751
|
+
},
|
752
|
+
// format the number to E164
|
753
|
+
getCleanNumber: function() {
|
754
|
+
if (window.intlTelInputUtils) {
|
755
|
+
return intlTelInputUtils.formatNumberE164(this.telInput.val(), this.selectedCountryData.iso2);
|
756
|
+
}
|
757
|
+
return "";
|
758
|
+
},
|
759
|
+
// get the type of the entered number e.g. landline/mobile
|
760
|
+
getNumberType: function() {
|
761
|
+
if (window.intlTelInputUtils) {
|
762
|
+
return intlTelInputUtils.getNumberType(this.telInput.val(), this.selectedCountryData.iso2);
|
763
|
+
}
|
764
|
+
return -99;
|
765
|
+
},
|
766
|
+
// get the country data for the currently selected flag
|
767
|
+
getSelectedCountryData: function() {
|
768
|
+
// if this is undefined, the plugin will return it's instance instead, so in that case an empty object makes more sense
|
769
|
+
return this.selectedCountryData || {};
|
770
|
+
},
|
771
|
+
// get the validation error
|
772
|
+
getValidationError: function() {
|
773
|
+
if (window.intlTelInputUtils) {
|
774
|
+
return intlTelInputUtils.getValidationError(this.telInput.val(), this.selectedCountryData.iso2);
|
775
|
+
}
|
776
|
+
return -99;
|
777
|
+
},
|
778
|
+
// validate the input val - assumes the global function isValidNumber (from utilsScript)
|
779
|
+
isValidNumber: function() {
|
780
|
+
var val = $.trim(this.telInput.val()), countryCode = this.options.nationalMode ? this.selectedCountryData.iso2 : "", // libphonenumber allows alpha chars, but in order to allow that, we'd need a method to retrieve the processed number, with letters replaced with numbers
|
781
|
+
containsAlpha = /[a-zA-Z]/.test(val);
|
782
|
+
return Boolean(!containsAlpha && window.intlTelInputUtils && intlTelInputUtils.isValidNumber(val, countryCode));
|
783
|
+
},
|
784
|
+
// load the utils script
|
785
|
+
loadUtils: function(path) {
|
786
|
+
var utilsScript = path || this.options.utilsScript;
|
787
|
+
if (!$.fn[pluginName].loadedUtilsScript && utilsScript) {
|
788
|
+
// don't do this twice! (dont just check if the global intlTelInputUtils exists as if init plugin multiple times in quick succession, it may not have finished loading yet)
|
789
|
+
$.fn[pluginName].loadedUtilsScript = true;
|
790
|
+
// dont use $.getScript as it prevents caching
|
791
|
+
$.ajax({
|
792
|
+
url: utilsScript,
|
793
|
+
success: function() {
|
794
|
+
// tell all instances the utils are ready
|
795
|
+
$(".intl-tel-input input").intlTelInput("utilsLoaded");
|
796
|
+
},
|
797
|
+
dataType: "script",
|
798
|
+
cache: true
|
799
|
+
});
|
800
|
+
}
|
801
|
+
},
|
802
|
+
// update the selected flag, and update the input val accordingly
|
803
|
+
selectCountry: function(countryCode) {
|
804
|
+
// check if already selected
|
805
|
+
if (!this.selectedFlagInner.hasClass(countryCode)) {
|
806
|
+
this._selectFlag(countryCode);
|
807
|
+
var val = this.telInput.val();
|
808
|
+
if (val) {
|
809
|
+
if (this.options.nationalMode) {
|
810
|
+
// reformat
|
811
|
+
this._updateVal(val);
|
812
|
+
} else if (val) {
|
813
|
+
// update DC and reformat
|
814
|
+
this._updateDialCode("+" + this.selectedCountryData.dialCode);
|
815
|
+
}
|
816
|
+
} else {
|
817
|
+
// insert DC (this will check !nationalMode and !autoHideDialCode)
|
818
|
+
this._resetToDialCode(this.selectedCountryData.dialCode);
|
819
|
+
}
|
820
|
+
}
|
821
|
+
},
|
822
|
+
// set the input value and update the flag
|
823
|
+
setNumber: function(number, addSuffix) {
|
824
|
+
// ensure starts with plus
|
825
|
+
if (!this.options.nationalMode && number.substr(0, 1) != "+") {
|
826
|
+
number = "+" + number;
|
827
|
+
}
|
828
|
+
// we must update the flag first, which updates this.selectedCountryData, which is used later for formatting the number before displaying it
|
829
|
+
this._updateFlagFromNumber(number);
|
830
|
+
this._updateVal(number, addSuffix);
|
831
|
+
},
|
832
|
+
// this is called when the utils are ready
|
833
|
+
utilsLoaded: function() {
|
834
|
+
// if autoFormat is enabled and there's an initial value in the input, then format it
|
835
|
+
if (this.options.autoFormat && this.telInput.val()) {
|
836
|
+
this._updateVal(this.telInput.val());
|
837
|
+
}
|
838
|
+
this._updatePlaceholder();
|
839
|
+
}
|
840
|
+
};
|
841
|
+
// adapted to allow public functions
|
842
|
+
// using https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/Extending-jQuery-Boilerplate
|
843
|
+
$.fn[pluginName] = function(options) {
|
844
|
+
var args = arguments;
|
845
|
+
// Is the first parameter an object (options), or was omitted,
|
846
|
+
// instantiate a new instance of the plugin.
|
847
|
+
if (options === undefined || typeof options === "object") {
|
848
|
+
return this.each(function() {
|
849
|
+
if (!$.data(this, "plugin_" + pluginName)) {
|
850
|
+
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
|
851
|
+
}
|
852
|
+
});
|
853
|
+
} else if (typeof options === "string" && options[0] !== "_" && options !== "init") {
|
854
|
+
// If the first parameter is a string and it doesn't start
|
855
|
+
// with an underscore or "contains" the `init`-function,
|
856
|
+
// treat this as a call to a public method.
|
857
|
+
// Cache the method call to make it possible to return a value
|
858
|
+
var returns;
|
859
|
+
this.each(function() {
|
860
|
+
var instance = $.data(this, "plugin_" + pluginName);
|
861
|
+
// Tests that there's already a plugin-instance
|
862
|
+
// and checks that the requested public method exists
|
863
|
+
if (instance instanceof Plugin && typeof instance[options] === "function") {
|
864
|
+
// Call the method of our plugin instance,
|
865
|
+
// and pass it the supplied arguments.
|
866
|
+
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
867
|
+
}
|
868
|
+
// Allow instances to be destroyed via the 'destroy' method
|
869
|
+
if (options === "destroy") {
|
870
|
+
$.data(this, "plugin_" + pluginName, null);
|
871
|
+
}
|
872
|
+
});
|
873
|
+
// If the earlier cached method gives a value back return the value,
|
874
|
+
// otherwise return this to preserve chainability.
|
875
|
+
return returns !== undefined ? returns : this;
|
876
|
+
}
|
877
|
+
};
|
878
|
+
/********************
|
879
|
+
* STATIC METHODS
|
880
|
+
********************/
|
881
|
+
// get the country data object
|
882
|
+
$.fn[pluginName].getCountryData = function() {
|
883
|
+
return allCountries;
|
884
|
+
};
|
885
|
+
// set the country data object
|
886
|
+
$.fn[pluginName].setCountryData = function(obj) {
|
887
|
+
allCountries = obj;
|
888
|
+
};
|
889
|
+
// Tell JSHint to ignore this warning: "character may get silently deleted by one or more browsers"
|
890
|
+
// jshint -W100
|
891
|
+
// Array of country objects for the flag dropdown.
|
892
|
+
// Each contains a name, country code (ISO 3166-1 alpha-2) and dial code.
|
893
|
+
// Originally from https://github.com/mledoze/countries
|
894
|
+
// then modified using the following JavaScript (NOW OUT OF DATE):
|
895
|
+
/*
|
896
|
+
var result = [];
|
897
|
+
_.each(countries, function(c) {
|
898
|
+
// ignore countries without a dial code
|
899
|
+
if (c.callingCode[0].length) {
|
900
|
+
result.push({
|
901
|
+
// var locals contains country names with localised versions in brackets
|
902
|
+
n: _.findWhere(locals, {
|
903
|
+
countryCode: c.cca2
|
904
|
+
}).name,
|
905
|
+
i: c.cca2.toLowerCase(),
|
906
|
+
d: c.callingCode[0]
|
907
|
+
});
|
908
|
+
}
|
909
|
+
});
|
910
|
+
JSON.stringify(result);
|
911
|
+
*/
|
912
|
+
// then with a couple of manual re-arrangements to be alphabetical
|
913
|
+
// then changed Kazakhstan from +76 to +7
|
914
|
+
// and Vatican City from +379 to +39 (see issue 50)
|
915
|
+
// and Caribean Netherlands from +5997 to +599
|
916
|
+
// and Curacao from +5999 to +599
|
917
|
+
// Removed: Åland Islands, Christmas Island, Cocos Islands, Guernsey, Isle of Man, Jersey, Kosovo, Mayotte, Pitcairn Islands, South Georgia, Svalbard, Western Sahara
|
918
|
+
// Update: converted objects to arrays to save bytes!
|
919
|
+
// Update: added "priority" for countries with the same dialCode as others
|
920
|
+
// Update: added array of area codes for countries with the same dialCode as others
|
921
|
+
// So each country array has the following information:
|
922
|
+
// [
|
923
|
+
// Country name,
|
924
|
+
// iso2 code,
|
925
|
+
// International dial code,
|
926
|
+
// Order (if >1 country with same dial code),
|
927
|
+
// Area codes (if >1 country with same dial code)
|
928
|
+
// ]
|
929
|
+
var allCountries = [ [ "Afghanistan (افغانستان)", "af", "93" ], [ "Albania (Shqipëri)", "al", "355" ], [ "Algeria (الجزائر)", "dz", "213" ], [ "American Samoa", "as", "1684" ], [ "Andorra", "ad", "376" ], [ "Angola", "ao", "244" ], [ "Anguilla", "ai", "1264" ], [ "Antigua and Barbuda", "ag", "1268" ], [ "Argentina", "ar", "54" ], [ "Armenia (Հայաստան)", "am", "374" ], [ "Aruba", "aw", "297" ], [ "Australia", "au", "61" ], [ "Austria (Österreich)", "at", "43" ], [ "Azerbaijan (Azərbaycan)", "az", "994" ], [ "Bahamas", "bs", "1242" ], [ "Bahrain (البحرين)", "bh", "973" ], [ "Bangladesh (বাংলাদেশ)", "bd", "880" ], [ "Barbados", "bb", "1246" ], [ "Belarus (Беларусь)", "by", "375" ], [ "Belgium (België)", "be", "32" ], [ "Belize", "bz", "501" ], [ "Benin (Bénin)", "bj", "229" ], [ "Bermuda", "bm", "1441" ], [ "Bhutan (འབྲུག)", "bt", "975" ], [ "Bolivia", "bo", "591" ], [ "Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387" ], [ "Botswana", "bw", "267" ], [ "Brazil (Brasil)", "br", "55" ], [ "British Indian Ocean Territory", "io", "246" ], [ "British Virgin Islands", "vg", "1284" ], [ "Brunei", "bn", "673" ], [ "Bulgaria (България)", "bg", "359" ], [ "Burkina Faso", "bf", "226" ], [ "Burundi (Uburundi)", "bi", "257" ], [ "Cambodia (កម្ពុជា)", "kh", "855" ], [ "Cameroon (Cameroun)", "cm", "237" ], [ "Canada", "ca", "1", 1, [ "204", "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" ] ], [ "Cape Verde (Kabu Verdi)", "cv", "238" ], [ "Caribbean Netherlands", "bq", "599", 1 ], [ "Cayman Islands", "ky", "1345" ], [ "Central African Republic (République centrafricaine)", "cf", "236" ], [ "Chad (Tchad)", "td", "235" ], [ "Chile", "cl", "56" ], [ "China (中国)", "cn", "86" ], [ "Colombia", "co", "57" ], [ "Comoros (جزر القمر)", "km", "269" ], [ "Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243" ], [ "Congo (Republic) (Congo-Brazzaville)", "cg", "242" ], [ "Cook Islands", "ck", "682" ], [ "Costa Rica", "cr", "506" ], [ "Côte d’Ivoire", "ci", "225" ], [ "Croatia (Hrvatska)", "hr", "385" ], [ "Cuba", "cu", "53" ], [ "Curaçao", "cw", "599", 0 ], [ "Cyprus (Κύπρος)", "cy", "357" ], [ "Czech Republic (Česká republika)", "cz", "420" ], [ "Denmark (Danmark)", "dk", "45" ], [ "Djibouti", "dj", "253" ], [ "Dominica", "dm", "1767" ], [ "Dominican Republic (República Dominicana)", "do", "1", 2, [ "809", "829", "849" ] ], [ "Ecuador", "ec", "593" ], [ "Egypt (مصر)", "eg", "20" ], [ "El Salvador", "sv", "503" ], [ "Equatorial Guinea (Guinea Ecuatorial)", "gq", "240" ], [ "Eritrea", "er", "291" ], [ "Estonia (Eesti)", "ee", "372" ], [ "Ethiopia", "et", "251" ], [ "Falkland Islands (Islas Malvinas)", "fk", "500" ], [ "Faroe Islands (Føroyar)", "fo", "298" ], [ "Fiji", "fj", "679" ], [ "Finland (Suomi)", "fi", "358" ], [ "France", "fr", "33" ], [ "French Guiana (Guyane française)", "gf", "594" ], [ "French Polynesia (Polynésie française)", "pf", "689" ], [ "Gabon", "ga", "241" ], [ "Gambia", "gm", "220" ], [ "Georgia (საქართველო)", "ge", "995" ], [ "Germany (Deutschland)", "de", "49" ], [ "Ghana (Gaana)", "gh", "233" ], [ "Gibraltar", "gi", "350" ], [ "Greece (Ελλάδα)", "gr", "30" ], [ "Greenland (Kalaallit Nunaat)", "gl", "299" ], [ "Grenada", "gd", "1473" ], [ "Guadeloupe", "gp", "590", 0 ], [ "Guam", "gu", "1671" ], [ "Guatemala", "gt", "502" ], [ "Guinea (Guinée)", "gn", "224" ], [ "Guinea-Bissau (Guiné Bissau)", "gw", "245" ], [ "Guyana", "gy", "592" ], [ "Haiti", "ht", "509" ], [ "Honduras", "hn", "504" ], [ "Hong Kong (香港)", "hk", "852" ], [ "Hungary (Magyarország)", "hu", "36" ], [ "Iceland (Ísland)", "is", "354" ], [ "India (भारत)", "in", "91" ], [ "Indonesia", "id", "62" ], [ "Iran (ایران)", "ir", "98" ], [ "Iraq (العراق)", "iq", "964" ], [ "Ireland", "ie", "353" ], [ "Israel (ישראל)", "il", "972" ], [ "Italy (Italia)", "it", "39", 0 ], [ "Jamaica", "jm", "1876" ], [ "Japan (日本)", "jp", "81" ], [ "Jordan (الأردن)", "jo", "962" ], [ "Kazakhstan (Казахстан)", "kz", "7", 1 ], [ "Kenya", "ke", "254" ], [ "Kiribati", "ki", "686" ], [ "Kuwait (الكويت)", "kw", "965" ], [ "Kyrgyzstan (Кыргызстан)", "kg", "996" ], [ "Laos (ລາວ)", "la", "856" ], [ "Latvia (Latvija)", "lv", "371" ], [ "Lebanon (لبنان)", "lb", "961" ], [ "Lesotho", "ls", "266" ], [ "Liberia", "lr", "231" ], [ "Libya (ليبيا)", "ly", "218" ], [ "Liechtenstein", "li", "423" ], [ "Lithuania (Lietuva)", "lt", "370" ], [ "Luxembourg", "lu", "352" ], [ "Macau (澳門)", "mo", "853" ], [ "Macedonia (FYROM) (Македонија)", "mk", "389" ], [ "Madagascar (Madagasikara)", "mg", "261" ], [ "Malawi", "mw", "265" ], [ "Malaysia", "my", "60" ], [ "Maldives", "mv", "960" ], [ "Mali", "ml", "223" ], [ "Malta", "mt", "356" ], [ "Marshall Islands", "mh", "692" ], [ "Martinique", "mq", "596" ], [ "Mauritania (موريتانيا)", "mr", "222" ], [ "Mauritius (Moris)", "mu", "230" ], [ "Mexico (México)", "mx", "52" ], [ "Micronesia", "fm", "691" ], [ "Moldova (Republica Moldova)", "md", "373" ], [ "Monaco", "mc", "377" ], [ "Mongolia (Монгол)", "mn", "976" ], [ "Montenegro (Crna Gora)", "me", "382" ], [ "Montserrat", "ms", "1664" ], [ "Morocco (المغرب)", "ma", "212" ], [ "Mozambique (Moçambique)", "mz", "258" ], [ "Myanmar (Burma) (မြန်မာ)", "mm", "95" ], [ "Namibia (Namibië)", "na", "264" ], [ "Nauru", "nr", "674" ], [ "Nepal (नेपाल)", "np", "977" ], [ "Netherlands (Nederland)", "nl", "31" ], [ "New Caledonia (Nouvelle-Calédonie)", "nc", "687" ], [ "New Zealand", "nz", "64" ], [ "Nicaragua", "ni", "505" ], [ "Niger (Nijar)", "ne", "227" ], [ "Nigeria", "ng", "234" ], [ "Niue", "nu", "683" ], [ "Norfolk Island", "nf", "672" ], [ "North Korea (조선 민주주의 인민 공화국)", "kp", "850" ], [ "Northern Mariana Islands", "mp", "1670" ], [ "Norway (Norge)", "no", "47" ], [ "Oman (عُمان)", "om", "968" ], [ "Pakistan (پاکستان)", "pk", "92" ], [ "Palau", "pw", "680" ], [ "Palestine (فلسطين)", "ps", "970" ], [ "Panama (Panamá)", "pa", "507" ], [ "Papua New Guinea", "pg", "675" ], [ "Paraguay", "py", "595" ], [ "Peru (Perú)", "pe", "51" ], [ "Philippines", "ph", "63" ], [ "Poland (Polska)", "pl", "48" ], [ "Portugal", "pt", "351" ], [ "Puerto Rico", "pr", "1", 3, [ "787", "939" ] ], [ "Qatar (قطر)", "qa", "974" ], [ "Réunion (La Réunion)", "re", "262" ], [ "Romania (România)", "ro", "40" ], [ "Russia (Россия)", "ru", "7", 0 ], [ "Rwanda", "rw", "250" ], [ "Saint Barthélemy (Saint-Barthélemy)", "bl", "590", 1 ], [ "Saint Helena", "sh", "290" ], [ "Saint Kitts and Nevis", "kn", "1869" ], [ "Saint Lucia", "lc", "1758" ], [ "Saint Martin (Saint-Martin (partie française))", "mf", "590", 2 ], [ "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508" ], [ "Saint Vincent and the Grenadines", "vc", "1784" ], [ "Samoa", "ws", "685" ], [ "San Marino", "sm", "378" ], [ "São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239" ], [ "Saudi Arabia (المملكة العربية السعودية)", "sa", "966" ], [ "Senegal (Sénégal)", "sn", "221" ], [ "Serbia (Србија)", "rs", "381" ], [ "Seychelles", "sc", "248" ], [ "Sierra Leone", "sl", "232" ], [ "Singapore", "sg", "65" ], [ "Sint Maarten", "sx", "1721" ], [ "Slovakia (Slovensko)", "sk", "421" ], [ "Slovenia (Slovenija)", "si", "386" ], [ "Solomon Islands", "sb", "677" ], [ "Somalia (Soomaaliya)", "so", "252" ], [ "South Africa", "za", "27" ], [ "South Korea (대한민국)", "kr", "82" ], [ "South Sudan (جنوب السودان)", "ss", "211" ], [ "Spain (España)", "es", "34" ], [ "Sri Lanka (ශ්රී ලංකාව)", "lk", "94" ], [ "Sudan (السودان)", "sd", "249" ], [ "Suriname", "sr", "597" ], [ "Swaziland", "sz", "268" ], [ "Sweden (Sverige)", "se", "46" ], [ "Switzerland (Schweiz)", "ch", "41" ], [ "Syria (سوريا)", "sy", "963" ], [ "Taiwan (台灣)", "tw", "886" ], [ "Tajikistan", "tj", "992" ], [ "Tanzania", "tz", "255" ], [ "Thailand (ไทย)", "th", "66" ], [ "Timor-Leste", "tl", "670" ], [ "Togo", "tg", "228" ], [ "Tokelau", "tk", "690" ], [ "Tonga", "to", "676" ], [ "Trinidad and Tobago", "tt", "1868" ], [ "Tunisia (تونس)", "tn", "216" ], [ "Turkey (Türkiye)", "tr", "90" ], [ "Turkmenistan", "tm", "993" ], [ "Turks and Caicos Islands", "tc", "1649" ], [ "Tuvalu", "tv", "688" ], [ "U.S. Virgin Islands", "vi", "1340" ], [ "Uganda", "ug", "256" ], [ "Ukraine (Україна)", "ua", "380" ], [ "United Arab Emirates (الإمارات العربية المتحدة)", "ae", "971" ], [ "United Kingdom", "gb", "44" ], [ "United States", "us", "1", 0 ], [ "Uruguay", "uy", "598" ], [ "Uzbekistan (Oʻzbekiston)", "uz", "998" ], [ "Vanuatu", "vu", "678" ], [ "Vatican City (Città del Vaticano)", "va", "39", 1 ], [ "Venezuela", "ve", "58" ], [ "Vietnam (Việt Nam)", "vn", "84" ], [ "Wallis and Futuna", "wf", "681" ], [ "Yemen (اليمن)", "ye", "967" ], [ "Zambia", "zm", "260" ], [ "Zimbabwe", "zw", "263" ] ];
|
930
|
+
// loop over all of the countries above
|
931
|
+
for (var i = 0; i < allCountries.length; i++) {
|
932
|
+
var c = allCountries[i];
|
933
|
+
allCountries[i] = {
|
934
|
+
name: c[0],
|
935
|
+
iso2: c[1],
|
936
|
+
dialCode: c[2],
|
937
|
+
priority: c[3] || 0,
|
938
|
+
areaCodes: c[4] || null
|
939
|
+
};
|
940
|
+
}
|
941
|
+
});
|