FLUID-6176: Highlighting text that is being self voiced

demos/prefsFramework/json/config.json

@@ -5,7 +5,7 @@
         "titleEnd": "framework demo"
     },
     "markup": {
-        "description": "<p>The Preferences Framework offers a reusable set of schemas, programming APIs, and UI building blocks specific to the creation, persistence, and integration of preference editors into a variety of web-based applications, content management systems, and delivery environments.</p><p><em>NOTE: The 'text-to-speech' and 'simplify' adjusters are not part of the Preferences Framework, but are provided as illustrations for adding additional panels/enactors, as well as a preview of how advanced preferences could be set.</em></p>",
+        "description": "<p>The Preferences Framework offers a reusable set of schemas, programming APIs, and UI building blocks specific to the creation, persistence, and integration of preference editors into a variety of web-based applications, content management systems, and delivery environments.</p><p><em><strong>NOTE:</strong> The 'simplify' adjuster is not part of the Preferences Framework, but is provided as an illustration for adding additional panels/enactors, as well as a preview of how advanced preferences could be set.</em></p>",
         "instructions": "<ul><li>To access the preference editor on this page, click the 'Show Display Preferences' tab in the upper right corner of the window.</li><li>Try adjusting the controls in the panel that opens. You will see the changes applied to the page immediately.</li></ul>"
     },
     "links": {

src/components/textToSpeech/css/TextToSpeech.css

@@ -0,0 +1,12 @@
+.fl-tts-read-block {
+    background-color: #F1F3AE;
+    color: #000000;
+    outline: 1px dotted #000000;
+}
+
+.fl-tts-highlight {
+    color: #000000;
+    background-color: #EED400;
+    /* Used to make the background appear larger so that it stands out in a block of text */
+    outline: 0.2em solid #EED400;
+}

src/components/textToSpeech/js/MockTTS.js

@@ -46,11 +46,11 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         invokers: {
             queueSpeech: {
                 funcName: "fluid.mock.textToSpeech.queueSpeech",
-                args: ["{that}", "{that}.handleStart", "{that}.handleEnd", "{that}.speechRecord", "{arguments}.0", "{arguments}.1", "{arguments}.2"]
+                args: ["{that}", "{that}.speechRecord", "{arguments}.0", "{arguments}.1", "{arguments}.2"]
             },
             cancel: {
                 funcName: "fluid.mock.textToSpeech.cancel",
-                args: ["{that}", "{that}.handleEnd"]
+                args: ["{that}"]
             },
             getVoices: {
                 funcName: "fluid.identity",
@@ -63,7 +63,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         }
     });
 
-    fluid.mock.textToSpeech.queueSpeech = function (that, handleStart, handleEnd, speechRecord, text, interrupt, options) {
+    fluid.mock.textToSpeech.queueSpeech = function (that, speechRecord, text, interrupt, options) {
         if (interrupt) {
             that.cancel();
         }
@@ -83,15 +83,15 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
         that.events.onSpeechQueued.fire(text);
 
         // mocking speechSynthesis speak
-        handleStart();
+        that.events.utteranceOnStart.fire();
         // using setTimeout to preserve asynchronous behaviour
-        setTimeout(handleEnd, 0);
+        setTimeout(that.events.utteranceOnEnd.fire, 0);
 
     };
 
-    fluid.mock.textToSpeech.cancel = function (that, handleEnd) {
+    fluid.mock.textToSpeech.cancel = function (that) {
         that.queue = [];
-        handleEnd();
+        that.events.utteranceOnEnd.fire();
     };
 
     fluid.mock.textToSpeech.recordEvent = function (eventRecord, name) {

src/components/textToSpeech/js/TextToSpeech.js

@@ -76,7 +76,14 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
             onStart: null,
             onStop: null,
             onError: null,
-            onSpeechQueued: null
+            onSpeechQueued: null,
+            utteranceOnBoundary: null,
+            utteranceOnEnd: null,
+            utteranceOnError: null,
+            utteranceOnMark: null,
+            utteranceOnPause: null,
+            utteranceOnResume: null,
+            utteranceOnStart: null
         },
         members: {
             queue: []
@@ -130,23 +137,23 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
             getVoices: {
                 "this": "speechSynthesis",
                 "method": "getVoices"
-            },
-            handleStart: {
+            }
+        },
+        listeners: {
+            "utteranceOnStart.speak": {
                 changePath: "speaking",
                 value: true
             },
-            // The handleEnd method is assumed to be triggered asynchronously
-            // as it is processed/triggered by the mechanism voicing the utterance.
-            handleEnd: {
+            "utteranceOnEnd.stop": {
                 funcName: "fluid.textToSpeech.handleEnd",
                 args: ["{that}"]
             },
-            handleError: "{that}.events.onError.fire",
-            handlePause: {
+            "utteranceOnError.forward": "{that}.events.onError",
+            "utteranceOnPause.pause": {
                 changePath: "paused",
                 value: true
             },
-            handleResume: {
+            "utteranceOnResume.resume": {
                 changePath: "paused",
                 value: false
             }
@@ -254,19 +261,17 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
             that.cancel();
         }
 
-        var errorFn = function () {
-            that.handleError(text);
-        };
-
         var toSpeak = new SpeechSynthesisUtterance(text);
 
 
         var eventBinding = {
-            onstart: that.handleStart,
-            onend: that.handleEnd,
-            onerror: errorFn,
-            onpause: that.handlePause,
-            onresume: that.handleResume
+            onboundary: that.events.utteranceOnBoundary.fire,
+            onend: that.events.utteranceOnEnd.fire,
+            onerror: that.events.utteranceOnError.fire,
+            onmark:that.events.utteranceOnMark.fire,
+            onpause: that.events.utteranceOnPause.fire,
+            onresume: that.events.utteranceOnResume.fire,
+            onstart: that.events.utteranceOnStart.fire
         };
         $.extend(toSpeak, that.model.utteranceOpts, options, eventBinding);
 

src/framework/preferences/css/stylus/Enactors.styl

@@ -2,7 +2,7 @@
  * General prefs editor styling used to apply preferences
  * !important is used for all styles to ensure that Preferences Framework's enactors are able to override the page's default styles.
  */
-
+@import "../../../components/textToSpeech/css/TextToSpeech.css"
 @import "utils/Themes"
 @import "utils/Fonts"
 

src/framework/preferences/css/stylus/utils/Themes.styl

@@ -211,6 +211,13 @@ build-themes-Enactors(contrastThemes) {
                 visibility: hidden;
             }
 
+            // Text-to-Speech
+            .fl-tts-highlight {
+                color: bColor !important;
+                background-color: fColor !important;
+                outline-color: fColor;
+            }
+
             // Inverted color
             // General Styling
             &.fl-inverted-color, &.fl-inverted-color *, .fl-preview-theme&.fl-inverted-color {
@@ -325,6 +332,13 @@ build-themes-Enactors(contrastThemes) {
                     margin-bottom: -0.1em;
                     margin-left: -0.1em;
                 }
+
+                // Text-to-Speech
+                .fl-tts-highlight {
+                    color: fColor !important;
+                    background-color: bColor !important;
+                    outline-color: bColor;
+                }
             }
         }
     }