titanium-address-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../google-apis/google-maps-api.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

<dom-module id="titanium-address-input">
	<template>
		<style>

		</style>
		<google-maps-api libraries="places" api-key="[[apiKey]]" on-api-load="_onApiLoad"></google-maps-api>
		<paper-input id="addressInput" invalid="[[invalid]]" readonly="[[readonly]]" value="{{value}}" always-float-label="[[alwaysFloatLabel]]"
		    required="[[required]]" placeholder="[[placeholder]]" error-message="[[errorMessage]]" disabled="[[disabled]]" focused="{{focused}}"
		    label="[[label]]">
			<slot name="prefix" slot="prefix"></slot>
			<slot name="suffix" slot="suffix"></slot>
		</paper-input>
	</template>
	<script>
		if (Polymer.Element) {
			// Polymer 2
			/*global google */
			class TitaniumAddressInput extends Polymer.mixinBehaviors([Polymer.IronValidatableBehavior, Polymer.IronFormElementBehavior],
				Polymer.Element) {
				static get is() {
					return 'titanium-address-input';
				}

				static get properties() {
					return {
						apiKey: String,
						/**
						 *   Required. Google Maps API Key.
						 * 
						 *   https://developers.google.com/maps/documentation/javascript/get-api-key
						 */
						value: String,
						autocomplete: Object,
						/**
						 * Address will be stored in this property when the user has selected an address.
						 * {
						 * 		street
						 *		city
						 *		state
						 *		zipCode
						 * }
						 */
						address: {
							notify: true,
							type: Object
						},
						/**
						 * If you're using PaperInputBehavior to implement your own paper-input-like
						 * element, bind this to the `<input is="iron-input">`'s `readonly` property.
						 */
						readonly: {
							type: Boolean,
							value: false
						},
						/**
						 * Set to true to mark the input as required. If you're using PaperInputBehavior to
						 * implement your own paper-input-like element, bind this to
						 * the `<input is="iron-input">`'s `required` property.
						 */
						required: {
							type: Boolean,
							value: false
						},
						/**
						 * Set to true to always float the label. If you're using PaperInputBehavior to
						 * implement your own paper-input-like element, bind this to
						 * the `<paper-input-container>`'s `alwaysFloatLabel` property.
						 */
						alwaysFloatLabel: {
							type: Boolean,
							value: false
						},
						/**
						 * Set to true to disable this input. If you're using PaperInputBehavior to
						 * implement your own paper-input-like element, bind this to
						 * both the `<paper-input-container>`'s and the input's `disabled` property.
						 */
						disabled: {
							type: Boolean,
							value: false
						},
						/**
						 * True when the input has focus.
						 */
						focused: {
							type: Boolean,
							notify: true
						},
						/**
						 * A placeholder string in addition to the label. If this is set, the label will always float.
						 */
						placeholder: {
							type: String,
							value: ''
						},
						/**
						 * The error message to display when the input is invalid. If you're using
						 * PaperInputBehavior to implement your own paper-input-like element,
						 * bind this to the `<paper-input-error>`'s content, if using.
						 */
						errorMessage: {
							type: String,
							value: 'Address not valid'
						},
						/**
						 * The label for this input. If you're using PaperInputBehavior to
						 * implement your own paper-input-like element, bind this to
						 * `<label>`'s content and `hidden` property, e.g.
						 * `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
						 */
						label: {
							type: String
						}
					};
				}

				static get observers() {
					return ['onValueChanged(value)', 'onAddressChanged(address)'];
				}

				onAddressChanged(address) {
					if (!address)
						return;

					this._ignoreChange = true;
					this.set('value', this._formatAddress(address.street, address.city, address.state, address.zipCode));
					this._ignoreChange = false;
				}
				onValueChanged() {
					if (this._ignoreChange) {
						return;
					}
					this.address = null;
				}
				_getValidity() {
					if (!this.required && !(!!this.value && !this.address))
						return true;

					return this.address && this.address.street && this.address.city && this.address.state && this.address.zipCode;
				}
				_onApiLoad() {
					if (!this.$.addressInput) {
						console.warn('Address input not loaded.');
						return;
					}

					let input = this.$.addressInput.$.nativeInput;
					this.autocomplete = new google.maps.places.Autocomplete(input, {
						types: ['address']
					});
					google.maps.event.addListener(this.autocomplete, 'place_changed', this._onChangePlace.bind(this));
				}
				_onChangePlace() {
					let place = this.autocomplete.getPlace();

					if (place && place.address_components) {
						let stateComponent = place.address_components.filter(o => o.types.some(p => p === 'administrative_area_level_1'))[
							0];
						let streetNumberComponent = place.address_components.filter(o => o.types.some(p => p === 'street_number'))[0];
						let streetAddressComponent = place.address_components.filter(o => o.types.some(p => p === 'route'))[0];
						let cityComponent = place.address_components.filter(o => o.types.some(p => p === 'locality'))[0];
						let zipCodeComponent = place.address_components.filter(o => o.types.some(p => p === 'postal_code'))[0];

						if (stateComponent && streetNumberComponent && streetAddressComponent && cityComponent && zipCodeComponent) {
							this.address = {
								street: streetNumberComponent.short_name + ' ' + streetAddressComponent.short_name,
								city: cityComponent.short_name,
								state: stateComponent.short_name,
								zipCode: zipCodeComponent.short_name
							};
						} else {
							this.address = null;
						}
					}
				}
				_formatAddress(street, city, state, zipCode) {
					if (!street || !zipCode || !city || !state)
						return null;

					return `${street} ${city}, ${state} ${zipCode}`;
				}
			}
			customElements.define(TitaniumAddressInput.is, TitaniumAddressInput);
		} else {
			// Polymer 1
			Polymer({
				is: 'titanium-address-input',
				properties: {
					apiKey: String,
					/**
					 *   Required. Google Maps API Key.
					 * 
					 *   https://developers.google.com/maps/documentation/javascript/get-api-key
					 */
					value: {
						type: String,
						notify: true
					},
					autocomplete: Object,
					/**
					 * Address will be stored in this property when the user has selected an address.
					 * {
					 * 		street
					 *		city
					 *		state
					 *		zipCode
					 * }
					 */
					address: {
						notify: true,
						type: Object
					},
					/**
					 * If you're using PaperInputBehavior to implement your own paper-input-like
					 * element, bind this to the `<input is="iron-input">`'s `readonly` property.
					 */
					readonly: {
						type: Boolean,
						value: false
					},
					/**
					 * Set to true to mark the input as required. If you're using PaperInputBehavior to
					 * implement your own paper-input-like element, bind this to
					 * the `<input is="iron-input">`'s `required` property.
					 */
					required: {
						type: Boolean,
						value: false
					},
					/**
					 * Set to true to always float the label. If you're using PaperInputBehavior to
					 * implement your own paper-input-like element, bind this to
					 * the `<paper-input-container>`'s `alwaysFloatLabel` property.
					 */
					alwaysFloatLabel: {
						type: Boolean,
						value: false
					},
					/**
					 * Set to true to disable this input. If you're using PaperInputBehavior to
					 * implement your own paper-input-like element, bind this to
					 * both the `<paper-input-container>`'s and the input's `disabled` property.
					 */
					disabled: {
						type: Boolean,
						value: false
					},
					/**
					 * True when the input has focus.
					 */
					focused: {
						type: Boolean,
						notify: true
					},
					/**
					 * A placeholder string in addition to the label. If this is set, the label will always float.
					 */
					placeholder: {
						type: String,
						value: ''
					},
					/**
					 * The error message to display when the input is invalid. If you're using
					 * PaperInputBehavior to implement your own paper-input-like element,
					 * bind this to the `<paper-input-error>`'s content, if using.
					 */
					errorMessage: {
						type: String,
						value: 'Address not valid'
					},
					/**
					 * The label for this input. If you're using PaperInputBehavior to
					 * implement your own paper-input-like element, bind this to
					 * `<label>`'s content and `hidden` property, e.g.
					 * `<label hidden$="[[!label]]">[[label]]</label>` in your `template`
					 */
					label: {
						type: String
					}
				},
				behaviors: [
					Polymer.IronValidatableBehavior,
					Polymer.IronFormElementBehavior
				],
				_ignoreChange: false,
				observers: ['onValueChanged(value)', 'onAddressChanged(address)'],
				onAddressChanged(address) {
					if (!address)
						return;

					this._ignoreChange = true;
					this.set('value', this._formatAddress(address.street, address.city, address.state, address.zipCode));
					this._ignoreChange = false;
				},
				onValueChanged() {
					if (this._ignoreChange) {
						return;
					}
					this.address = null;
				},
				_getValidity() {
					if (!this.required && !(!!this.value && !this.address))
						return true;

					return this.address && this.address.street && this.address.city && this.address.state && this.address.zipCode;
				},
				_onApiLoad() {
					if (!this.$.addressInput) {
						console.warn('Address input not loaded.');
						return;
					}

					let input = this.$.addressInput.$.nativeInput || this.$.addressInput.$.input;
					this.autocomplete = new google.maps.places.Autocomplete(input, {
						types: ['address']
					});
					google.maps.event.addListener(this.autocomplete, 'place_changed', this._onChangePlace.bind(this));
				},
				_onChangePlace() {
					let place = this.autocomplete.getPlace();

					if (place && place.address_components) {
						let stateComponent = place.address_components.filter(o => o.types.some(p => p === 'administrative_area_level_1'))[
							0];
						let streetNumberComponent = place.address_components.filter(o => o.types.some(p => p === 'street_number'))[0];
						let streetAddressComponent = place.address_components.filter(o => o.types.some(p => p === 'route'))[0];
						let cityComponent = place.address_components.filter(o => o.types.some(p => p === 'locality'))[0];
						let zipCodeComponent = place.address_components.filter(o => o.types.some(p => p === 'postal_code'))[0];

						if (stateComponent && streetNumberComponent && streetAddressComponent && cityComponent && zipCodeComponent) {
							this.address = {
								street: streetNumberComponent.short_name + ' ' + streetAddressComponent.short_name,
								city: cityComponent.short_name,
								state: stateComponent.short_name,
								zipCode: zipCodeComponent.short_name
							};
						} else {
							this.address = null;
						}
					}
				},
				_formatAddress(street, city, state, zipCode) {
					if (!street || !zipCode || !city || !state)
						return null;

					return `${street} ${city}, ${state} ${zipCode}`;
				}
			});
		}
	</script>
</dom-module>