golden/res/imp/ignore.html

<!-- The <ignore-summary-sk> custom element declaration.

Displays a summary of an ignore rule.

  Attributes:
  Events:
    'delete'
       The element will produce a 'deleted' event when the delete button is
       pressed. The id of the deleted ignore rule will be included in
       e.detail.

    'edit'
       The element will produce an 'edit' event when the edit button is
       pressed. The state of the ignore rule will be included in e.detail.
  Methods:
-->
<polymer-element name="ignore-summary-sk">
  <template>
    <style type="text/css" media="screen">
      div,
      pre {
        display: inline-block;
        margin: 0 0.5em 0 0;
        font-family: monospace;
      }
      #name {
        width: 15em;
        color: #D95F02;
      }
      #query {
        width: 20em;
        overflow: auto;
        color: #1B9E77;
        word-wrap: break-word;
        vertical-align: middle;
      }
      #note {
        width: 20em;
        overflow: auto;
        color: #66A61E;
        word-wrap: break-word;
        vertical-align: middle;
      }
      #expires {
        width: 6em;
        color: #7570B3;
      }
      #count {
        width: 6em;
        color: #A6761D;
      }
      paper-button {
        min-width: 2em;
      }
    </style>

    <div id=name>{{value.name}}</div>
    <div id=expires>{{value.expires | humanDiffDate}}</div>
    <pre id=query><a href="/?include=true&query={{value.query | encoded}}">{{value.query | splitAmp }}</a></pre>
    <pre id=note>{{value.note}}</pre>
    <div id=count>{{value.count}}</div>
    <paper-button id=edit title="Edit"><core-icon icon=create><core-icon></paper-button>
    <paper-button id=delete title="Delete"><core-icon icon=delete><core-icon></paper-button>
  </template>
  <script>
    (function() {
      Polymer({
        publish: {
          value: {
            value: {},
            reflect: true
          }
        },

        ready: function() {
          var that = this;
          this.$.delete.addEventListener('click', function() {
            that.dispatchEvent(new CustomEvent('delete', {detail: that.value.id, bubbles: true}));
          });
          this.$.edit.addEventListener('click', function() {
            that.dispatchEvent(new CustomEvent('edit', {detail: that.value, bubbles: true}));
          });
        },

        splitAmp: function(s) {
          var re = new RegExp('&', 'g');
          if (s) {
            return s.replace(re, '\n');
          }
        },

        humanDiffDate: function(s) {
          var ms = Date.parse(s);
          return (ms < Date.now()) ? "Expired" : sk.human.diffDate(s);
        },

        encoded: function(s) {
          return encodeURIComponent(s);
        },

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