messages-view.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/core-list/core-list.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="message-overlay.html">

<!--
##### Example

    <messages-view></messages-view>

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

<polymer-element name="messages-view" attributes="data" label="Messages">
  <template>
    <link rel="stylesheet" href="messages-view.css">

    <message-overlay id="messageOverlay"></message-overlay>
    <section layout vertical center-center>
      <paper-shadow id="listContainer" z="1">
        <core-list data="{{data.threads}}" class="message-list" height="81" slide-from-right on-core-activate="{{messageTapped}}">
          <template>
            <core-item layout horizontal>
              <div class="avatar">{{model.from[0]}}</div>
              <div layout vertical flex>
                <div class="sender-name">{{model.from}}</div>
                <div class="message-preview">{{model.messages[model.messages.length - 1].message}}</div>
              </div>
              <paper-ripple fit></paper-ripple>
              <paper-icon-button icon="delete" on-tap="{{deleteThread}}"></paper-icon-button>
            </core-item>
          </template>
        </core-list>
      </paper-shadow>
    </section>
  </template>

  <script>
    Polymer('messages-view', {

      ready: function() {
      },

      messageTapped: function(event) {
        if (event.detail.data === undefined) {
          return;
        }

        this.$.messageOverlay.thread = event.detail.data;
        this.$.messageOverlay.open();
      },

      deleteThread: function(event) {
        var from = event.target.templateInstance.model.model.from;
        this.data.threads = this.data.threads.filter(function(t) {return t.from != from});
      }

    });
  </script>
</polymer-element>