polymate-demo-controllers.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="./polymate-behavior.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-icon-button/paper-icon-button-light.html">

<dom-module id="polymate-demo-controllers">
  <template>
    <style>
      :host {
        display: block;
        font-size: 12px;
      }

      .basic,
      #controllers {
        display: flex;
      }
      
      #controllers {
        margin-bottom: 20px;
      }

      .caption {
        padding-left: 5px;
        color: #a0a0a0;
      }

      .speed-container {
        text-align: left;
        padding-left: 10px;
      }
    </style>
    <hr>
    <div id="controllers">
      <div class="speed-container">Speed: <span id="speedValue" class="caption"></span>
        <paper-slider id="speed" value="1" pin max="7" snaps step=".001"></paper-slider>
      </div>
      <div class="basic">
        <paper-button raised id="stop" on-click="_stop">Stop</paper-button>
        <paper-button raised id="playPause" on-click="_togglePlayPause"><span>[[_playPause]]</span></paper-button>
        <paper-button raised id="reverseDirection" on-click="reverseDirection">Reverse Direction</paper-button>
      </div>
    </div>
    <hr>
  </template>

  <script>
    /**
     * `polymate-demo`
     *  
     * demo helper for polymate-view
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PolymerDemoControllers extends PolymateBehavior(Polymer.Element) {
      static get is() { return 'polymate-demo-controllers'; }
      static get properties() {
        return {
          /**
           * @desc animation object from polymate view
           * @type {Object}
           */
          anim: Object,
          /**
           * @desc play or pause
           * @type {String}
           */
          _playPause: String
        };
      }

      ready() {
        super.ready();
        let controller = this;

        window.addEventListener('WebComponentsReady', function() {
          if (!controller.anim) return;
          if (controller.anim.isPaused) controller._disableStopAndReverse(controller);
          controller._playPause = controller.anim.autoplay ? 'Pause' : 'Play';
          controller.$.speed.addEventListener('value-change', function() {
            controller.$.speedValue.textContent = controller.$.speed.value + 'x';
            controller.anim.setSpeed(controller.$.speed.value);
          });
        });
      }

      /**
       * @desc stop animation
       * @return {Void}
       */
       _stop() {
        this.stop();
        this._playPause = 'Play';
        this._disableStopAndReverse(this);
      }

      /**
       * @desc disable stop and reverse
       * @param {Object} element
       * @param {Boolean} enable
       * @return {Void}
       */
      _disableStopAndReverse(element, enable) {
        element.$.stop.disabled = enable ? false : true;
        element.$.reverseDirection.disabled = enable ? false : true;
      }

      /**
       * @desc toggle play/pause animation
       * @return {Void}
       */
      _togglePlayPause() {
        this._disableStopAndReverse(this, true);
        if (this.anim.isPaused) {
          this.play();
          this._playPause = 'Pause';
        } else {
          this.pause();
          this._playPause = 'Play';
        }
      }
    }

    window.customElements.define(PolymerDemoControllers.is, PolymerDemoControllers);
  </script>
</dom-module>