RealTimeAddress/index.html at master · M15sy/RealTimeAddress · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
	<head>
		<title>Real Time Address - sample code</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
		<link rel="stylesheet" type="text/css" href="dist/css/styles.min.css">
		<link rel="shortcut icon" href="/dist/images/favicon.ico">
	</head>
	<body>
		<div class="filter-primary overlay-dotted">
			<h1>Real Time Address</h1>
		</div>

		<form>
			<div class="loader loader-overlay hidden">
            	<div class="spinner"></div>
        	</div>

			<label for="country" class="toggle">Country</label>
			<select name="country" class="toggle">
				<option value="">Please select</option>
				<option value="aus">Australia</option>
				<option value="fra">France</option>
				<option value="nzl">New Zealand</option>
				<option value="gbr" selected>United Kingdom</option>
				<option value="usa">United States</option>
			</select>

			<label for="address-input" class="toggle">Address</label>
			<input type="text" name="address-input" class="toggle">
		</form>

		<script src="dist/js/contact-data-services.min.js"></script>
		<script>
			// Set the custom options
			var options = {
				elements: {
					input: document.querySelector("input[name='address-input']"),
					countryList: document.querySelector("select")
				}
			};

			// Initialise this instance
			var address = new ContactDataServices.address(options);

			// Show the spinner while we're searching for the formatted address
			address.events.on("pre-formatting-search", function(){
				document.querySelector(".loader").classList.remove("hidden");
			});

			// Hide the country and search input when a result is found
			address.events.on("post-formatting-search", function(){
				var searchInputs = document.querySelectorAll(".toggle");
				for (var i = 0; i < searchInputs.length; ++i) {
  					searchInputs[i].classList.add("hidden");
				}

				// Hide the spinner
				document.querySelector(".loader").classList.add("hidden");
			});

			// Show a message if the request is unauthorised (token is invalid)
			address.events.on("request-error-401", function(){
				ContactDataServices.ua.banner.show("<a href='https://github.com/experiandataquality/RealTimeAddress#tokens'>Please provide a valid token for RealTimeAddress.</a>");
			});
		</script>
	</body>
</html>