Bug #2/eeejay#4, move remaining JS from HTML file to event-handlers JS

* plus, tidy up SVG
* small CSS style edits

include/event-handlers.js

@@ -5,6 +5,11 @@ const SpeakForm = document.querySelector('#speak-form');
 const ResumeForm = document.querySelector('#resume-form');
 const CancelForm = document.querySelector('#cancel-form');
 
+const PitchResetBtn = document.querySelector('.pitch-field button');
+const RateResetBtn = document.querySelector('.rate-field button');
+const VolumeResetBtn = document.querySelector('.volume-field button');
+const VoiceResetBtn = document.querySelector('.voice-field button');
+
 SpeakForm.addEventListener('submit', ev => {
   ev.preventDefault();
 
@@ -32,3 +37,28 @@ CancelForm.addEventListener('reset', ev => {
 
   stop();
 });
+
+// --------------------------------------------
+
+PitchResetBtn.addEventListener('click', ev => {
+  document.getElementById('pitch').value = 0.5;
+});
+
+RateResetBtn.addEventListener('click', ev => {
+  document.getElementById('rate').value = 0;
+});
+
+VolumeResetBtn.addEventListener('click', ev => {
+  document.getElementById('volume').value = 1;
+});
+
+VoiceResetBtn.addEventListener('click', ev => {
+  document.getElementById('default-voice').selected = true;
+});
+
+/*
+function resetPitch () { }
+function resetRate () { }
+function resetVolume () { }
+function resetVoice () { }
+*/

include/index.js

@@ -1,6 +1,4 @@
 
-/* eslint no-unused-vars: ["error", { "varsIgnorePattern": "stop|playpause|speak" }] */
-
 export { stop, playpause, speak };
 
 const { speechSynthesis, SpeechSynthesisUtterance } = window;
@@ -25,6 +23,7 @@ function populateVoiceList () {
 
   const selectElm = document.querySelector('#voice');
   selectElm.innerHTML = '';
+
   for (let i = 0; i < voices.length; i++) {
     if (langRex && !langRex.test(voices[i].lang)) { continue; }
 
@@ -39,29 +38,33 @@ function populateVoiceList () {
 }
 
 populateVoiceList();
-if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; }
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
 
 function stop () {
   speechSynthesis.cancel();
 }
 
 function playpause () {
-  if (speechSynthesis.paused) { speechSynthesis.resume(); } else { speechSynthesis.pause(); }
+  if (speechSynthesis.paused) {
+    speechSynthesis.resume();
+  } else { speechSynthesis.pause(); }
 }
 
 function speak () {
   speechtext = texttospeak.value;
   firstBoundary = true;
   textbeingspoken.textContent = speechtext;
 
-  const utterance = new SpeechSynthesisUtterance(
-    document.getElementById('texttospeak').value);
+  const utterance = new SpeechSynthesisUtterance(speechtext);
   const voiceIdx = document.getElementById('voice').selectedIndex;
   utterance.voice = voicesFiltered[voiceIdx];
   utterance.volume = document.getElementById('volume').value;
   utterance.pitch = document.getElementById('pitch').value;
   const rate = document.getElementById('rate').value;
   utterance.rate = Math.pow(Math.abs(rate) + 1, rate < 0 ? -1 : 1);
+
   utterance.addEventListener('start', function () {
     marker.classList.remove('animate');
     document.body.classList.add('speaking');

include/style.css

@@ -92,14 +92,13 @@ input[type=range]::-moz-range-track {
 
 #textarea {
   width: 100%;
-  height: 8rem;
+  height: 8.5rem;
   display: block;
   margin-bottom: 1rem;
-  border-radius: 5px;
+  border-radius: .3rem; /* Was: 5px */
   position: relative;
   background-color: #fff;
   transition: background-color 100ms ease;
-  -webkit-transition: background-color 100ms ease;
 }
 
 .speaking #textarea {
@@ -118,19 +117,18 @@ input[type=range]::-moz-range-track {
   margin: .5rem;
   padding: 0;
   white-space: pre-wrap;
-  line-height: 1.3rem;
+  line-height: 1.4rem;
   background-color: transparent;
   font-size: 1rem; /* Was: 12px */
   font-family: monospace;
 }
 
 #textbeingspoken {
-  color: #aaa;
+  color: #ccc; /* Was: #aaa */
   visibility: hidden;
   opacity: 0;
   overflow: auto;
   transition: all 100ms ease;
-  -webkit-transition: all 100ms ease;
  }
 
  .speaking #textbeingspoken {
@@ -148,7 +146,7 @@ a#gh {
 #marker {
   position: absolute;
   visibility: hidden;
-  border: 1px solid orange;
+  border: 2px solid orange;
 }
 
 #marker.moved {

index.html

@@ -1,28 +1,9 @@
 <!doctype html><html lang="en">
   <head>
     <title>Web Speech Synthesis Demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
     <link rel="stylesheet" href="include/style.css" />
-
-    <script>
-
-  function resetPitch() {
-    document.getElementById('pitch').value = 0.5;
-  }
-
-  function resetRate() {
-    document.getElementById('rate').value = 0;
-  }
-
-  function resetVolume() {
-    document.getElementById('volume').value = 1;
-  }
-
-  function resetVoice() {
-    document.getElementById('default-voice').selected = true;
-  }
-    </script>
-
   </head>
   <body class="loading">
     <h1>Web Speech Synthesis Demo</h1>
@@ -31,28 +12,28 @@ <h1>Web Speech Synthesis Demo</h1>
         <textarea id="texttospeak">Call me Ishmael. Some years ago&#8212;never mind how long precisely&#8212;having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.</textarea>
         <div id="textbeingspoken"></div>
       </div>
-      <div class="speecharg">
-        <label for="pitch">Pitch</label><input id="pitch" type="range" value="0.5" min="0" max="1" step="0.05"><button type="button" aria-label="Reset pitch" title="Reset pitch" onclick="resetPitch();">&#x21b6;</button>
+      <div class="speecharg pitch-field">
+        <label for="pitch">Pitch</label><input id="pitch" type="range" value="0.5" min="0" max="1" step="0.05"><button type="button" aria-label="Reset pitch" title="Reset pitch">&#x21b6;</button>
       </div>
-      <div class="speecharg">
-        <label for="rate">Rate</label><input id="rate" type="range" value="0" min="-3" max="3" step="0.25"><button type="button" aria-label="Reset rate" title="Reset rate" onclick="resetRate();">&#x21b6;</button>
+      <div class="speecharg rate-field">
+        <label for="rate">Rate</label><input id="rate" type="range" value="0" min="-3" max="3" step="0.25"><button type="button" aria-label="Reset rate" title="Reset rate">&#x21b6;</button>
       </div>
-      <div class="speecharg">
-        <label for="volue">Volume</label><input id="volume" type="range" value="1" min="0" max="1" step="0.05"><button type="button" aria-label="Reset volume" title="Reset volume" onclick="resetVolume();">&#x21b6;</button>
+      <div class="speecharg volume-field">
+        <label for="volue">Volume</label><input id="volume" type="range" value="1" min="0" max="1" step="0.05"><button type="button" aria-label="Reset volume" title="Reset volume">&#x21b6;</button>
       </div>
-      <div class="speecharg">
-        <label for="voice">Voice</label><select id="voice"></select><button type="button" aria-label="Reset voice" title="Reset voice" onclick="resetVoice();">&#x21b6;</button>
+      <div class="speecharg voice-field">
+        <label for="voice">Voice</label><select id="voice"></select><button type="button" aria-label="Reset voice" title="Reset voice">&#x21b6;</button>
       </div>
       <div class="bottom">
         <form id="speak-form" class="widebutton">
           <button type="submit"><strong>Speak it</strong></button>
           <button type="reset">Interrupt</button>
         </form>
         <form id="resume-form">
-          <button type="submit" class="small" aria-label="Pause/Resume" title="Pause/Resume"><img src="play_pause.svg"></button>
+          <button type="submit" class="small" aria-label="Pause/Resume" title="Pause/Resume"><img src="include/play-pause.svg"></button>
         </form>
         <form id="cancel-form">
-          <button type="reset" class="small" aria-label="Cancel" title="Cancel"><img src="stop.svg"></button>
+          <button type="reset" class="small" aria-label="Cancel" title="Cancel"><img src="include/stop.svg"></button>
         </form>
       </div>
       <div class="bottom">