Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FLUID-6176: Highlighting text that is being self voiced #892

Closed
wants to merge 17 commits into from
Closed
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -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": {
@@ -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;
}
@@ -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) {
@@ -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);

@@ -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"

@@ -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;
}
}
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.