@ne1410s/address 0.0.3 → 0.0.4
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { CustomElementBase } from '@ne1410s/cust-elems';
|
|
2
|
-
export declare class AddressLookup extends CustomElementBase {
|
|
3
|
-
private static readonly Css;
|
|
4
|
-
private static readonly Html;
|
|
5
|
-
private addressCompleter;
|
|
6
|
-
constructor();
|
|
7
|
-
initialise(): void;
|
|
8
|
-
private onPlaceChanged;
|
|
9
|
-
private getMatchingFieldId;
|
|
10
|
-
}
|
|
1
|
+
import { CustomElementBase } from '@ne1410s/cust-elems';
|
|
2
|
+
export declare class AddressLookup extends CustomElementBase {
|
|
3
|
+
private static readonly Css;
|
|
4
|
+
private static readonly Html;
|
|
5
|
+
private addressCompleter;
|
|
6
|
+
constructor();
|
|
7
|
+
initialise(): void;
|
|
8
|
+
private onPlaceChanged;
|
|
9
|
+
private getMatchingFieldId;
|
|
10
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AddressLookup } from './address-lookup/address-lookup';
|
|
2
|
-
export { AddressLookup };
|
|
1
|
+
import { AddressLookup } from './address-lookup/address-lookup';
|
|
2
|
+
export { AddressLookup };
|
|
@@ -6,71 +6,71 @@ var markupUrl = "data:text/html;base64,PHNwYW4gY2xhc3M9InJvb3QiPg0KICA8Zm9ybSBhY
|
|
|
6
6
|
|
|
7
7
|
var stylesUrl = "data:text/css;base64,";
|
|
8
8
|
|
|
9
|
-
class AddressLookup extends custElems.CustomElementBase {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(AddressLookup.Css, AddressLookup.Html);
|
|
12
|
-
}
|
|
13
|
-
initialise() {
|
|
14
|
-
const searchBox = this.root.querySelector('#street');
|
|
15
|
-
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
16
|
-
componentRestrictions: { country: ['uk'] },
|
|
17
|
-
fields: ['address_components'],
|
|
18
|
-
types: ['address'],
|
|
19
|
-
});
|
|
20
|
-
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
21
|
-
}
|
|
22
|
-
onPlaceChanged() {
|
|
23
|
-
const place = this.addressCompleter.getPlace();
|
|
24
|
-
for (const component of place.address_components) {
|
|
25
|
-
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
26
|
-
if (inputFieldId) {
|
|
27
|
-
const input = document.querySelector(inputFieldId);
|
|
28
|
-
input.value = component.long_name;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
getMatchingFieldId(componentType) {
|
|
33
|
-
switch (componentType) {
|
|
34
|
-
case 'street_number':
|
|
35
|
-
return '#house-number';
|
|
36
|
-
case 'route':
|
|
37
|
-
return '#street';
|
|
38
|
-
case 'postal_code':
|
|
39
|
-
return '#postcode';
|
|
40
|
-
case 'locality':
|
|
41
|
-
return '#town';
|
|
42
|
-
case 'postal_town':
|
|
43
|
-
return '#town';
|
|
44
|
-
case 'administrative_area_level_2':
|
|
45
|
-
return '#county';
|
|
46
|
-
case 'country':
|
|
47
|
-
return '#country';
|
|
48
|
-
default:
|
|
49
|
-
return '';
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
AddressLookup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
|
|
9
|
+
class AddressLookup extends custElems.CustomElementBase {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(AddressLookup.Css, AddressLookup.Html);
|
|
12
|
+
}
|
|
13
|
+
initialise() {
|
|
14
|
+
const searchBox = this.root.querySelector('#street');
|
|
15
|
+
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
16
|
+
componentRestrictions: { country: ['uk'] },
|
|
17
|
+
fields: ['address_components'],
|
|
18
|
+
types: ['address'],
|
|
19
|
+
});
|
|
20
|
+
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
21
|
+
}
|
|
22
|
+
onPlaceChanged() {
|
|
23
|
+
const place = this.addressCompleter.getPlace();
|
|
24
|
+
for (const component of place.address_components) {
|
|
25
|
+
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
26
|
+
if (inputFieldId) {
|
|
27
|
+
const input = document.querySelector(inputFieldId);
|
|
28
|
+
input.value = component.long_name;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
getMatchingFieldId(componentType) {
|
|
33
|
+
switch (componentType) {
|
|
34
|
+
case 'street_number':
|
|
35
|
+
return '#house-number';
|
|
36
|
+
case 'route':
|
|
37
|
+
return '#street';
|
|
38
|
+
case 'postal_code':
|
|
39
|
+
return '#postcode';
|
|
40
|
+
case 'locality':
|
|
41
|
+
return '#town';
|
|
42
|
+
case 'postal_town':
|
|
43
|
+
return '#town';
|
|
44
|
+
case 'administrative_area_level_2':
|
|
45
|
+
return '#county';
|
|
46
|
+
case 'country':
|
|
47
|
+
return '#country';
|
|
48
|
+
default:
|
|
49
|
+
return '';
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
AddressLookup.Css = custElems.reduceCss(custElems.decode(stylesUrl));
|
|
54
54
|
AddressLookup.Html = custElems.reduceHtml(custElems.decode(markupUrl));
|
|
55
55
|
|
|
56
|
-
// If custom elements is supported
|
|
57
|
-
if ('customElements' in window) {
|
|
58
|
-
// If not already defined
|
|
59
|
-
if (!window.customElements.get('ne14-address')) {
|
|
60
|
-
window.customElements.define('ne14-address', AddressLookup);
|
|
61
|
-
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
62
|
-
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
63
|
-
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
64
|
-
const mapsScript = document.createElement('script');
|
|
65
|
-
mapsScript.setAttribute('async', '');
|
|
66
|
-
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
67
|
-
window[callback] = () => {
|
|
68
|
-
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
69
|
-
el.initialise();
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
|
-
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
73
|
-
}
|
|
56
|
+
// If custom elements is supported
|
|
57
|
+
if ('customElements' in window) {
|
|
58
|
+
// If not already defined
|
|
59
|
+
if (!window.customElements.get('ne14-address')) {
|
|
60
|
+
window.customElements.define('ne14-address', AddressLookup);
|
|
61
|
+
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
62
|
+
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
63
|
+
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
64
|
+
const mapsScript = document.createElement('script');
|
|
65
|
+
mapsScript.setAttribute('async', '');
|
|
66
|
+
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
67
|
+
window[callback] = () => {
|
|
68
|
+
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
69
|
+
el.initialise();
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
73
|
+
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
exports.AddressLookup = AddressLookup;
|
|
@@ -4,71 +4,71 @@ var markupUrl = "data:text/html;base64,PHNwYW4gY2xhc3M9InJvb3QiPg0KICA8Zm9ybSBhY
|
|
|
4
4
|
|
|
5
5
|
var stylesUrl = "data:text/css;base64,";
|
|
6
6
|
|
|
7
|
-
class AddressLookup extends CustomElementBase {
|
|
8
|
-
constructor() {
|
|
9
|
-
super(AddressLookup.Css, AddressLookup.Html);
|
|
10
|
-
}
|
|
11
|
-
initialise() {
|
|
12
|
-
const searchBox = this.root.querySelector('#street');
|
|
13
|
-
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
14
|
-
componentRestrictions: { country: ['uk'] },
|
|
15
|
-
fields: ['address_components'],
|
|
16
|
-
types: ['address'],
|
|
17
|
-
});
|
|
18
|
-
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
19
|
-
}
|
|
20
|
-
onPlaceChanged() {
|
|
21
|
-
const place = this.addressCompleter.getPlace();
|
|
22
|
-
for (const component of place.address_components) {
|
|
23
|
-
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
24
|
-
if (inputFieldId) {
|
|
25
|
-
const input = document.querySelector(inputFieldId);
|
|
26
|
-
input.value = component.long_name;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
getMatchingFieldId(componentType) {
|
|
31
|
-
switch (componentType) {
|
|
32
|
-
case 'street_number':
|
|
33
|
-
return '#house-number';
|
|
34
|
-
case 'route':
|
|
35
|
-
return '#street';
|
|
36
|
-
case 'postal_code':
|
|
37
|
-
return '#postcode';
|
|
38
|
-
case 'locality':
|
|
39
|
-
return '#town';
|
|
40
|
-
case 'postal_town':
|
|
41
|
-
return '#town';
|
|
42
|
-
case 'administrative_area_level_2':
|
|
43
|
-
return '#county';
|
|
44
|
-
case 'country':
|
|
45
|
-
return '#country';
|
|
46
|
-
default:
|
|
47
|
-
return '';
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
AddressLookup.Css = reduceCss(decode(stylesUrl));
|
|
7
|
+
class AddressLookup extends CustomElementBase {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(AddressLookup.Css, AddressLookup.Html);
|
|
10
|
+
}
|
|
11
|
+
initialise() {
|
|
12
|
+
const searchBox = this.root.querySelector('#street');
|
|
13
|
+
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
14
|
+
componentRestrictions: { country: ['uk'] },
|
|
15
|
+
fields: ['address_components'],
|
|
16
|
+
types: ['address'],
|
|
17
|
+
});
|
|
18
|
+
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
19
|
+
}
|
|
20
|
+
onPlaceChanged() {
|
|
21
|
+
const place = this.addressCompleter.getPlace();
|
|
22
|
+
for (const component of place.address_components) {
|
|
23
|
+
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
24
|
+
if (inputFieldId) {
|
|
25
|
+
const input = document.querySelector(inputFieldId);
|
|
26
|
+
input.value = component.long_name;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
getMatchingFieldId(componentType) {
|
|
31
|
+
switch (componentType) {
|
|
32
|
+
case 'street_number':
|
|
33
|
+
return '#house-number';
|
|
34
|
+
case 'route':
|
|
35
|
+
return '#street';
|
|
36
|
+
case 'postal_code':
|
|
37
|
+
return '#postcode';
|
|
38
|
+
case 'locality':
|
|
39
|
+
return '#town';
|
|
40
|
+
case 'postal_town':
|
|
41
|
+
return '#town';
|
|
42
|
+
case 'administrative_area_level_2':
|
|
43
|
+
return '#county';
|
|
44
|
+
case 'country':
|
|
45
|
+
return '#country';
|
|
46
|
+
default:
|
|
47
|
+
return '';
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
AddressLookup.Css = reduceCss(decode(stylesUrl));
|
|
52
52
|
AddressLookup.Html = reduceHtml(decode(markupUrl));
|
|
53
53
|
|
|
54
|
-
// If custom elements is supported
|
|
55
|
-
if ('customElements' in window) {
|
|
56
|
-
// If not already defined
|
|
57
|
-
if (!window.customElements.get('ne14-address')) {
|
|
58
|
-
window.customElements.define('ne14-address', AddressLookup);
|
|
59
|
-
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
60
|
-
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
61
|
-
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
62
|
-
const mapsScript = document.createElement('script');
|
|
63
|
-
mapsScript.setAttribute('async', '');
|
|
64
|
-
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
65
|
-
window[callback] = () => {
|
|
66
|
-
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
67
|
-
el.initialise();
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
71
|
-
}
|
|
54
|
+
// If custom elements is supported
|
|
55
|
+
if ('customElements' in window) {
|
|
56
|
+
// If not already defined
|
|
57
|
+
if (!window.customElements.get('ne14-address')) {
|
|
58
|
+
window.customElements.define('ne14-address', AddressLookup);
|
|
59
|
+
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
60
|
+
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
61
|
+
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
62
|
+
const mapsScript = document.createElement('script');
|
|
63
|
+
mapsScript.setAttribute('async', '');
|
|
64
|
+
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
65
|
+
window[callback] = () => {
|
|
66
|
+
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
67
|
+
el.initialise();
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
71
|
+
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
export { AddressLookup };
|
|
@@ -4,100 +4,100 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ne_address = {}));
|
|
5
5
|
})(this, (function (exports) { 'use strict';
|
|
6
6
|
|
|
7
|
-
class CustomElementBase extends HTMLElement {
|
|
8
|
-
constructor(css, html, mode = 'closed') {
|
|
9
|
-
super();
|
|
10
|
-
this.root = this.attachShadow({ mode });
|
|
11
|
-
this.root.innerHTML = html;
|
|
12
|
-
const style = document.createElement('style');
|
|
13
|
-
style.textContent = css;
|
|
14
|
-
this.root.appendChild(style);
|
|
15
|
-
}
|
|
7
|
+
class CustomElementBase extends HTMLElement {
|
|
8
|
+
constructor(css, html, mode = 'closed') {
|
|
9
|
+
super();
|
|
10
|
+
this.root = this.attachShadow({ mode });
|
|
11
|
+
this.root.innerHTML = html;
|
|
12
|
+
const style = document.createElement('style');
|
|
13
|
+
style.textContent = css;
|
|
14
|
+
this.root.appendChild(style);
|
|
15
|
+
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
function decode(b64) {
|
|
19
|
-
const bIndex = (b64 + '').indexOf('base64,');
|
|
20
|
-
return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
|
|
21
|
-
}
|
|
22
|
-
function reduceCss(cssIn) {
|
|
23
|
-
return cssIn
|
|
24
|
-
.replace(/\s+/g, ' ')
|
|
25
|
-
.replace(/([,{}:;])\s/g, '$1')
|
|
26
|
-
.replace(/\s([{])/g, '$1');
|
|
27
|
-
}
|
|
28
|
-
function reduceHtml(htmlIn) {
|
|
29
|
-
return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
|
|
18
|
+
function decode(b64) {
|
|
19
|
+
const bIndex = (b64 + '').indexOf('base64,');
|
|
20
|
+
return bIndex === -1 ? b64 : window.atob(b64.substring(bIndex + 7));
|
|
21
|
+
}
|
|
22
|
+
function reduceCss(cssIn) {
|
|
23
|
+
return cssIn
|
|
24
|
+
.replace(/\s+/g, ' ')
|
|
25
|
+
.replace(/([,{}:;])\s/g, '$1')
|
|
26
|
+
.replace(/\s([{])/g, '$1');
|
|
27
|
+
}
|
|
28
|
+
function reduceHtml(htmlIn) {
|
|
29
|
+
return htmlIn.replace(/\s+/g, ' ').replace(/(^|>)\s+(<|$)/g, '$1$2');
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
var markupUrl = "data:text/html;base64,PHNwYW4gY2xhc3M9InJvb3QiPg0KICA8Zm9ybSBhY3Rpb249IiIgbWV0aG9kPSJnZXQiIGF1dG9jb21wbGV0ZT0ib2ZmIj4NCiAgICA8bGFiZWwgY2xhc3M9InN1cGVyLXNsaW0tZmllbGQtbGVmdCI+DQogICAgICA8c3BhbiBjbGFzcz0iZm9ybS1sYWJlbCI+Tm8uKjwvc3Bhbj4NCiAgICAgIDxpbnB1dCBpZD0iaG91c2UtbnVtYmVyIiBuYW1lPSJob3VzZS1udW1iZXIiIHJlcXVpcmVkIC8+DQogICAgPC9sYWJlbD4NCiAgICA8bGFiZWwgY2xhc3M9ImZpZWxkLXJpZ2h0Ij4NCiAgICAgIDxzcGFuIGNsYXNzPSJmb3JtLWxhYmVsIj5TdHJlZXQqPC9zcGFuPg0KICAgICAgPGlucHV0DQogICAgICAgIGlkPSJzdHJlZXQiDQogICAgICAgIG5hbWU9InN0cmVldCINCiAgICAgICAgcmVxdWlyZWQNCiAgICAgICAgYXV0b2NvbXBsZXRlPSJvZmYiDQogICAgICAgIHBsYWNlaG9sZGVyPSJUeXBlIHlvdXIgYWRkcmVzcy4uLiINCiAgICAgIC8+DQogICAgPC9sYWJlbD4NCiAgICA8bGFiZWwgY2xhc3M9ImZ1bGwtZmllbGQiPg0KICAgICAgPHNwYW4gY2xhc3M9ImZvcm0tbGFiZWwiPkFkZHJlc3MgTGluZSAyPC9zcGFuPg0KICAgICAgPGlucHV0IGlkPSJhZGRyZXNzMiIgbmFtZT0iYWRkcmVzczIiIC8+DQogICAgPC9sYWJlbD4NCiAgICA8bGFiZWwgY2xhc3M9ImZ1bGwtZmllbGQiPg0KICAgICAgPHNwYW4gY2xhc3M9ImZvcm0tbGFiZWwiPlRvd24gLyBDaXR5Kjwvc3Bhbj4NCiAgICAgIDxpbnB1dCBpZD0idG93biIgbmFtZT0idG93biIgcmVxdWlyZWQgLz4NCiAgICA8L2xhYmVsPg0KICAgIDxsYWJlbCBjbGFzcz0ic2xpbS1maWVsZC1sZWZ0Ij4NCiAgICAgIDxzcGFuIGNsYXNzPSJmb3JtLWxhYmVsIj5Db3VudHkqPC9zcGFuPg0KICAgICAgPGlucHV0IGlkPSJjb3VudHkiIG5hbWU9ImNvdW50eSIgcmVxdWlyZWQgLz4NCiAgICA8L2xhYmVsPg0KICAgIDxsYWJlbCBjbGFzcz0iZmllbGQtcmlnaHQiPg0KICAgICAgPHNwYW4gY2xhc3M9ImZvcm0tbGFiZWwiPlBvc3Rjb2RlKjwvc3Bhbj4NCiAgICAgIDxpbnB1dCBpZD0icG9zdGNvZGUiIG5hbWU9InBvc3Rjb2RlIiByZXF1aXJlZCAvPg0KICAgIDwvbGFiZWw+DQogICAgPGxhYmVsIGNsYXNzPSJmdWxsLWZpZWxkIj4NCiAgICAgIDxzcGFuIGNsYXNzPSJmb3JtLWxhYmVsIj5Db3VudHJ5Kjwvc3Bhbj4NCiAgICAgIDxpbnB1dCBpZD0iY291bnRyeSIgbmFtZT0iY291bnRyeSIgcmVxdWlyZWQgLz4NCiAgICA8L2xhYmVsPg0KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0ibXktYnV0dG9uIj5TYXZlIGFkZHJlc3M8L2J1dHRvbj4NCiAgICA8aW5wdXQgdHlwZT0icmVzZXQiIHZhbHVlPSJDbGVhciBmb3JtIiAvPg0KICA8L2Zvcm0+DQo8L3NwYW4+DQo=";
|
|
33
33
|
|
|
34
34
|
var stylesUrl = "data:text/css;base64,";
|
|
35
35
|
|
|
36
|
-
class AddressLookup extends CustomElementBase {
|
|
37
|
-
constructor() {
|
|
38
|
-
super(AddressLookup.Css, AddressLookup.Html);
|
|
39
|
-
}
|
|
40
|
-
initialise() {
|
|
41
|
-
const searchBox = this.root.querySelector('#street');
|
|
42
|
-
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
43
|
-
componentRestrictions: { country: ['uk'] },
|
|
44
|
-
fields: ['address_components'],
|
|
45
|
-
types: ['address'],
|
|
46
|
-
});
|
|
47
|
-
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
48
|
-
}
|
|
49
|
-
onPlaceChanged() {
|
|
50
|
-
const place = this.addressCompleter.getPlace();
|
|
51
|
-
for (const component of place.address_components) {
|
|
52
|
-
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
53
|
-
if (inputFieldId) {
|
|
54
|
-
const input = document.querySelector(inputFieldId);
|
|
55
|
-
input.value = component.long_name;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
getMatchingFieldId(componentType) {
|
|
60
|
-
switch (componentType) {
|
|
61
|
-
case 'street_number':
|
|
62
|
-
return '#house-number';
|
|
63
|
-
case 'route':
|
|
64
|
-
return '#street';
|
|
65
|
-
case 'postal_code':
|
|
66
|
-
return '#postcode';
|
|
67
|
-
case 'locality':
|
|
68
|
-
return '#town';
|
|
69
|
-
case 'postal_town':
|
|
70
|
-
return '#town';
|
|
71
|
-
case 'administrative_area_level_2':
|
|
72
|
-
return '#county';
|
|
73
|
-
case 'country':
|
|
74
|
-
return '#country';
|
|
75
|
-
default:
|
|
76
|
-
return '';
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
AddressLookup.Css = reduceCss(decode(stylesUrl));
|
|
36
|
+
class AddressLookup extends CustomElementBase {
|
|
37
|
+
constructor() {
|
|
38
|
+
super(AddressLookup.Css, AddressLookup.Html);
|
|
39
|
+
}
|
|
40
|
+
initialise() {
|
|
41
|
+
const searchBox = this.root.querySelector('#street');
|
|
42
|
+
this.addressCompleter = new google.maps.places.Autocomplete(searchBox, {
|
|
43
|
+
componentRestrictions: { country: ['uk'] },
|
|
44
|
+
fields: ['address_components'],
|
|
45
|
+
types: ['address'],
|
|
46
|
+
});
|
|
47
|
+
this.addressCompleter.addListener('place_changed', this.onPlaceChanged);
|
|
48
|
+
}
|
|
49
|
+
onPlaceChanged() {
|
|
50
|
+
const place = this.addressCompleter.getPlace();
|
|
51
|
+
for (const component of place.address_components) {
|
|
52
|
+
const inputFieldId = this.getMatchingFieldId(component.types[0]);
|
|
53
|
+
if (inputFieldId) {
|
|
54
|
+
const input = document.querySelector(inputFieldId);
|
|
55
|
+
input.value = component.long_name;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
getMatchingFieldId(componentType) {
|
|
60
|
+
switch (componentType) {
|
|
61
|
+
case 'street_number':
|
|
62
|
+
return '#house-number';
|
|
63
|
+
case 'route':
|
|
64
|
+
return '#street';
|
|
65
|
+
case 'postal_code':
|
|
66
|
+
return '#postcode';
|
|
67
|
+
case 'locality':
|
|
68
|
+
return '#town';
|
|
69
|
+
case 'postal_town':
|
|
70
|
+
return '#town';
|
|
71
|
+
case 'administrative_area_level_2':
|
|
72
|
+
return '#county';
|
|
73
|
+
case 'country':
|
|
74
|
+
return '#country';
|
|
75
|
+
default:
|
|
76
|
+
return '';
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
AddressLookup.Css = reduceCss(decode(stylesUrl));
|
|
81
81
|
AddressLookup.Html = reduceHtml(decode(markupUrl));
|
|
82
82
|
|
|
83
|
-
// If custom elements is supported
|
|
84
|
-
if ('customElements' in window) {
|
|
85
|
-
// If not already defined
|
|
86
|
-
if (!window.customElements.get('ne14-address')) {
|
|
87
|
-
window.customElements.define('ne14-address', AddressLookup);
|
|
88
|
-
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
89
|
-
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
90
|
-
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
91
|
-
const mapsScript = document.createElement('script');
|
|
92
|
-
mapsScript.setAttribute('async', '');
|
|
93
|
-
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
94
|
-
window[callback] = () => {
|
|
95
|
-
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
96
|
-
el.initialise();
|
|
97
|
-
});
|
|
98
|
-
};
|
|
99
|
-
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
100
|
-
}
|
|
83
|
+
// If custom elements is supported
|
|
84
|
+
if ('customElements' in window) {
|
|
85
|
+
// If not already defined
|
|
86
|
+
if (!window.customElements.get('ne14-address')) {
|
|
87
|
+
window.customElements.define('ne14-address', AddressLookup);
|
|
88
|
+
const apiKey = 'AIzaSyDcwGyRxRbcNGWOFQVT87A1mkxEOfm8t0w';
|
|
89
|
+
const callback = 'apiCallback'; // `ne_address.${AddressLookup.name}.${AddressLookup.Cb.name}`;
|
|
90
|
+
const mapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=${callback}&libraries=places&v=weekly`;
|
|
91
|
+
const mapsScript = document.createElement('script');
|
|
92
|
+
mapsScript.setAttribute('async', '');
|
|
93
|
+
mapsScript.setAttribute('src', mapsScriptUrl);
|
|
94
|
+
window[callback] = () => {
|
|
95
|
+
Array.from(document.querySelectorAll('ne14-address')).forEach((el) => {
|
|
96
|
+
el.initialise();
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
window.addEventListener('load', () => document.body.appendChild(mapsScript));
|
|
100
|
+
}
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
exports.AddressLookup = AddressLookup;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ne1410s/address",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "An address lookup tool.",
|
|
5
5
|
"main": "dist/ne14_address.cjs.min.js",
|
|
6
6
|
"module": "dist/ne14_address.esm.min.js",
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@rollup/plugin-commonjs": "^24.0.1",
|
|
42
42
|
"@rollup/plugin-json": "^6.0.0",
|
|
43
|
-
"@rollup/plugin-node-resolve": "^15.0.
|
|
43
|
+
"@rollup/plugin-node-resolve": "^15.0.2",
|
|
44
44
|
"@rollup/plugin-url": "^8.0.1",
|
|
45
|
-
"@types/google.maps": "^3.52.
|
|
46
|
-
"prettier": "^2.8.
|
|
47
|
-
"rimraf": "^4.
|
|
48
|
-
"rollup": "^3.
|
|
45
|
+
"@types/google.maps": "^3.52.5",
|
|
46
|
+
"prettier": "^2.8.7",
|
|
47
|
+
"rimraf": "^4.4.1",
|
|
48
|
+
"rollup": "^3.20.2",
|
|
49
49
|
"rollup-plugin-typescript2": "^0.34.1",
|
|
50
|
-
"typescript": "^
|
|
50
|
+
"typescript": "^5.0.4"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@ne1410s/cust-elems": "^0.3.
|
|
53
|
+
"@ne1410s/cust-elems": "^0.3.4"
|
|
54
54
|
}
|
|
55
55
|
}
|