res/imp/triage-sk.html

  <!-- The <triage-sk> custom element declaration.
  
  A custom element that allows toggling between the three
  states of a gold digest, positive, negative, and untriaged.
  For example:
  
              <triage-sk filter vert value=positive></triage-sk>
  
  Will display the three buttons vertically, with filter icons also
  present in the buttons, and the positive button will be depressed.
  
    Attributes:
      value  - A string with a value of "positive", "negative", or "untriaged".
      vert   - If present then the buttons should be laid out vertically,
               otherwise they are horizontal.
      filter - If present then filter icons are also shown in the button.
  
    Events:
      change - A change event is generated when the value changes. The value
         is also contained in event at e.detail.
  
    Methods:
  -->
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout.html">

<dom-module id="triage-sk">
  <template>
    <style>
        .horizontalLayout {
          @apply(--layout-horizontal);
        };

        .verticalLayout {
          @apply(--layout-vertical);
        };

        #positive {
          color: #1B9E77;
        }

        #negative {
          color: #E7298A;
        }

        #untriaged {
          color: #A6761D;
        }

        paper-button {
          min-width: 2em;
          margin: 5px;
          background: #eee;
        }

        #positive[raised],
        #negative[raised],
        #untriaged[raised] {
          color: #bbb;
          background: #fff;
        }

        #positive:hover,
        #negative:hover,
        #untriaged:hover,
        #positive[raised]:hover,
        #negative[raised]:hover,
        #untriaged[raised]:hover {
          background: #ddd;
        }
    </style>
    <div class$="{{_computeLayoutClass(vert)}}">
      <paper-button on-click="_handleClick" id="positive">
        <iron-icon icon="check-circle"></iron-icon>
        <template is="dom-if" if="{{filter}}">
          <iron-icon icon="filter-list"></iron-icon>
        </template>
      </paper-button>
      <paper-button on-click="_handleClick" id="negative" raised="">
        <iron-icon icon="cancel"> </iron-icon>
        <template is="dom-if" if="{{filter}}">
          <iron-icon icon="filter-list"></iron-icon>
        </template>
      </paper-button>
      <paper-button on-click="_handleClick" id="untriaged" raised="">
        <iron-icon icon="help"></iron-icon>
        <template is="dom-if" if="{{filter}}">
          <iron-icon icon="filter-list"></iron-icon>
        </template>
      </paper-button>
    </div>
  </template>
  <script>
    Polymer({
      is: 'triage-sk',

      properties: {
        filter: {
          type: Boolean,
          value: false,
          notify: true
        },

        _buttons: {
          value: function() { return []; }
        },

        value: {
          type: String,
          value: 'untriaged',
          notify: true,
          observer: '_valueChanged',
          reflectToAttribute: true
        },

        vert: {
          type: Boolean,
          value: false,
          notify: true
        },
      },
      
      ready: function () {
        this._buttons = [
          this.$.positive,
          this.$.negative,
          this.$.untriaged
        ];
        this._valueChanged();
      },

      _computeLayoutClass: function(vert) {
        return (vert) ? 'verticalLayout':'horizontalLayout'; 
      }, 

      _handleClick: function(e) {
        var target = e.target;
        while (target.localName !== 'paper-button') {
          target = target.parentElement;
        }
        this.value = target.id;
        this.fire('change', this.value);
      },

      _valueChanged: function () {
        var value = this.value;
        this._buttons.forEach(function (b) {
          if (b.id != value) {
            Polymer.dom(b).setAttribute('raised', '');
          } else {
            Polymer.dom(b).removeAttribute('raised');
          }
        });
      }
    });
  </script>
</dom-module>