cw-vote.html

<link rel="import" href="../polymer/polymer.html">

<!--
Up/down-voting widget a la StackOverflow.

##### Example

    <cw-vote value="6" userValue="1"></cw-vote>

@element cw-vote
@homepage http://cletusw.github.io/cw-vote
@demo demo/index.html
-->
<dom-module id="cw-vote">
  <style>
    :host {
      color: #555;
      display: block;
      font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
      font-size: 24px;
    }

    svg {
      display: block;
      fill: #777;
      height: 16px;
      overflow: hidden;
      width: 32px;
    }

    svg.highlight {
      fill: #ff8c00;
    }

    div {
      padding: 5px 0;
      text-align: center;
      width: 32px;
    }
  </style>
  <template>

    <svg viewBox="0 0 10 5" on-tap="voteUp" class$="{{getHighlightClass(userValue,'up')}}">
      <polygon points="0,5 5,0 10,5"></polygon>
    </svg>
    <div on-tap="voteCancel">{{value}}</div>
    <svg viewBox="0 0 10 5" on-tap="voteDown" class$="{{getHighlightClass(userValue, 'down')}}">
      <polygon points="0,0 5,5 10,0 "></polygon>
    </svg>
  </template>

  <script>

    Polymer({
      is: 'cw-vote',

      properties: {
        /**
         * 1 if the user has upvoted this item,
         * -1 if the user has downvoted this item,
         * 0 otherwise
         *
         * @attribute userValue
         * @type number
         */
        userValue: {
          type: Number,
          value: 0
        },

        /**
         * The sum of all users' votes.
         *
         * @attribute value
         * @type number
         */
        value: {
          type: Number,
          value: 0
        }
      },

      /**
       * The `cw-vote-cancel` event is fired whenever the user cancels their vote.
       *
       * @event cw-vote-cancel
       */

      /**
       * The `voteCancel` method is called whenever the user taps the currently displayed value.
       *
       * @method voteCancel
       */
      voteCancel: function() {
        if (this.userValue !== 0) {
          this.value -= this.userValue;
          this.userValue = 0;
          this.fire('cw-vote-cancel', { value: this.value });
        }
      },

      /**
       * The `cw-vote-down` event is fired whenever the user switches their vote to a downvote.
       *
       * @event cw-vote-down
       */

      /**
       * The `voteDown` method is called whenever the user taps the down arrow.
       *
       * @method voteDown
       */
      voteDown: function() {
        if (this.userValue !== -1) {
          this.value -= this.userValue;
          this.userValue = -1;
          this.value--;
          this.fire('cw-vote-down', { value: this.value });
        }
      },

      /**
       * The `cw-vote-up` event is fired whenever the user switches their vote to an upvote.
       *
       * @event cw-vote-up
       */

      /**
       * The `voteUp` method is called whenever the user taps the up arrow.
       *
       * @method voteUp
       */
      voteUp: function() {
        if (this.userValue !== 1) {
          this.value -= this.userValue;
          this.userValue = 1;
          this.value++;
          this.fire('cw-vote-up', { value: this.value });
        }
      },

      getHighlightClass: function (userValue, arrow) {
        switch (arrow) {
          case 'up': return userValue === 1 ? 'highlight':'';
          case 'down': return userValue === -1 ? 'highlight':'';
        }
      }
    });
  </script>
</dom-module>