From 5b4b5c26468d84aa426e44ae7eb285a7eef5a7c6 Mon Sep 17 00:00:00 2001 From: Naoaki Yamada Date: Tue, 19 Jun 2018 11:49:56 +0900 Subject: [PATCH 1/3] Support localization --- good-map.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/good-map.js b/good-map.js index c8e23bf..695705f 100644 --- a/good-map.js +++ b/good-map.js @@ -4,11 +4,13 @@ let initCalled; const callbackPromise = new Promise((r) => window.__initGoodMap = r); - function loadGoogleMaps(apiKey) { + function loadGoogleMaps(apiKey, language, region) { if (!initCalled) { const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?' + (apiKey ? `key=${apiKey}&` : '') + + (language ? `language=${language}&` : '') + + (region ? `region=${region}&` : '') + 'callback=__initGoodMap'; document.head.appendChild(script); initCalled = true; @@ -18,7 +20,7 @@ customElements.define('good-map', class extends HTMLElement { static get observedAttributes() { - return ['api-key', 'zoom', 'latitude', 'longitude', 'map-options']; + return ['api-key', 'language', 'region', 'zoom', 'latitude', 'longitude', 'map-options']; } attributeChangedCallback(name, oldVal, val) { @@ -26,6 +28,12 @@ case 'api-key': this.apiKey = val; break; + case 'language': + this.language = val; + break; + case 'region': + this.region = val; + break; case 'zoom': case 'latitude': case 'longitude': @@ -42,6 +50,8 @@ this.map = null; this.apiKey = null; + this.language = null; + this.region = null; this.zoom = null; this.latitude = null; this.longitude = null; @@ -49,7 +59,7 @@ } connectedCallback() { - loadGoogleMaps(this.apiKey).then(() => { + loadGoogleMaps(this.apiKey, this.language, this.region).then(() => { if (!this.mapOptions.zoom) { this.mapOptions.zoom = this.zoom || 0; } From 84ac2ae83547d2af7e905936258b046a0625aa8b Mon Sep 17 00:00:00 2001 From: Naoaki Yamada Date: Tue, 19 Jun 2018 11:53:43 +0900 Subject: [PATCH 2/3] Add localization demo --- demo/localization.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 demo/localization.html diff --git a/demo/localization.html b/demo/localization.html new file mode 100644 index 0000000..e8ecde7 --- /dev/null +++ b/demo/localization.html @@ -0,0 +1,23 @@ + + + + + + + good-map + + + + + + + +

Localization Demo

+ + + From 0f452f1c2db81ab22b143001e90dcc1ee2a52463 Mon Sep 17 00:00:00 2001 From: Naoaki Yamada Date: Tue, 19 Jun 2018 13:21:31 +0900 Subject: [PATCH 3/3] dashToCamelCase --- good-map.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/good-map.js b/good-map.js index 695705f..a2f0bbb 100644 --- a/good-map.js +++ b/good-map.js @@ -18,29 +18,30 @@ return callbackPromise; } + function dashToCamelCase(dash) { + return dash.indexOf('-') < 0 ? dash : dash.replace(/-[a-z]/g, (m) => m[1].toUpperCase()); + } + customElements.define('good-map', class extends HTMLElement { static get observedAttributes() { return ['api-key', 'language', 'region', 'zoom', 'latitude', 'longitude', 'map-options']; } attributeChangedCallback(name, oldVal, val) { + name = dashToCamelCase(name); switch (name) { - case 'api-key': - this.apiKey = val; - break; + case 'apiKey': case 'language': - this.language = val; - break; case 'region': - this.region = val; + this[name] = val; break; case 'zoom': case 'latitude': case 'longitude': this[name] = parseFloat(val); break; - case 'map-options': - this.mapOptions = JSON.parse(val); + case 'mapOptions': + this[name] = JSON.parse(val); break } }