perf/res/imp/commit-selector.html

<!-- The <commit-selector-sk> custom element declaration.

  Allows choosing from a list of commits. The element presents as a button
  that when pressed pops up a dialog with the commits to choose from.

  Attributes:
    currentCommit: The hash of the currently selected commit, or '' if none
        has been selected.

  Events:
    'change'
        The change event will be produced when the user has made
        a selection. The selected commit hash is provided in e.detail.hash.

  Methods:
    setCommits(commits): Set the commits to choose from. The commits are
        in the form of an array where each entry looks like:

        {
          Hash: 'ae434....',
          Author: 'jcgregorio@google.com',
          Subject: 'First line of commit msg.'
        }
-->

<style type='text/css' media='screen'>
  html /deep/ paper-action-dialog#commits /deep/ .commit {
    font-family: monospace;
    padding: 0.7em;
    cursor: pointer;
  }

  html /deep/ paper-action-dialog#commits /deep/ .commit .hash {
    color: #D95F02;
  }

  html /deep/ paper-action-dialog#commits /deep/ .commit .author {
    color: #1B9E77;
  }

  html /deep/ paper-action-dialog#commits /deep/ .commit:hover {
    background: #eee;
  }
</style>

<polymer-element name='commit-selector-sk'>
  <template>
    <paper-button id=choose>
      <span>{{currentCommitMsg}}</span>
    </paper-button>
    <paper-action-dialog id=commits backdrop>
      <core-selector id=selector valueattr='label'>
        <div class=commit data-label=''>None</div>
        <template repeat='{{c in commits}}'>
          <div class=commit data-label='{{c.Hash}}'>
              <span class='hash'>{{c.Hash|shortHash}}</span>
              <span class=author>{{c.Author}}</span>
              <span class=subject>{{c.Subject}}</span>
          </div>
        </template>
      </core-selector>
      <paper-button dismissive>Cancel</paper-button>
    </paper-action-dialog>
  </template>
  <script>
    Polymer({
      ready: function() {
        this.commits = [
          {
            Hash: 'abcde3924829384902389',
            Author: 'jcgregorio@google.com',
            Subject: 'Did a commit.'
          },
          {
            Hash: '123459348239084923020',
            Author: 'jcgregorio@google.com',
            Subject: 'A previous commit.'
          }
        ];
        this.currentCommit    = '';
        this.currentCommitMsg = 'No commit chosen';

        var that = this;

        this.$.choose.addEventListener('click', function() {
          that.$.commits.toggle();
        });
        this.$.selector.addEventListener('core-activate', function(e) {
          that.$.commits.toggle();
          that.currentCommit = e.detail.item.dataset.label;
        });
      },

      // Returns a truncated hash, used in template expansion.
      shortHash: function(s) {
        return s.slice(0, 9);
      },

      currentCommitChanged: function() {
        var detail = {hash: this.currentCommit};
        this.dispatchEvent(new CustomEvent('change', {detail: detail}));
        if (this.currentCommit === '') {
          this.currentCommitMsg = 'No commit chosen';
        } else {
          this.currentCommitMsg = this.currentCommit;
        }
      }
    });
  </script>
</polymer-element>