positional-search.html

<link rel="import" href="bower_components/polymer/polymer.html">

<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/typography.html">

<link rel="import" href="bower_components/geo-location/geo-location.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/communication-icons.html">
<link rel="import" href="bower_components/iron-icons/maps-icons.html">
<link rel="import" href="bower_components/iron-icons/device-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-card/paper-card.html">

<link rel="import" href="bower_components/paper-progress/paper-progress.html">

<dom-module id="positional-search">
<template>
  <style>
  :host {
    display: inline-block;
  }
  paper-icon-button {
    opacity: var(--dark-secondary-opacity);
  }
  input {
    position: relative;
    z-index: 1;
    outline: none;
    border: none;
    @apply(--paper-font-title);
  }
  paper-progress {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 1;
    height: 2px;
    --paper-progress-container-color: #fff;
  }
  </style>

  <template is="dom-if" if="[[active]]">
    <geo-location watchpos></geo-location>
  </template>

  <paper-card class="layout horizontal">
    <paper-icon-button icon="search"></paper-icon-button>
    <input id="input" type="text" placeholder="Search nearby places" on-change="_onInputChange">
    <paper-icon-button icon="clear" on-tap="_clearInput"></paper-icon-button>
    <paper-icon-button icon="{{_computeGPSIcon(active)}}"
          on-tap="getPosition"></paper-icon-button>
    <template is="dom-if" if="[[loading]]">
      <paper-progress indeterminate></paper-progress>
    </template>
  </paper-card>

</template>
<script>
  Polymer({
    is: 'positional-search',
    properties: {
      active: {
        type: Boolean,
        value: false,
        notify: true
      },
      query: {
        type: String,
        value: null,
        notify: true,
      },
      loading: {
        type: Boolean,
        value: false
      },
    },
    _computeGPSIcon: function(active) {
      return active ? 'device:gps-fixed' : 'device:gps-not-fixed';
    },
    _onInputChange: function(e, detail) {
      this.query = e.target.value;
      this.fire('search');
    },
    _clearInput: function(e, detail) {
      this.$.input.value = null;
    },
    ready: function() {
      this.waitForPosition();
    },
    getPosition: function() {
      this.active = true;
    },
    waitForPosition: function(e, detail) {
      navigator.permissions.query({name: 'geolocation'}).then(function(status) {
        this.active = status.state === 'granted';
        status.onchange = function(e) {
          this.active = status.state === 'granted';
        }.bind(this);
      }.bind(this));
    }
  });
</script>
</dom-module>