message-overlay.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="message-thread.html">

<!--
##### Example

    <messages-view></messages-view>

@element messages-view
@blurb Element providing solution to [...].
@status [...]
-->

<polymer-element name="message-overlay" attributes="thread">
  <template>
    <!--<link rel="stylesheet" href="messages-view.css">-->
    <style>
      paper-button {
        color: #4285f4;
      }

      paper-icon-button {
        align-self: center;
      }
    </style>
    <paper-dialog id="overlay" heading="Message from {{thread.from}}" backdrop transition="paper-dialog-transition-bottom">
      <message-thread thread="{{thread}}"></message-thread>
      <div layout horizontal>
        <paper-input id="messageInput" flex label="Send new message"></paper-input>
        <paper-icon-button icon="send" on-click="{{sendMessage}}"></paper-icon-button>
      </div>
      <paper-button affirmative core-overlay-toggle>CLOSE</paper-button>
    </paper-dialog>
  </template>

  <script>
    Polymer('message-overlay', {

      ready: function() {
      },

      open: function() {
        this.$.overlay.toggle();
      },

      sendMessage: function() {
        if (this.$.messageInput.value == '') {
          return
        }
        var newMessage = {from: "Me", message: this.$.messageInput.value}
        this.thread.messages.push(newMessage);
        this.$.messageInput.value = '';
        this.async(function() {
          var messageEls = this.querySelectorAll("::shadow .message");
          messageEls[messageEls.length - 1].scrollIntoViewIfNeeded();
        });
      }
    });
  </script>
</polymer-element>