x-translate.html

<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<dom-module id="x-translate">
<style>
:host {
  display: inline;
}
.detected-language {
  color: gray;
  border: 1px solid gray;
  font-size: 10pt;
  padding: 3px;
}
</style>
<template>
  <iron-ajax id="ajax"
  url="https://www.googleapis.com/language/translate/v2"
  handle-as="json"
  on-response="handleResponse"></iron-ajax>
  <span>
    <span class="detected-language">[[detectedLanguage]]</span>
    <span class="translated-text">[[translatedText]]</span>
  </span>
</template>
</dom-module>
<script>
(function () {
  Polymer({
    is: 'x-translate',
    properties: {
      query: {
        type: String,
        value: '',
        notify: true
      },
      target: {
        type: String,
        value: (navigator.browserLanguage || navigator.language ||
          navigator.userLanguage).substr(0,2) || 'en',
        notify: true
      },
      source: {
        type: String,
        value: '',
        notify: true
      }
    },
    ready: function () {
      var params = {
        "key": "AIzaSyCvmuME4nuAt6dsYwM6SKSvpYyn3a_DcnU",
        "q": this.query,
        "target": this.target
      };
      if (this.source != null && this.source.length > 0) {
        params['source'] = this.source;
      }
      this.$.ajax.params = params;
      this.$.ajax.generateRequest();
    },
    handleResponse: function (request) {
      var result =  request.detail.response.data.translations[0];
      this.detectedLanguage = result.detectedSourceLanguage;
      this.translatedText = result.translatedText;
    }
  }
);
})();
</script>