l2t-paper-rating.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="../iron-icons/iron-icons.html">

<!--
A polymer element to display &#34;star&#34; ratings in a paper style
### Examples:

    <l2t-paper-rating></l2t-paper-rating>

Use `rating` and `total` to specify current rating and maximum rating
respectively.  Defaults are 1 and 5.

    <l2t-paper-rating rating="7" total="10"></l2t-paper-rating>

### A11y/ARIA
For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the aria-label or aria-labelledby properties directly.

### Styling
The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--rating-icon-color` | The color of the icons | `--primary-text-color`
`--rating-icon-size` | The size of the icon (square) | `28px`
`--rating-icon-padding` | The size of the padding between icons | `2px`
`--rating-ink-color` | The color of the ripple on icon tap | `--primary-text-color`
`--rating-unselected-opacity` | The opacity of stars 'non-active' | `0.4`

@element l2t-paper-rating
@demo demo/index.html
-->

<dom-module id="l2t-paper-rating">
  <template>
    <style>
      :host {
        display: inline-block;
        --paper-icon-button-ink-color: var(--rating-ink-color, --primary-text-color)
      }
      :host([hidden]) {
        display: none;
      }
      :host([readonly]):focus,
      :host([readonly]) .stars:focus {
        outline: 0;
      }
      .stars {
        display: inline-flex;
        position: relative;
      }
      .stars:hover .icon-container:not([disabled]),
      .stars .icon-container.active,
      .stars .icon-container:not([disabled]):hover,
      .stars .icon-container:not([disabled]):focus {
        opacity: 1
      }
      .stars .icon-container {
        color: var(--rating-icon-color, --primary-text-color);
        opacity: var(--rating-unselected-opacity, .4);
        width: calc(var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2);
        height: calc(var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2);
        padding: var(--rating-icon-padding,2px);
        will-change: transform;
        transition: transform .2s cubic-bezier(.51, .92, .24, 1)
      }
      .stars .icon-container:not([disabled]):hover {
        transform: scale(1.2)
      }
      .stars .icon-container[disabled] {
        cursor: default
      }
      .stars .icon-container:not([disabled]):hover~.icon-container {
        opacity: var(--rating-unselected-opacity, 0.4)
      }
      .stars .stars_half__container {
        position: absolute;
        display: inline-flex;
        left: 0;
      }
      .stars .stars_half__container .stars_half__spacer {
        width: calc(var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2);
        height: calc(var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2);
        pointer-events: none;
      }
      .stars .stars_half__container .stars_half {
        width: calc((var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2)/2);
        height: calc(var(--rating-icon-size,28px) + var(--rating-icon-padding,2px)*2);
        overflow: hidden;
        pointer-events: none;
      }
      .stars .stars_half iron-icon {
        color: var(--rating-icon-color, --primary-text-color);
        opacity: 1;
        width: var(--rating-icon-size,28px);
        height: var(--rating-icon-size,28px);
        padding: var(--rating-icon-padding,2px);
      }
    </style>
    <div class="stars" id="stars">
      <template is="dom-repeat" items="[[_convertArray(total)]]">
        <paper-icon-button icon="[[icon]]" on-tap="_tapHandler"
          disabled$="[[readonly]]"
          class$="[[_compareVals(rating,item)]]"
          value$="[[item]]">
        </paper-icon-button>
      </template>
      <template is="dom-if" if="[[readonly]]">
        <div class="stars_half__container">
          <template is="dom-repeat" items="[[_convertArray(rating)]]">
            <div class="stars_half__spacer"></div>
          </template>
          <div class="stars_half" hidden$="[[_isInt(rating)]]">
            <iron-icon icon="[[icon]]"></iron-icon>
          </div>
        </div>
      </template>
    </div>
  </template>

  <script>
    class L2tPaperRating extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {
      static get is() { return 'l2t-paper-rating'; }
      static get properties() {
        return {
          /**
          * keyEventTarget: keyEventTarget
          * @type {Object}
          */
          keyEventTarget: {
            type: Object,
            value: document
          },
          /**
          * icon: the icon to use (iron-icons)
          * @type {String}
          */
          icon: {
            type: String,
            value: "star"
          },
          /**
          * rating: numbers of star selected (reflectToAttribute)
          */
          rating: {
            type: Number,
            value: 0,
            reflectToAttribute: true,
            notify: true,
            observer: "_ratingChanged"
          },
          /**
          * readonly: can the rate be modified
          */
          readonly: {
            type: Boolean,
            value: false
          },
          /**
          * total: maximum number of stars selectable
          */
          total: {
            type: Number,
            value: 5,
            reflectToAttribute: true,
            observer: "_setAriaAttr"
          }
        };
      }
      get keyBindings() {
        return {
          'left': '_ratingDecrease',
          'down': '_ratingDecrease',
          'right': '_ratingIncrease',
          'up': '_ratingIncrease',
          'pageup': '_ratingMax',
          'pagedown': '_ratingMin'
        };
      }
      /**
      * _compareVals: return active class for initial state
      */
      _compareVals(r,i) {
        if (this.readonly && !this._isInt(this.rating)) {
          if (Math.ceil(r) > i) {
            return "active icon-container"
          } else {
            return "icon-container"
          }
        } else {
          if (r >= i) {
            return "active icon-container"
          } else {
            return "icon-container"
          }
        }
      }
      /**
      * _convertArray: converts total to array for dom repeat from number
      */
      _convertArray(n) {
        let array = [];
        for(let i = 0; i < Math.floor(n); i++){
          array.push(i+1);
        }
        return array;
      }
      /**
      * _elementInactive: return true if element is inactive
      */
      _elementInactive() {
        return this !== document.activeElement;
      }
      /**
      * _isInt: returns true if value is not divisible by 1
      */
      _isInt(n) {
        return n%1?false:true;
      }
      /**
      * _ratingChanged: prevents rating being set outside min and max
      */
      _ratingChanged() {
        this._setAriaAttr();

        if (this.rating >= 1 && this.rating <= this.total)
          return;

        this.rating = this.rating >= this.total ? this.total : this.rating <= 1 ? 1 : this.rating;
      }
      /**
      * _ratingDecrease: decrease the rating by 1
      */
      _ratingDecrease() {
        if(this.readonly || this._elementInactive())
          return;

        this.rating--;
        this._setFocus();
      }
      /**
      * _ratingIncrease: increase the rating by 1
      */
      _ratingIncrease() {
        if(this.readonly || this._elementInactive())
          return;

        this.rating++;
        this._setFocus();
      }
      /**
      * _ratingMax: set the rating to max
      */
      _ratingMax() {
        if(this.readonly || this._elementInactive())
          return;
          
        this.rating = this.total;
        this._setFocus();
      }
      /**
      * _ratingMin: set the rating to 1
      */
      _ratingMin() {
        if(this.readonly || this._elementInactive())
          return;
          
        this.rating = 1;
        this._setFocus();
      }
      /**
      * _tapHandler: sets rating on tap
      */
      _tapHandler(e) {
        if(this.readonly)
          return

        if(!e.path){
          this.rating = e.currentTarget.getAttribute("value");
        } else {
           this.rating = e.path.find(function(e){
            if(e.classList) {
              return e.classList.contains("icon-container")
            } else {
              return false
            }
          }).getAttribute("value");
        }
      }
      /**
      * _setAriaAttr: update the aria values
      */
      _setAriaAttr() {
        this.setAttribute('aria-valuemax', this.total);
        this.setAttribute('aria-valuenow', this.rating);
      }
      /**
      * _setFocus: if star has focus change focus to host
      */
      _setFocus() {
        let allStars = this.$.stars.querySelectorAll('paper-icon-button')
        
        for (let star of allStars) {
          if (star.focused)
            this.focus();
        }
      }
      ready() {
        super.ready();
        this._ensureAttribute('role', 'slider');
        this._ensureAttribute('tabindex', 0);
        this._ensureAttribute('aria-valuemin', 1);
        this._ensureAttribute('aria-valuemax', this.total);
        this._ensureAttribute('aria-valuenow', this.rating);
        this._setAriaAttr();
      }
    }
    window.customElements.define(L2tPaperRating.is, L2tPaperRating);
  </script>
</dom-module>