🆕 new: add fieldGoogleAddress #33

vue-generators · Aug 22, 2016 · 91f9317 · 91f9317
1 parent 776f6c4
commit 91f9317
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -30,6 +30,7 @@
 	<script type="text/javascript" src="https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js"></script>
+	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&amp;libraries=places"></script>
 
   </head>
   <body>

diff --git a/dev/schema.js b/dev/schema.js
@@ -180,6 +180,16 @@ module.exports = {
 			label: "E-mail (email field)",
 			model: "email",
 			placeholder: "User's e-mail address"
+		}, {
+			type: "googleAddress",
+			label: "Location (googleAddress)",
+			model: "location",
+			placeholder: "Location",
+			onPlaceChanged(value, place, rawPlace, model, schema) {
+				console.log("Location changed! " + value);
+				//console.log(place);
+				//console.log(rawPlace);
+			}
 		}, {
 			type: "text",
 			label: "Phone",

diff --git a/src/fields/fieldGoogleAddress.vue b/src/fields/fieldGoogleAddress.vue
@@ -0,0 +1,106 @@
+<template lang="jade">
+	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder", debounce="500", @focus="geolocate()")
+</template>
+
+<script>
+	/**
+	 * Based on gocanto"s Google Autocomplete library
+	 * https://github.com/gocanto/google-autocomplete
+	 */
+
+	import abstractField from "./abstractField";
+	import { isFunction } from "lodash";
+
+	/* global google */
+	export default {
+		mixins: [ abstractField ],
+
+		data: function ()
+		{
+			return {
+				//google autocomplete object
+				"autocomplete": "",
+
+				//google inputs retrieved
+				"inputs": {
+					"street_number": "long_name",
+					route: "long_name",
+					country: "long_name",
+					administrative_area_level_1: "long_name",
+					administrative_area_level_2: "long_name",
+					locality: "long_name",
+					postal_code: "short_name"
+				}
+			};
+		},
+
+		ready() {
+			if (window.google && window.google.maps && window.google.maps.places && window.google.maps.places.Autocomplete) {
+				this.autocomplete = new google.maps.places.Autocomplete(this.$el,	{
+					types: ["geocode"]
+				});
+
+				this.autocomplete.addListener("place_changed", this.pipeAddress);
+			}
+			else
+				console.warn("Google Maps API is missing. Please add https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places script in the HTML head section!");
+		},
+
+		methods: {
+			/**
+			 * Look up places and dispatch an event.
+			 * @return void
+			 */
+			pipeAddress: function () {
+
+				let place = this.autocomplete.getPlace();
+				if (place) {
+
+					this.value = place.formatted_address;
+					
+					let data  = {};
+					if (place.address_components !== undefined) {
+						for (let i = 0; i < place.address_components.length; i++) {
+							let input = place.address_components[i].types[0];
+							if (this.inputs[input]) {
+								data[input] = place.address_components[i][this.inputs[input]];
+							}
+						}
+
+					}
+					
+					// Call event in schema
+					if (isFunction(this.schema.onPlaceChanged))
+						this.schema.onPlaceChanged(this.value, data, place, this.model, this.schema);
+				}
+			},	
+
+			/**
+			 * Get the user location.
+			 * @return void
+			 */
+			geolocate: function(){
+
+				if (navigator.geolocation) {
+					navigator.geolocation.getCurrentPosition((position) => {
+
+						let geolocation = {
+							lat: position.coords.latitude,
+							lng: position.coords.longitude
+						};
+
+						let circle = new google.maps.Circle({
+							center: geolocation,
+							radius: position.coords.accuracy
+						});
+
+						this.autocomplete.setBounds(circle.getBounds());
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="sass">
+</style>