Upgrades Polymer to v1.0.0

zenorocha · May 28, 2015 · be7a1d5 · be7a1d5
1 parent 8cf368b
commit be7a1d5
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 101 deletions.
diff --git 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 <[email protected]>"
@@ -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
@@ -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
@@ -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
@@ -94,7 +94,7 @@ <h2 class="content-head content-head-ribbon">&lt;voice-player&gt;</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">&lt;voice-player&gt;</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">&lt;voice-recognition&gt;</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>&lt;script src="bower_components/platform/platform.js"&gt;&lt;/script&gt;</code></pre>
+                    <pre><code>&lt;script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;</code></pre>
 
                     <h3 class="content-subhead">2. Import Custom Element</h3>
                     <pre><code>&lt;link rel="import" href="bower_components/voice-elements/dist/voice-player.html"&gt;

diff --git 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
@@ -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>