sentiment-aware-input.html

<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-input/paper-textarea.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">

<dom-module id="sentiment-aware-input">
  <template>
    <style>
      :host {
        display: block;
      }

      .negative {
        --paper-input-container-color: #cc0000;
        --paper-input-container-focus-color: #cc0000;
      }

      .positive {
        --paper-input-container-color:#00B600;
        --paper-input-container-focus-color: #00B600;
      }

    </style>
    <div>
      <paper-textarea class$="[[getClass(sentiment)]]" label="Input Area" value="{{text}}"></paper-textarea>
    </div>

    <iron-ajax id="ajax"
      url="[[url]]"
      method="post"
      body="[[text]]"
      content-type="text/plain; charset=UTF-8"
      handle-as="text"
      on-response="handleResponse"
      debounce-duration="500"
      auto>
    </iron-ajax>

  </template>

  
  <script>
    /**
     * `sentiment-aware-input`
     * A sentiment aware input
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class SentimentAwareInput extends Polymer.Element {
      static get is() { return 'sentiment-aware-input'; }
      static get properties() {
        return {
          text: {
            type: String,
            notify: true,
            value: "",
          },
          sentiment: {
            type: Number,
            notify: true,
            value: 0.0
          },
          url: {
            type: String,
            notify: true
          }
        };
      }
      getClass(sentiment) {
        if (sentiment < 0) {
          return 'negative'
        } 
        if (sentiment > 0) {
          return 'positive'
        }
        return ''
      }
      handleResponse(e, request) {
        this.set("sentiment", parseFloat(e.detail.response))
      }
    }

    window.customElements.define(SentimentAwareInput.is, SentimentAwareInput);
  </script>
</dom-module>