golden/frontend/res/imp/blame-sk.html

<!-- The <blame-sk> custom element declaration.

  The blame-sk element displays a blame list.

  Attributes:
    value - A serialized blame.BlameDistribution.
    commits - A serialized slice of types.Commit.

  Events:
    hover-blame - An event is generated when the mouse hovers over a blame
      name. The detail contains the commit index of the blame and a boolean
      b that is true if the mouse is over the blame, otherwise it is false
      if the mouse is leaving the hover. For example, when the mouse starts
      hovering over a blame for commit index 3, the event will have the
      following detail:

        {
          index: 3,
          b: true,
        }

    show-commits - An event is fired when a commit is clicked. The
      detail contains a list of the commits that should be shown.

  Methods:
    None.
-->
<dom-module id="blame-sk">
  <template>
    <style type="text/css" media="screen">
        .header {
          font-weight: bold;
          padding-top: 1em;
        }

        .container {
          padding-top: 1em;
          padding-bottom: 1em;
        }

        .footNote {
          padding-top: 1em;
        }

        div.commitEntry:hover {
          color: #E7298A;
        }

        div.commitEntry {
          padding-left: 2em;
        }
      </style>
      <div class="container">
        <template is="dom-if" if="{{_hasValue(value)}}">
          <div class="header">Blame</div>
          <template is="dom-repeat" items="{{value.freq}}" as="b">
            <div class="commitEntry" on-mouseover="_hoverHandler"
                 on-mouseout="_hoverHandler"
                 on-click="_clickHandler" data-idx$="{{b}}">
              <span>{{_humanDiffDate(commits, b)}}</span> - <span>{{_author(commits, b)}}</span>
            </div>
          </template>
          <template is="dom-if" if="{{value.old}}">
            <div class="footNote">
              * Digest appeared before current range. Blame might be incorrect.
            </div>
          </template>
        </template>
        <template is="dom-if" if="{{!_hasValue(value)}}">
          No blames available - Digest too old !
        </template>
      </div>
  </template>
  <script>
    Polymer({
      is: 'blame-sk',

      properties: {
        commits: {
          type: Array,
          value: function () { return []; }
        },

        value: {
          type: Object,
          value: function () { return {}; },
        }
      },

      _hoverHandler: function (e) {
        e.stopPropagation();
        var targetEle = e.target;
        if (targetEle.nodeName !== 'DIV') {
          targetEle = targetEle.parentElement;
        }

        var detail = {
          index: parseInt(targetEle.dataset.idx),
          b: e.type == 'mouseover'
        };

        this.fire('hover-blame', detail);
      },

      _clickHandler: function (e) {
        e.stopPropagation();
        var targetEle = e.target;
        if (targetEle.nodeName !== 'DIV') {
          targetEle = targetEle.parentElement;
        }
        var commitInfo = [this.commits[parseInt(targetEle.dataset.idx)]];
        this.fire('show-commits', commitInfo);
      },

      _humanDiffDate: function (commits, b) {
        return sk.human.diffDate(commits[b].commit_time * 1000);
      },

      _hasValue: function (value) {
        return value && value.freq && value.freq.length > 0;
      },

      _author: function (commits, b) {
        return commits[b].author;
      }
    });
  </script>
</dom-module>