perf/res/imp/commit-detail-panel.html

<!-- The <commit-detail-panel-sk> custom element declaration.

  Displays an Array of serialized cid.CommitDetails in a table.

  Attributes:
    selectable - A boolean attribute that if true means
      that the commits are selectable, and when selected
      the 'commit-selected' event is generated.

  Events:
    commit-selected - Event produced when a commit is selected. The
      the event detail contains the serialized cid.CommitDetail and
      a simplified description of the commit:

      {
        description: "foo (foo@example.org) 62W Commit from foo.",
        commit: {
          author: "foo (foo@example.org)",
          url: "skia.googlesource.com/bar",
          message: "Commit from foo.",
          ts: 1439649751,
        },
      }

  Methods:
    setCommitDetail(d) - Where d is an Array of serialized cid.CommitDetail,
      i.e. they look like:

      {
        author: "foo (foo@example.org)",
        url: "skia.googlesource.com/bar",
        message: "Commit from foo.",
        ts: 1439649751,
      },

    select(index) - Causes the commit at 'index' to be selected.
-->
<link rel="import" href="/res/imp/commit-detail.html" />

<dom-module id="commit-detail-panel-sk">
  <style>
    :host[selectable] td {
      cursor: pointer;
    }

    pre,
    span {
      margin: 0;
    }

    a {
      color: #1F78B4;
      font-weight: bold;
    }

    td {
      padding: 0.2em;
      border: none;
    }

    tr[data-selected] {
      background: #ddd;
    }
  </style>
  <template>
    <table id=table>
      <template id=template is="dom-repeat" items="{{_details}}" >
        <tr data-id$="[[index]]" data-selected$="[[_selected(index,_selectedIndex)]]">
          <td>[[_trim(item.author)]]</td>
          <td>
            <commit-detail-sk cid="[[item]]"></commit-detail-sk>
          </td>
        </tr>
      </template>
    </table>
  </template>
</dom-module>

<script>
  Polymer({
    is: "commit-detail-panel-sk",

    properties: {
      selectable: {
        type: Boolean,
        value: false,
      },
      _details: {
        type: Array,
        value: function() { return []; },
        reflectToAttribute: false,
      },
      _selectedIndex: {
        type: Number,
        value: -1,
      }
    },

    listeners: {
      "table.tap": "_selectTap",
    },

    setCommitDetail: function(details) {
      this.set('_details', details);
      this.set('_selectedIndex', -1);
      this.$.template.render();
    },

    select: function(index) {
      var cid = this._details[index];
      if (!cid) {
        return
      }
      var ele = $$$('[data-id="'+index+'"]', this);
      this.set('_selectedIndex', index);
      var details = {
        description: ele.textContent.trim(),
        commit: cid,
      }
      this.fire('commit-selected', details);
    },

    _selected: function(index, _selectedIndex) {
      return this.selectable && (index == _selectedIndex);
    },

    _selectTap: function(e) {
      var ele = sk.findParent(e.target, 'TR');
      if (!ele) {
        return
      }
      var index = +ele.dataset['id']
      this.select(index);
    },


    _humanize: function (s) {
      return sk.human.diffDate(s * 1000);
    },

    _trim: function(s) {
      s = s.slice(0, 72);
      return s;
    },

  });
</script>