paper-timezone-dropdown.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../polymer/lib/elements/dom-if.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-material/paper-material.html">
<script type="text/javascript" src="../moment/min/moment.min.js"></script>
<script type="text/javascript" src="../moment-timezone/builds/moment-timezone-with-data.min.js"></script>
<dom-module id="paper-timezone-dropdown">
	<template>
		<custom-style>
			<style>
				:host {
					display: block;
					box-sizing: border-box;
				}

				.container {
					position: relative;
				}

				paper-material {
					left: 0;
					right: 0;
					position: absolute;
					z-index: 10;
				}

				paper-item {
					cursor: pointer;
					white-space: nowrap;
				}

				.iron-selected {
					background: #E0E0E0;
				}

				.timezone {
					font-family: 'Roboto', 'Noto', sans-serif;
					-webkit-font-smoothing: antialiased;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					color: #737373;
				}

				.timezone::first-letter {
					visibility: hidden;
				}

				.timezone-with-label {
					position: absolute;
					top: 12px;
				}

				.timezone-without-label {
					position: absolute;
					top: -8px;
				}

				.tzFormat {
					right: 10px;
					position: absolute;
				}

				#formatOffset {
					font-size: 14px;
					cursor: pointer;
				}

				#formatOffset, .tzFormat {
					text-transform: uppercase;
				}

				.inactive {
					opacity: .0;
				}
			</style>
		</custom-style>
		<div class="container">

			<paper-input 
				label="[[label]]" 
				placeholder="[[placeholder]]" 
				always-float-label="[[alwaysFloatLabel]]" 
				autofocus="[[autofocus]]"
				disabled="[[disabled]]" 
				error-message="[[errorMessage]]" 
				value="{{inputValue}}" 
				no-label-float="[[noLabelFloat]]" 
				readonly="[[readonly]]"
				required="[[required]]" 
				auto-validate="[[autoValidate]]" 
				on-keyup="_keyup" 
				on-keydown="_keydown">
				<div slot="suffix" id="formatOffset">gmt [[_timezoneOffsetFormat(timezone.offset)]]</div>
			</paper-input>

			<template is="dom-if" if="[[_suggestions.length]]">
				<paper-material>
					<paper-listbox>
						<template is="dom-repeat" items="[[_suggestions]]">
							<paper-item on-mouseover="_mouseMoveAction" on-tap="_selectItem">
								<span>[[item]]</span>
								<span class="tzFormat">gmt [[_getTimezoneOffsetFormat(item)]]</span>
							</paper-item>
						</template>
					</paper-listbox>
				</paper-material>
			</template>

		</div>
	</template>
