res/imp/play.html

<!-- The <play-sk> custom element declaration.

  Allows moving through a series of operations, i.e. play, pause, step, etc.

  Attributes:
      size - The number of operations to be played.
             Events will be indexed from [0, size-1].

      item - The index of the current operation.

      mode - Either "play" or "pause".

  Events:
      moveto - The index of the operation to be executed is available
          in detail.item.

      mode-changed-manually - Event generated when the mode changes by the
          user pressing a button. The new mode is in e.detail.

  Methods:
      movedTo(item) - Called when the action has moved to item.
          Should be called in response to the control generating
          a 'moveto' event. Important so that if the play-sk
          control is in 'play' mode it can generate a new event
          to moveto the next item.

      prePlayCallback(cb) - A callback function to be called immediately
          after the user presses "play". If the cb returns false then play
          does not proceed.
-->

<link rel=import href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
<link rel=import href="/res/imp/bower_components/iron-icons/av-icons.html">
<link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html">

<dom-module id="play-sk">
  <template>
    <paper-icon-button title="Go to first" icon="av:skip-previous" id=begin on-tap="_begin"></paper-icon-button>
    <paper-icon-button title="Step back one" icon="icons:chevron-left" id=prev on-tap="_prev"></paper-icon-button>
    <paper-icon-button title="Play/Pause" icon="av:play-arrow" id=playpause on-tap="_togglePlay"></paper-icon-button>
    <paper-icon-button title="Step forward one" icon="icons:chevron-right" id=next on-tap="_next"></paper-icon-button>
    <paper-icon-button title="Go to last" icon="av:skip-next" id=end on-tap="_end"></paper-icon-button>
  </template>
</dom-module>

<script>
  (function () {
    var modeToIcon = {
      "pause": "av:play-arrow",
      "play": "av:pause",
    };

    Polymer({
      is: "play-sk",

      properties: {
        mode: {
          type: String,
          value: "pause",
          reflectToAttribute: true,
          observer: "_modeChange",
        },
        item: {
          type: Number,
          value: 0,
          reflectToAttribute: true,
        },
        size: {
          type: Number,
          value: 0,
          reflectToAttribute: true,
        },
      },

      ready: function() {
        this._cb = null;
      },

      prePlayCallback: function(cb) {
        this._cb = cb;
      },

      _togglePlay: function() {
        if (this._cb && !this._cb()) {
          return;
        }
        this.mode = (this.mode == "play") ? "pause" : "play";
        this.dispatchEvent(new CustomEvent('mode-changed-manually', { mode: this.mode, bubbles: true }));
      },

      _modeChange: function() {
        this.$.playpause.icon = modeToIcon[this.mode];
        if (this.mode == "play") {
          this._triggerNext();
        }
        this._setDisabled(this.mode == "play");
      },

      _setDisabled: function(b) {
          this.$.begin.disabled = b;
          this.$.end.disabled = b;
          this.$.next.disabled = b;
          this.$.prev.disabled = b;
      },

      _triggerEvent: function() {
        this.dispatchEvent(new CustomEvent('moveto', {detail: {item: this.item}}));
      },

      _triggerNext: function() {
        this.item = (this.item+1) % this.size;
        this._triggerEvent();
      },

      _begin: function() {
        this.item = 0;
        this._triggerEvent();
      },

      _end: function() {
        this.item = this.size-1;
        this._triggerEvent();
      },

      _prev: function() {
        this.item -= 1;
        if (this.item < 0) {
          this.item += this.size;
        }
        this._triggerEvent();
      },

      _next: function() {
        this._triggerNext();
      },

      movedTo: function(item) {
        this.item = item;
        if (this.mode == "play") {
          this._triggerNext();
        }
      },

    });
  })();
</script>