| <!-- 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 icon="av:skip-previous" id=begin on-tap="_begin"></paper-icon-button> |
| <paper-icon-button icon="icons:chevron-left" id=prev on-tap="_prev"></paper-icon-button> |
| <paper-icon-button icon="av:play-arrow" id=playpause on-tap="_togglePlay"></paper-icon-button> |
| <paper-icon-button icon="icons:chevron-right" id=next on-tap="_next"></paper-icon-button> |
| <paper-icon-button 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> |