</dom-module>
<script>
	class PaperTimezoneDropdown extends Polymer.Element {
		static get is() {
			return 'paper-timezone-dropdown';
		}

		static get properties() {
			return {
				/**
				* The label for paper-timezone input
				*/
				label: {
					type: String
				},

				/**
				 * A placeholder string in addition to the label which is shown in paper-timezone input field like default value
				 */
				placeholder: {
					type: String,
					value: 'Please enter location'
				},
				/**
				 * The candidates from local variable.
				 */
				localCandidates: {
					type: Array,
					value: moment.tz.names()
				},

				/**
				 * Internal variable holding all matched suggestions.
				 */
				_suggestions: {
					type: Array
				},

				/**
				 * Maximum number of suggestions to show up in timezone.
				 */
				maxSuggestions: {
					type: Number,
					value: 5
				},
				/**
				 * Paper-timezone input value.
				 */
				inputValue: {
					type: String,
					notify: true
				},

				/**
				 * Set to true to always float the label on paper-timezone.
				 */
				alwaysFloatLabel: {
					type: Boolean,
					value: false
				},

				/**
				 * Bind this to the <paper-input>'s autofocus property.
				 */
				autofocus: {
					type: Boolean,
					value: false
				},

				/**
				 * Set to true to disable paper-countries.
				 */
				disabled: {
					type: Boolean,
					value: false
				},

				/**
				 * The error message to display when the input is invalid.
				 */
				errorMessage: {
					type: String
				},

				/**
				 * Set to true to disable the floating label.
				 */
				noLabelFloat: {
					type: Boolean,
					value: false
				},

				/**
				 * Set to true to set paper-timezone in readonly mode
				 */
				readonly: {
					type: Boolean,
					value: false
				},

				/**
				 * Set to true to mark the paper-timezone as required.
				 */
				required: {
					type: Boolean,
					value: false
				},

				/**
				 * Set to true to auto-validate the input value.
				 */
				autoValidate: {
					type: Boolean,
					value: false
				},

				/**
				 * Timezone object with hold location and offset
				 */
				timezone: {
					type: Object,
					notify: true
				}
			}
		}

		/**
		 * Focus on the paper-input element inside of paper-timezone-dropdown.
		 */
		_focusOnInput() {
			var input = this.shadowRoot.querySelector('paper-input');
			input.focus();
		}

		_hideOffsetValue() {
			var classExist = this.$.formatOffset.classList.contains("inactive");
			if (!classExist) {
				this.$.formatOffset.classList.toggle("inactive");
			}
		}

		/**
		 * Callback for keydown event
		 *
		 * @param {e} event
		 */
		_keydown(e) {
			switch (e.keyCode) {
				case 8:
					this._hideOffsetValue();
					break;
				case 9:
					this.set('_suggestions', []);
					break;
				case 38:
					e.preventDefault();
					break;
				case 40:
					e.preventDefault();
			}
		}

		/**
		 * Callback for keyup event
		 *
		 * @param {e} event
		 */
		_keyup(e) {
			var suggestionsMenu = this.shadowRoot.querySelector('paper-listbox');
			if (suggestionsMenu) {
				switch (e.keyCode) {
					case 9:
						e.preventDefault();
						return;
					case 13:
						this._selectMenuItem(suggestionsMenu, suggestionsMenu.focusedItem);
						return;
					case 38:
						this._upButtonAction(suggestionsMenu);
						return;
					case 40:
						this._downButtonAction(suggestionsMenu);
						return;
				}
				suggestionsMenu.select(-1);
			}
			this._search(this.inputValue.trim());
		}

		/**
		 * Callback on mouseover event on paper-item
		 *
		 */
		_mouseMoveAction(e) {
			var suggestionsMenu = this.shadowRoot.querySelector('paper-listbox');
			if (suggestionsMenu) {
				var selectedItem = e.currentTarget;
				var index = Number(suggestionsMenu.indexOf(selectedItem));
				suggestionsMenu.select(index);
				this._focusOnInput();
			}
		}

		/**
		 * Callback on mouse click on paper-item
		 *
		 * @param {e} event
		 */
		_selectItem(e) {
			var suggestionsMenu = this.shadowRoot.querySelector('paper-listbox');
			if (suggestionsMenu) {
				var selectedItem = e.currentTarget;
				this._selectMenuItem(suggestionsMenu, selectedItem);
			}
		}

		_upButtonAction(menuList) {
			var selectedItem = menuList.focusedItem,
				index = 0;
			if (selectedItem) {
				index = Number(menuList.indexOf(selectedItem));
				index = Math.max(index - 1, -1);
			}
			menuList.select(index);
			this._focusOnInput();
		}

		_downButtonAction(menuList) {
			var selectedItem = menuList.focusedItem,
				index = 0;
			if (selectedItem) {
				index = Number(menuList.indexOf(selectedItem));
				index = Math.min(index + 1, this._suggestions.length - 1);
			}
			menuList.select(index);
			this._focusOnInput();
		}

		_selectMenuItem(menuList, selectedItem) {
			if (selectedItem) {
				var index = Number(menuList.indexOf(selectedItem));
				var location = this.inputValue = this._suggestions[index];;
				var offset = moment(new Date()).tz(location).utcOffset();
				this.timezone = {
					location: location,
					offset: offset
				};
				this.$.formatOffset.classList.toggle("inactive");
				this.set('_suggestions', []);
			}
		}

		_getDisplayValue(item) {
			if (this.displayProp) {
				return item[this.displayProp];
			} else {
				console.warn("displayProp not set up");
				return "";
			}
		}

		_search(term) {
			if (term == "") {
				this.set('_suggestions', []);
				return;
			}
			var pattern = new RegExp(term.toLowerCase()),
				matched = [];
			if (this.localCandidates) {
				for (var i = 0; i < this.localCandidates.length; i++) {
					if (matched.length == this.maxSuggestions) {
						break;
					}
					var location = this.localCandidates[i];
					if (pattern.test(location.toLowerCase())) {
						matched.push(location);
						continue;
					}
				}
			}
			this.set('_suggestions', matched);
		}

		_getTimezoneOffsetFormat(item) {
			if (!item) return;
			var offset = moment(new Date()).tz(item).utcOffset();
			var offsetFormatted = this._timezoneOffsetFormat(offset);
			return offsetFormatted;
		}
		
		_timezoneOffsetFormat(offset) {
			var timezoneOffset = Math.abs(offset);
			var operator = offset >= 0 ? '+' : '-';
			var hours = timezoneOffset / 60;
			var rem = timezoneOffset % 60;
			hours = (rem <= 0) ? hours + '.0' : hours;
			timezoneOffset = operator + hours;
			return timezoneOffset;
		}
	}
	window.customElements.define(PaperTimezoneDropdown.is, PaperTimezoneDropdown);

</script>