intl-tel-input 18.1.0 → 18.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc +2 -8
- package/.github/CONTRIBUTING.md +1 -1
- package/.vscode/settings.json +7 -0
- package/CHANGELOG.md +3 -0
- package/Gruntfile.js +0 -2
- package/README.md +46 -35
- package/build/css/demo.css +16 -27
- package/build/css/intlTelInput.css +19 -9
- package/build/css/intlTelInput.min.css +1 -1
- package/build/js/data.js +2 -2
- package/build/js/data.min.js +2 -2
- package/build/js/intlTelInput-jquery.js +161 -60
- package/build/js/intlTelInput-jquery.min.js +3 -3
- package/build/js/intlTelInput.js +161 -60
- package/build/js/intlTelInput.min.js +3 -3
- package/composer.json +1 -1
- package/demo.html +42 -44
- package/demo_rtl.html +21 -23
- package/grunt/template.js +2 -265
- package/package.json +5 -2
- package/src/css/demo.scss +13 -29
- package/src/css/intlTelInput.scss +21 -21
- package/src/js/data.js +1 -1
- package/src/js/intlTelInput.js +563 -333
- package/examples/css/countrySync.css +0 -10
- package/examples/css/isValidNumber.css +0 -12
- package/examples/css/prism.css +0 -126
- package/examples/gen/country-sync.html +0 -98
- package/examples/gen/default-country-ip.html +0 -62
- package/examples/gen/display-number.html +0 -47
- package/examples/gen/hidden-input.html +0 -54
- package/examples/gen/init-promise.html +0 -66
- package/examples/gen/is-valid-number.html +0 -86
- package/examples/gen/js/countrySync.js +0 -31
- package/examples/gen/js/defaultCountryIp.js +0 -11
- package/examples/gen/js/displayNumber.js +0 -4
- package/examples/gen/js/hiddenInput.js +0 -5
- package/examples/gen/js/initPromise.js +0 -9
- package/examples/gen/js/isValidNumber.js +0 -37
- package/examples/gen/js/modifyCountryData.js +0 -11
- package/examples/gen/js/multipleInstances.js +0 -13
- package/examples/gen/js/nationalMode.js +0 -18
- package/examples/gen/js/onlyCountriesEurope.js +0 -8
- package/examples/gen/modify-country-data.html +0 -52
- package/examples/gen/multiple-instances.html +0 -60
- package/examples/gen/national-mode.html +0 -63
- package/examples/gen/only-countries-europe.html +0 -49
- package/examples/js/countrySync.js.ejs +0 -31
- package/examples/js/defaultCountryIp.js.ejs +0 -11
- package/examples/js/displayNumber.js.ejs +0 -4
- package/examples/js/hiddenInput.js.ejs +0 -5
- package/examples/js/initPromise.js.ejs +0 -9
- package/examples/js/isValidNumber.js.ejs +0 -37
- package/examples/js/modifyCountryData.js.ejs +0 -11
- package/examples/js/multipleInstances.js.ejs +0 -13
- package/examples/js/nationalMode.js.ejs +0 -18
- package/examples/js/onlyCountriesEurope.js.ejs +0 -8
- package/examples/js/prism.js +0 -11
- package/examples/partials/countrySync.html +0 -13
- package/examples/partials/defaultCountryIp.html +0 -5
- package/examples/partials/displayNumber.html +0 -1
- package/examples/partials/hiddenInput.html +0 -4
- package/examples/partials/initPromise.html +0 -8
- package/examples/partials/isValidNumber.html +0 -3
- package/examples/partials/multipleInstances.html +0 -3
- package/examples/partials/nationalMode.html +0 -2
- package/examples/partials/simpleInput.html +0 -1
- package/examples/template.html.ejs +0 -43
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
2
|
-
input = document.querySelector("#phone");
|
|
3
|
-
|
|
4
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
5
|
-
var country = countryData[i];
|
|
6
|
-
country.name = country.name.replace(/.+\((.+)\)/,"$1");
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
window.intlTelInput(input, {
|
|
10
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
11
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
var inputHome = document.querySelector("#home");
|
|
2
|
-
var inputMobile = document.querySelector("#mobile");
|
|
3
|
-
|
|
4
|
-
window.intlTelInput(inputHome, {
|
|
5
|
-
initialCountry: 'gb',
|
|
6
|
-
placeholderNumberType: 'FIXED_LINE',
|
|
7
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
8
|
-
});
|
|
9
|
-
window.intlTelInput(inputMobile, {
|
|
10
|
-
initialCountry: 'gb',
|
|
11
|
-
placeholderNumberType: 'MOBILE',
|
|
12
|
-
utilsScript: "../../build/js/utils.js?1680993492797"
|
|
13
|
-
});
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone"),
|
|
2
|
-
output = document.querySelector("#output");
|
|
3
|
-
|
|
4
|
-
var iti = window.intlTelInput(input, {
|
|
5
|
-
nationalMode: true,
|
|
6
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
var handleChange = function() {
|
|
10
|
-
var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
|
|
11
|
-
var textNode = document.createTextNode(text);
|
|
12
|
-
output.innerHTML = "";
|
|
13
|
-
output.appendChild(textNode);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
// listen to "keyup", but also "change" to update when the user selects a country
|
|
17
|
-
input.addEventListener('change', handleChange);
|
|
18
|
-
input.addEventListener('keyup', handleChange);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
window.intlTelInput(input, {
|
|
3
|
-
onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk",
|
|
4
|
-
"ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
|
|
5
|
-
"li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
|
|
6
|
-
"ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
|
|
7
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
8
|
-
});
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Modify country data</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Modify country data</h1>
|
|
24
|
-
<p>Use static getCountryData method to update the data to only show localised country names.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><input id="phone" type="tel"></code></pre>
|
|
28
|
-
|
|
29
|
-
<h2>Code</h2>
|
|
30
|
-
<pre><code class="language-javascript">var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
31
|
-
input = document.querySelector("#phone");
|
|
32
|
-
|
|
33
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
34
|
-
var country = countryData[i];
|
|
35
|
-
country.name = country.name.replace(/.+\((.+)\)/,"$1");
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
window.intlTelInput(input, {
|
|
39
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
40
|
-
});
|
|
41
|
-
</code></pre>
|
|
42
|
-
|
|
43
|
-
<h2>Result</h2>
|
|
44
|
-
<div id="result">
|
|
45
|
-
<input id="phone" type="tel">
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<script src="../js/prism.js"></script>
|
|
49
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
50
|
-
<script src="./js/modifyCountryData.js?1680993492797"></script>
|
|
51
|
-
</body>
|
|
52
|
-
</html>
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Multiple Instances</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Multiple Instances</h1>
|
|
24
|
-
<p>Here you can see multiple instances of the plugin working alongside each other. I've set the placeholderNumberType differently for each instance to highlight that the instances are completely independent of each other.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup">Home: <input id="home" type="tel">
|
|
28
|
-
<br><br>
|
|
29
|
-
Mobile: <input id="mobile" type="tel">
|
|
30
|
-
</code></pre>
|
|
31
|
-
|
|
32
|
-
<h2>Code</h2>
|
|
33
|
-
<pre><code class="language-javascript">var inputHome = document.querySelector("#home");
|
|
34
|
-
var inputMobile = document.querySelector("#mobile");
|
|
35
|
-
|
|
36
|
-
window.intlTelInput(inputHome, {
|
|
37
|
-
initialCountry: 'gb',
|
|
38
|
-
placeholderNumberType: 'FIXED_LINE',
|
|
39
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
40
|
-
});
|
|
41
|
-
window.intlTelInput(inputMobile, {
|
|
42
|
-
initialCountry: 'gb',
|
|
43
|
-
placeholderNumberType: 'MOBILE',
|
|
44
|
-
utilsScript: "../../build/js/utils.js?1680993492797"
|
|
45
|
-
});
|
|
46
|
-
</code></pre>
|
|
47
|
-
|
|
48
|
-
<h2>Result</h2>
|
|
49
|
-
<div id="result">
|
|
50
|
-
Home: <input id="home" type="tel">
|
|
51
|
-
<br><br>
|
|
52
|
-
Mobile: <input id="mobile" type="tel">
|
|
53
|
-
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<script src="../js/prism.js"></script>
|
|
57
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
58
|
-
<script src="./js/multipleInstances.js?1680993492797"></script>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: National Mode</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: National Mode</h1>
|
|
24
|
-
<p>Allow users to enter their national number, and then convert it to international format using the public method getNumber.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><p id="output">Please enter a valid number below</p>
|
|
28
|
-
<input id="phone" type="tel">
|
|
29
|
-
</code></pre>
|
|
30
|
-
|
|
31
|
-
<h2>Code</h2>
|
|
32
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone"),
|
|
33
|
-
output = document.querySelector("#output");
|
|
34
|
-
|
|
35
|
-
var iti = window.intlTelInput(input, {
|
|
36
|
-
nationalMode: true,
|
|
37
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
var handleChange = function() {
|
|
41
|
-
var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
|
|
42
|
-
var textNode = document.createTextNode(text);
|
|
43
|
-
output.innerHTML = "";
|
|
44
|
-
output.appendChild(textNode);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
// listen to "keyup", but also "change" to update when the user selects a country
|
|
48
|
-
input.addEventListener('change', handleChange);
|
|
49
|
-
input.addEventListener('keyup', handleChange);
|
|
50
|
-
</code></pre>
|
|
51
|
-
|
|
52
|
-
<h2>Result</h2>
|
|
53
|
-
<div id="result">
|
|
54
|
-
<p id="output">Please enter a valid number below</p>
|
|
55
|
-
<input id="phone" type="tel">
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<script src="../js/prism.js"></script>
|
|
60
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
61
|
-
<script src="./js/nationalMode.js?1680993492797"></script>
|
|
62
|
-
</body>
|
|
63
|
-
</html>
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: Only countries option</title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?1680993492797">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?1680993492797">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
12
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
13
|
-
<script>
|
|
14
|
-
window.dataLayer = window.dataLayer || [];
|
|
15
|
-
function gtag(){dataLayer.push(arguments);}
|
|
16
|
-
gtag('js', new Date());
|
|
17
|
-
gtag('config', 'G-N472J4QKC4');
|
|
18
|
-
</script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body>
|
|
22
|
-
<a href="/">Back</a>
|
|
23
|
-
<h1>Example: Only countries option</h1>
|
|
24
|
-
<p>Set onlyCountries option to just European country codes.</p>
|
|
25
|
-
|
|
26
|
-
<h2>Markup</h2>
|
|
27
|
-
<pre><code class="language-markup"><input id="phone" type="tel"></code></pre>
|
|
28
|
-
|
|
29
|
-
<h2>Code</h2>
|
|
30
|
-
<pre><code class="language-javascript">var input = document.querySelector("#phone");
|
|
31
|
-
window.intlTelInput(input, {
|
|
32
|
-
onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk",
|
|
33
|
-
"ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
|
|
34
|
-
"li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
|
|
35
|
-
"ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
|
|
36
|
-
utilsScript: "../../build/js/utils.js?1680993492797" // just for formatting/placeholders etc
|
|
37
|
-
});
|
|
38
|
-
</code></pre>
|
|
39
|
-
|
|
40
|
-
<h2>Result</h2>
|
|
41
|
-
<div id="result">
|
|
42
|
-
<input id="phone" type="tel">
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
<script src="../js/prism.js"></script>
|
|
46
|
-
<script src="../../build/js/intlTelInput.js?1680993492797"></script>
|
|
47
|
-
<script src="./js/onlyCountriesEurope.js?1680993492797"></script>
|
|
48
|
-
</body>
|
|
49
|
-
</html>
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
// get the country data from the plugin
|
|
2
|
-
var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
3
|
-
input = document.querySelector("#phone"),
|
|
4
|
-
addressDropdown = document.querySelector("#address-country");
|
|
5
|
-
|
|
6
|
-
// init plugin
|
|
7
|
-
var iti = window.intlTelInput(input, {
|
|
8
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
// populate the country dropdown
|
|
12
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
13
|
-
var country = countryData[i];
|
|
14
|
-
var optionNode = document.createElement("option");
|
|
15
|
-
optionNode.value = country.iso2;
|
|
16
|
-
var textNode = document.createTextNode(country.name);
|
|
17
|
-
optionNode.appendChild(textNode);
|
|
18
|
-
addressDropdown.appendChild(optionNode);
|
|
19
|
-
}
|
|
20
|
-
// set it's initial value
|
|
21
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
22
|
-
|
|
23
|
-
// listen to the telephone input for changes
|
|
24
|
-
input.addEventListener('countrychange', function(e) {
|
|
25
|
-
addressDropdown.value = iti.getSelectedCountryData().iso2;
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// listen to the address dropdown for changes
|
|
29
|
-
addressDropdown.addEventListener('change', function() {
|
|
30
|
-
iti.setCountry(this.value);
|
|
31
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
window.intlTelInput(input, {
|
|
3
|
-
initialCountry: "auto",
|
|
4
|
-
geoIpLookup: function(callback) {
|
|
5
|
-
fetch("https://ipapi.co/json")
|
|
6
|
-
.then(function(res) { return res.json(); })
|
|
7
|
-
.then(function(data) { callback(data.country_code); })
|
|
8
|
-
.catch(function() { callback("us"); });
|
|
9
|
-
},
|
|
10
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
11
|
-
});
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
var statusElement = document.querySelector("#status");
|
|
3
|
-
|
|
4
|
-
var iti = window.intlTelInput(input, {
|
|
5
|
-
utilsScript: "../../build/js/utils.js?<%= time %>",
|
|
6
|
-
});
|
|
7
|
-
iti.promise.then(function() {
|
|
8
|
-
statusElement.innerHTML = "Initialised!";
|
|
9
|
-
});
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone"),
|
|
2
|
-
errorMsg = document.querySelector("#error-msg"),
|
|
3
|
-
validMsg = document.querySelector("#valid-msg");
|
|
4
|
-
|
|
5
|
-
// here, the index maps to the error code returned from getValidationError - see readme
|
|
6
|
-
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
|
|
7
|
-
|
|
8
|
-
// initialise plugin
|
|
9
|
-
var iti = window.intlTelInput(input, {
|
|
10
|
-
utilsScript: "../../build/js/utils.js?<%= time %>"
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
var reset = function() {
|
|
14
|
-
input.classList.remove("error");
|
|
15
|
-
errorMsg.innerHTML = "";
|
|
16
|
-
errorMsg.classList.add("hide");
|
|
17
|
-
validMsg.classList.add("hide");
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
// on blur: validate
|
|
21
|
-
input.addEventListener('blur', function() {
|
|
22
|
-
reset();
|
|
23
|
-
if (input.value.trim()) {
|
|
24
|
-
if (iti.isValidNumber()) {
|
|
25
|
-
validMsg.classList.remove("hide");
|
|
26
|
-
} else {
|
|
27
|
-
input.classList.add("error");
|
|
28
|
-
var errorCode = iti.getValidationError();
|
|
29
|
-
errorMsg.innerHTML = errorMap[errorCode];
|
|
30
|
-
errorMsg.classList.remove("hide");
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// on keyup / change flag: reset
|
|
36
|
-
input.addEventListener('change', reset);
|
|
37
|
-
input.addEventListener('keyup', reset);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var countryData = window.intlTelInputGlobals.getCountryData(),
|
|
2
|
-
input = document.querySelector("#phone");
|
|
3
|
-
|
|
4
|
-
for (var i = 0; i < countryData.length; i++) {
|
|
5
|
-
var country = countryData[i];
|
|
6
|
-
country.name = country.name.replace(/.+\((.+)\)/,"$1");
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
window.intlTelInput(input, {
|
|
10
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
11
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
var inputHome = document.querySelector("#home");
|
|
2
|
-
var inputMobile = document.querySelector("#mobile");
|
|
3
|
-
|
|
4
|
-
window.intlTelInput(inputHome, {
|
|
5
|
-
initialCountry: 'gb',
|
|
6
|
-
placeholderNumberType: 'FIXED_LINE',
|
|
7
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
8
|
-
});
|
|
9
|
-
window.intlTelInput(inputMobile, {
|
|
10
|
-
initialCountry: 'gb',
|
|
11
|
-
placeholderNumberType: 'MOBILE',
|
|
12
|
-
utilsScript: "../../build/js/utils.js?<%= time %>"
|
|
13
|
-
});
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone"),
|
|
2
|
-
output = document.querySelector("#output");
|
|
3
|
-
|
|
4
|
-
var iti = window.intlTelInput(input, {
|
|
5
|
-
nationalMode: true,
|
|
6
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
var handleChange = function() {
|
|
10
|
-
var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
|
|
11
|
-
var textNode = document.createTextNode(text);
|
|
12
|
-
output.innerHTML = "";
|
|
13
|
-
output.appendChild(textNode);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
// listen to "keyup", but also "change" to update when the user selects a country
|
|
17
|
-
input.addEventListener('change', handleChange);
|
|
18
|
-
input.addEventListener('keyup', handleChange);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
var input = document.querySelector("#phone");
|
|
2
|
-
window.intlTelInput(input, {
|
|
3
|
-
onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk",
|
|
4
|
-
"ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
|
|
5
|
-
"li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
|
|
6
|
-
"ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
|
|
7
|
-
utilsScript: "../../build/js/utils.js?<%= time %>" // just for formatting/placeholders etc
|
|
8
|
-
});
|
package/examples/js/prism.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Prism: Lightweight, robust, elegant syntax highlighting
|
|
3
|
-
* MIT license http://www.opensource.org/licenses/mit-license.php/
|
|
4
|
-
* @author Lea Verou http://lea.verou.me
|
|
5
|
-
*/(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
|
|
6
|
-
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
|
|
7
|
-
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
|
|
8
|
-
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
|
|
9
|
-
;
|
|
10
|
-
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
|
|
11
|
-
;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<div class="form-item">
|
|
2
|
-
<label>Telephone number</label>
|
|
3
|
-
<input id="phone" type="tel">
|
|
4
|
-
</div>
|
|
5
|
-
|
|
6
|
-
<div class="form-item">
|
|
7
|
-
<label>Address</label>
|
|
8
|
-
<input type="text" placeholder="House name/number">
|
|
9
|
-
<input type="text" placeholder="City">
|
|
10
|
-
<input type="text" placeholder="State">
|
|
11
|
-
<input type="text" placeholder="Zip code">
|
|
12
|
-
<select id="address-country"></select>
|
|
13
|
-
</div>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<input id="phone" type="tel" value="+447733312345">
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<input id="phone" type="tel">
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Example: <%= title %></title>
|
|
6
|
-
<link rel="stylesheet" href="../css/prism.css">
|
|
7
|
-
<link rel="stylesheet" href="../../build/css/intlTelInput.css?<%= time %>">
|
|
8
|
-
<link rel="stylesheet" href="../../build/css/demo.css?<%= time %>">
|
|
9
|
-
<% if (stylesheet) { %>
|
|
10
|
-
<link rel="stylesheet" href="../css/<%= stylesheet %>?<%= time %>">
|
|
11
|
-
<% } %>
|
|
12
|
-
|
|
13
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
14
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-N472J4QKC4"></script>
|
|
15
|
-
<script>
|
|
16
|
-
window.dataLayer = window.dataLayer || [];
|
|
17
|
-
function gtag(){dataLayer.push(arguments);}
|
|
18
|
-
gtag('js', new Date());
|
|
19
|
-
gtag('config', 'G-N472J4QKC4');
|
|
20
|
-
</script>
|
|
21
|
-
</head>
|
|
22
|
-
|
|
23
|
-
<body>
|
|
24
|
-
<a href="/">Back</a>
|
|
25
|
-
<h1>Example: <%= title %></h1>
|
|
26
|
-
<p><%= desc %></p>
|
|
27
|
-
|
|
28
|
-
<h2>Markup</h2>
|
|
29
|
-
<pre><code class="language-markup"><%- markup %></code></pre>
|
|
30
|
-
|
|
31
|
-
<h2>Code</h2>
|
|
32
|
-
<pre><code class="language-javascript"><%- code %></code></pre>
|
|
33
|
-
|
|
34
|
-
<h2>Result</h2>
|
|
35
|
-
<div id="result">
|
|
36
|
-
<%= markup %>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<script src="../js/prism.js"></script>
|
|
40
|
-
<script src="../../build/js/intlTelInput.js?<%= time %>"></script>
|
|
41
|
-
<script src="./js/<%= script %>?<%= time %>"></script>
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|