From be7a1d5217e7782b1b5d942fc5e9fefc830dd128 Mon Sep 17 00:00:00 2001 From: Zeno Rocha <hi@zenorocha.com> Date: Thu, 28 May 2015 07:23:00 -0700 Subject: [PATCH] Upgrades Polymer to v1.0.0 --- bower.json | 4 +-- dist/voice-player.html | 64 +++++++++++++++++++++---------------- dist/voice-recognition.html | 63 ++++++++++++++++++++---------------- index.html | 8 ++--- src/voice-player.html | 42 ++++++++++++------------ src/voice-recognition.html | 42 ++++++++++++------------ 6 files changed, 122 insertions(+), 101 deletions(-) diff --git a/bower.json b/bower.json index c9d4415..bb56f0e 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "voice-elements", - "version": "0.2.0", + "version": "1.0.0", "description": "Web Speech API wrapper that allows you to do voice recognition (speech to text) and speech synthesis (text to speech) using Polymer.", "authors": [ "Zeno Rocha <hi@zenorocha.com>" @@ -23,6 +23,6 @@ "bower_components" ], "dependencies": { - "polymer": "Polymer/polymer#^0.9.0" + "polymer": "Polymer/polymer#^1.0.0" } } diff --git a/dist/voice-player.html b/dist/voice-player.html index cb5eec6..eee5985 100644 --- a/dist/voice-player.html +++ b/dist/voice-player.html @@ -1,14 +1,28 @@ -<!-- Import Polymer --> <link rel="import" href="../../polymer/polymer.html"> -<!-- Define your custom element --> -<polymer-element name="voice-player" attributes="autoplay accent text"> <script> - Polymer('voice-player', { + Polymer({ + is: 'voice-player', + /* -- Attributes ------------------------------------------------ */ - autoplay: false, - accent: 'en-US', - text: 'You are awesome', + properties: { + autoplay: { + type: Boolean, + value: false + }, + accent: { + type: String, + value: 'en-US', + observer: '_accentChanged', + notify: true + }, + text: { + type: String, + value: 'You are awesome', + observer: '_textChanged', + notify: true + } + }, /* -- Lifecycle ------------------------------------------------- */ created: function() { @@ -20,32 +34,35 @@ } }, ready: function() { - // Initialize attributes - this.textChanged(); - this.accentChanged(); + this._textChanged(); + this._accentChanged(); // Initialize event listeners - [ - 'start', - 'end', - 'error', - 'pause', - 'resume' - ].forEach(this.propagateEvent.bind(this)); + var events = ['start', 'end', 'error', 'pause', 'resume']; + events.forEach(this._propagateEvent.bind(this)); if (this.autoplay) { this.speak(); } }, - accentChanged: function() { + + /* -- Private Methods ------------------------------------------- */ + _accentChanged: function() { this.speech.lang = this.accent; }, - textChanged: function() { + _textChanged: function() { this.speech.text = this.text; }, + _propagateEvent: function (eventName) { + var that = this; - /* -- Methods --------------------------------------------------- */ + this.speech.addEventListener(eventName, function(e) { + that.fire(eventName, e); + }); + }, + + /* -- Public Methods -------------------------------------------- */ speak: function() { window.speechSynthesis.speak(this.speech); }, @@ -57,13 +74,6 @@ }, resume: function() { window.speechSynthesis.resume(); - }, - - /* -- Events ---------------------------------------------------- */ - propagateEvent: function (eventName) { - this.speech.addEventListener(eventName, this.fire.bind(this, eventName)); } }); </script> - -</polymer-element> diff --git a/dist/voice-recognition.html b/dist/voice-recognition.html index 3cd9b4f..4896c2e 100644 --- a/dist/voice-recognition.html +++ b/dist/voice-recognition.html @@ -1,13 +1,20 @@ -<!-- Import Polymer --> <link rel="import" href="../../polymer/polymer.html"> -<!-- Define your custom element --> -<polymer-element name="voice-recognition" attributes="continuous text"> <script> - Polymer('voice-recognition', { + Polymer({ + is: 'voice-recognition', + /* -- Attributes ------------------------------------------------ */ - continuous: true, - text: '', + properties: { + continuous: { + type: Boolean, + value: true + }, + text: { + type: String, + value: '' + } + }, /* -- Lifecycle ------------------------------------------------- */ created: function() { @@ -29,30 +36,21 @@ this.recognition.interimResults = false; // Initialize event listeners - [ - 'start', - 'error', - 'end' - ].forEach(this.propagateEvent.bind(this)); - this.bindResult(); - }, + var events = ['start', 'end', 'error']; + events.forEach(this._propagateEvent.bind(this)); - /* -- Methods --------------------------------------------------- */ - start: function() { - this.recognition.start(); - }, - stop: function() { - this.recognition.stop(); - }, - abort: function() { - this.recognition.abort(); + this._bindResult(); }, - /* -- Events ---------------------------------------------------- */ - propagateEvent: function (eventName) { - this.recognition.addEventListener(eventName, this.fire.bind(this, eventName)); + /* -- Private Methods ------------------------------------------- */ + _propagateEvent: function (eventName) { + var that = this; + + this.recognition.addEventListener(eventName, function(e) { + that.fire(eventName, e); + }); }, - bindResult: function() { + _bindResult: function() { var that = this; this.recognition.addEventListener('result', function(e) { @@ -63,8 +61,17 @@ that.fire('result', e); }); + }, + + /* -- Public Methods -------------------------------------------- */ + start: function() { + this.recognition.start(); + }, + stop: function() { + this.recognition.stop(); + }, + abort: function() { + this.recognition.abort(); } }); </script> - -</polymer-element> diff --git a/index.html b/index.html index cc8e498..1d9239e 100755 --- a/index.html +++ b/index.html @@ -94,7 +94,7 @@ <h2 class="content-head content-head-ribbon"><voice-player></h2> <voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina (Dame más gasolina!)"></voice-player> <script> - window.addEventListener('polymer-ready', function(e) { + window.addEventListener('WebComponentsReady', function(e) { var form = document.querySelector('#mi-form'), element = document.querySelector('#mi-elemento'); @@ -130,7 +130,7 @@ <h2 class="content-head content-head-ribbon"><voice-player></h2> <voice-player id="player-element" text=""></voice-player> <script> - window.addEventListener('polymer-ready', function(e) { + window.addEventListener('WebComponentsReady', function(e) { var form = document.querySelector('#player-form'), input = document.querySelector('#player-input'), element = document.querySelector('#player-element'); @@ -320,7 +320,7 @@ <h2 class="content-head content-head-ribbon"><voice-recognition></h2> <voice-recognition id="recognition-element"></voice-recognition> <script> - window.addEventListener('polymer-ready', function(e) { + window.addEventListener('WebComponentsReady', function(e) { var form = document.querySelector('#recognition-form'), input = document.querySelector('#recognition-input'), element = document.querySelector('#recognition-element'); @@ -468,7 +468,7 @@ <h2 class="content-head is-center">Usage</h2> <div class="section pure-g-r center"> <div class="pure-u-1"> <h3 class="content-subhead">1. Import Web Components' polyfill</h3> - <pre><code><script src="bower_components/platform/platform.js"></script></code></pre> + <pre><code><script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script></code></pre> <h3 class="content-subhead">2. Import Custom Element</h3> <pre><code><link rel="import" href="bower_components/voice-elements/dist/voice-player.html"> diff --git a/src/voice-player.html b/src/voice-player.html index 437db10..4bcba00 100755 --- a/src/voice-player.html +++ b/src/voice-player.html @@ -12,11 +12,15 @@ }, accent: { type: String, - value: 'en-US' + value: 'en-US', + observer: '_accentChanged', + notify: true }, text: { type: String, - value: 'You are awesome' + value: 'You are awesome', + observer: '_textChanged', + notify: true } }, @@ -30,32 +34,35 @@ } }, ready: function() { - // Initialize attributes - this.textChanged(); - this.accentChanged(); + this._textChanged(); + this._accentChanged(); // Initialize event listeners - [ - 'start', - 'end', - 'error', - 'pause', - 'resume' - ].forEach(this.propagateEvent.bind(this)); + var events = ['start', 'end', 'error', 'pause', 'resume']; + events.forEach(this._propagateEvent.bind(this)); if (this.autoplay) { this.speak(); } }, - accentChanged: function() { + + /* -- Private Methods ------------------------------------------- */ + _accentChanged: function() { this.speech.lang = this.accent; }, - textChanged: function() { + _textChanged: function() { this.speech.text = this.text; }, + _propagateEvent: function (eventName) { + var that = this; + + this.speech.addEventListener(eventName, function(e) { + that.fire(eventName, e); + }); + }, - /* -- Methods --------------------------------------------------- */ + /* -- Public Methods -------------------------------------------- */ speak: function() { window.speechSynthesis.speak(this.speech); }, @@ -67,11 +74,6 @@ }, resume: function() { window.speechSynthesis.resume(); - }, - - /* -- Events ---------------------------------------------------- */ - propagateEvent: function (eventName) { - this.speech.addEventListener(eventName, this.fire.bind(this, eventName)); } }); </script> diff --git a/src/voice-recognition.html b/src/voice-recognition.html index a912e4c..b37fb4a 100644 --- a/src/voice-recognition.html +++ b/src/voice-recognition.html @@ -36,30 +36,21 @@ this.recognition.interimResults = false; // Initialize event listeners - [ - 'start', - 'error', - 'end' - ].forEach(this.propagateEvent.bind(this)); - this.bindResult(); - }, + var events = ['start', 'end', 'error']; + events.forEach(this._propagateEvent.bind(this)); - /* -- Methods --------------------------------------------------- */ - start: function() { - this.recognition.start(); - }, - stop: function() { - this.recognition.stop(); - }, - abort: function() { - this.recognition.abort(); + this._bindResult(); }, - /* -- Events ---------------------------------------------------- */ - propagateEvent: function (eventName) { - this.recognition.addEventListener(eventName, this.fire.bind(this, eventName)); + /* -- Private Methods ------------------------------------------- */ + _propagateEvent: function (eventName) { + var that = this; + + this.recognition.addEventListener(eventName, function(e) { + that.fire(eventName, e); + }); }, - bindResult: function() { + _bindResult: function() { var that = this; this.recognition.addEventListener('result', function(e) { @@ -70,6 +61,17 @@ that.fire('result', e); }); + }, + + /* -- Public Methods -------------------------------------------- */ + start: function() { + this.recognition.start(); + }, + stop: function() { + this.recognition.stop(); + }, + abort: function() { + this.recognition.abort(); } }); </script>