show-unread.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="unread-badge.html">

<dom-module id="show-unread" class="empty">
  <template>
    <style>
      :host(.empty) {
        display: none !important;
      }

      :host {
        display: inline-block;
      }

      a {
        text-decoration: none;
        color: #fff !important;
      }
    </style>
    <iron-ajax
        auto
        url="/suggest/show-unread"
        handle-as="json"
        on-response="handleResponse"
        on-error="handleError"
        debounce-duration="300">
    </iron-ajax>
    <a id="profileLink" href=[[profileUrl]]>
      <unread-badge id="badge" value="[[value]]"></unread-badge>
    </a>
  </template>

  <script>
    /**
     * `show-unread`
     *
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ShowUnread extends Polymer.Element {
      static get is() { return 'show-unread'; }
      static get properties() {
        return {
          profileUrl: {
            type: String,
            value: ''
          },
          value: {
            type: String,
            value: '',
            observer: '_valueChanged'
          }
        };
      }
      handleResponse(e) {
        this.value = e.detail.response.unread;
      }
      handleError(e) {
        this.value = undefined;
      }
      _valueChanged(newValue, oldValue) {
        this.value = newValue;
        if (newValue) {
          this.classList.remove("empty");
          var title = "You have " + newValue + " unread private message";
          if (newValue > 1) { title += "s"; }
          this.$.profileLink.setAttribute("title", title);
        } else {
          this.classList.add("empty");
          this.$.profileLink.removeAttribute("title");
        }
      }
    }

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