Self Voicing Toggle Button

Overview

Component Name: gpii.firstDiscovery.selfVoicingToggle

File: selfVoicing.js

Provides user interface for enabling/disabling (mute/unmute) the speech synthesis.

Using the Self Voicing Toggle Button

Option 1: Typically this component is used as a sub-component of the Preferences Editor Loader, particularly the First Discovery Tool Editor:

selfVoicingToggle: {
    container: "{that}.dom.selfVoicingToggle",
    createOnEvent: "onPrefsEditorReady",
    type: "gpii.firstDiscovery.selfVoicingToggle",
    options: {
        model: {
            enabled: "{prefsEditor}.model.preferences.gpii_firstDiscovery_speak"
        },
        messageBase: "{messageLoader}.resources.prefsEditor.resourceText"
    }
}

Option 2: Outside the context of the First Discovery Tool, developers may wish to create a standalone component:

var mySelfVoicing = gpii.firstDiscovery.selfVoicingToggle(container, options);

Grades

This component uses the following base grades:

Model

This component supports the following model properties:

Path	Description	Values	Default
`enabled`	The enabled/disabled (unmute/mute) state of the component	true/false (Boolean)	false

Methods

Method	Description	Parameters
`toggleState`	Toggles the enabled state, effectively muting/unmuting.	none
`setLabel`	Sets the mute button label depending on the enabled state. Note: this is meant for internal use by the component and not for external API calls.	none
`setTooltip`	Sets the tooltip for the mute button depending on the enabled state. Note: this is meant for internal use by the component and not for external API calls.	none
`setMuteStyle`	Sets the style class on the mute button depending on the enabled state. Note: this is meant for internal use by the component and not for external API calls.	none
`setPressedState`	Sets the `aria-pressed` attribute of the mute button.	A boolean of the button pressed state
`speakVoiceSate`	Utters the current enabled state.	`options` (Object) Any valid speech utterance options (see: `utteranceOpts`)

Options

This component can be configured using the following options:

Name	Description	Values	Default
`tooltipContentMap`	The mapping between the selector and tooltip message to be displayed (See Attach Tooltip).		`tooltipContentMap: { "mute": "mutedTooltip" }`
`selectors`	Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents.		See Selectors below
`styles`	Specific class names used to achieve the look and feel		`styles: { muted: "gpii-fd-selfVoicing-muted", unmuted: "gpii-fd-selfVoicing-unmuted" }`
`modelListeners`	JavaScript object containing model paths and the listeners that are activated when changes happen to those paths	Keys in the object are event names, values are functions or arrays of functions.	See Model above

Selectors

One of the options that can be provided to Infusion components is a set of CSS-based selectors identifying where in the DOM different elements can be found. Components use a DOM Binder to access the named elements.

The value for the selectors option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

Selector Name	Description	Default
`mute`	The DOM element to use as the mute button	`".gpiic-fd-selfVoicingToggle-mute"`
`muteLabel`	The DOM element to use as the label for the mute button	`".gpiic-fd-selfVoicingToggle-muteLabel"`

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/selfVoicing.js"></script>

Edit this Page on GitHub