asq-stars.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../asq-base/asq-base.html">
<!--
`asq-stars` is used inside the `asq-exercise`, representing the confidence level of the students.

##### Example
    <asq-stars name="my-stars"></asq-stars>


@element asq-stars
@group ASQ Elements
-->
<style>
@font-face {
  font-family: 'fontello';
  src: url('./font/fontello.eot');
  src: url('./font/fontello.eot') format('embedded-opentype'),
       url('./font/fontello.woff') format('woff'),
       url('./font/fontello.ttf') format('truetype'),
       url('./font/fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
</style>
<dom-module id="asq-stars">
  <link rel="import" type="css" href="./asq-stars.css">
  <template>
    
    <fieldset id="rating" on-tap="onTap">
      <input type="radio" id="star5" name="{{name}}" value="5" disabled$="{{disabled}}"><label class="full" for="star5" title="Excellent - 5 stars"></label>
      <input type="radio" id="star4half" name="{{name}}" value="4.5" disabled$="{{disabled}}"><label class="half" for="star4half" title="Very good - 4.5 stars"></label>
      <input type="radio" id="star4" name="{{name}}" value="4" disabled$="{{disabled}}"><label class="full" for="star4" title="Very good - 4 stars"></label>
      <input type="radio" id="star3half" name="{{name}}" value="3.5" disabled$="{{disabled}}"><label class="half" for="star3half" title="Good - 3.5 stars"></label>
      <input type="radio" id="star3" name="{{name}}" value="3" disabled$="{{disabled}}"><label class="full" for="star3" title="Fine - 3 stars"></label>
      <input type="radio" id="star2half" name="{{name}}" value="2.5" disabled$="{{disabled}}"><label class="half" for="star2half" title="Poor - 2.5 stars"></label>
      <input type="radio" id="star2" name="{{name}}" value="2" disabled$="{{disabled}}"><label class="full" for="star2" title="Poor - 2 stars"></label>
      <input type="radio" id="star1half" name="{{name}}" value="1.5" disabled$="{{disabled}}"><label class="half" for="star1half" title="Very poor - 1.5 stars"></label>
      <input type="radio" id="star1" name="{{name}}" value="1" disabled$="{{disabled}}"><label class="full" for="star1" title="Very poor - 1 star"></label>
      <input type="radio" id="starhalf" name="{{name}}" value="0.5" disabled$="{{disabled}}"><label class="half" for="starhalf" title="terrible - 0.5 stars"></label>
    </fieldset>
  </template>
  <script>
    (function () {
      Polymer({
        is: 'asq-stars',

        behaviors: [ASQ.asqElementBehavior],

        properties: {
          /**
           * If true, the user cannot interact with this element.
           */
          disabled: {
            type: Boolean,
            value: false,
            notify: true,
            reflectToAttribute: true
          },
          /**
           * `name` attribute used by each `input type="radio"` that represents a star. It is needed to group them.
           */
          name: {
            type: String,
            value: '',
            notify: true,
            reflectToAttribute: true
          },
          /**
           * A number from reflecting the stars. It should be between 0 and 5. It doesn't have to a multiple of 0.5
           */
          rating: {
            type: Number,
            value: 0,
            notify: true,
            observer: 'ratingChanged',
            reflectToAttribute: true
          }
        },

        ratingChanged: function (newRating, oldRating) {
          var newRating = parseFloat(newRating);
          if (newRating < 0 || newRating > 5) {
            this.rating = oldRating;
            return;
          }
          if (newRating < 0 || newRating > 5) {
            console.log('`rating` should be a number between 0 and 5');
            this.rating = oldRating;
            return;
          }
          this.setStarsFromRating(this.rating);
        },
        onTap: function (event, detail, sender) {
          if (this.disabled)
            return;
          this.rating = this.getRatingFromStars();
        },
        /**
         * Returns the sum of all `:checked` stars (0.5 for each star).
         * 
         * @method getRatingFromStars
         * @return {number} The sum of all :checked stars (0.5 for each star).
         */
        getRatingFromStars: function () {
          var stars = Polymer.dom(this.$.rating).querySelectorAll('input[type=radio]');
          for (var i = 0; i < stars.length; i++) {
            var star = stars[i];
            if (star.checked == true) {
              return parseFloat(star.value);
            }
          }
          return 0;
        },
        /**
         * Sets `number` :checked stars (with half a star interval
         * 
         * @method setStarsFromRating
         * @param {number} rating How many stars to set
         * 
         */
        setStarsFromRating: function (rating) {
          var stars = Polymer.dom(this.$.rating).querySelectorAll('input[type=radio]').reverse();
          for (var i = 0; i < stars.length; i++) {
            stars[i].checked = false;
          }
          //we have halfs so duplicate
          rating = Math.floor(2 * rating);
          rating = rating > stars.length ? stars.length : rating;
          for (var i = 0; i < rating; i++) {
            stars[i].checked = true;
          }
        }
      });
    }());
  </script>
</dom-module>