Overview

Component Name: gpii.firstDiscovery.panel.keyboard

File: panels.js

The Sticky Keys panel presents an adjuster that allows the user to adjust the sticky preference settings.

The Sticky Keys panel:

1. assesses whether the user needs the assistance of the Sticky Keys feature,
2. provides a means for users to experiment the experience when the Sticky Keys preference is turned on or off, and
3. turns the Sticky Keys preference on or off.

Using the Sticky Keys Panel

Option 1: In the Auxiliary Schema, specify the name of the panel as the type property of the panel section:

"keyboard": {
    "type": "gpii.firstDiscovery.stickyKeys",
    "panel": {
        "type": "gpii.firstDiscovery.panel.keyboard",
        "container": ".gpiic-fd-prefsEditor-panel-keyboard",
        "template": "%templatePrefix/keyboard.html",
        "message": "%messagePrefix/keyboard.json",
        "gradeNames": ["gpii.firstDiscovery.panel.keyboardTts", "gpii.firstDiscovery.panel.keyboard.prefEditorConnection"],
        "keyboardInputGradeNames": ["gpii.firstDiscovery.keyboardInputTts"]
    }
}

Working in conjunction with the Auxiliary Schema, the type and its default value of the Sticky Keys preference are defined in the Primary Schema:

fluid.defaults("gpii.firstDiscovery.schemas.stickyKeys", {
    gradeNames: ["fluid.prefs.schemas"],
    schema: {
        "gpii.firstDiscovery.stickyKeys": {
            "type": "boolean",
            "default": false
        }
    }
});

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

var myPanel = gpii.firstDiscovery.panel.keyboard(container, options);

Grades

This component uses the following base grades:

• fluid.prefs.panel

Model

This component supports the following model properties:

Supported Events

This component supports the following events:

Methods

Subcomponents

This component has the following subcomponents:

assistance: {
    type: "gpii.firstDiscovery.keyboard.stickyKeysAdjuster",
    createOnEvent: "onOfferAssistance",
    container: "{that}.container",
    options: {
        messageBase: "{keyboard}.options.messageBase",
        model: {
            tryAccommodation: "{keyboard}.model.tryAccommodation",
            stickyKeysEnabled: "{keyboard}.model.stickyKeysEnabled"
        },
        listeners: {
            "{keyboard}.events.onRenderTree": "{that}.tooltip.close"
        }
    }
}

stickyKeysAssessor: {
    type: "gpii.firstDiscovery.keyboard.stickyKeysAssessment",
    options: {
        requiredInput: "%",
        model: {
            userInput: "{keyboard}.model.userInput",
            offerAssistance: "{keyboard}.model.offerAssistance"
        }
    }
}

keyboardInput: {
    type: "gpii.firstDiscovery.keyboardInput",
    createOnEvent: "onInitInput",
    container: "{that}.dom.input",
    options: {
        gradeNames: ["gpii.firstDiscovery.keyboardInputTts"],
        model: {
            userInput: "{keyboard}.model.userInput",
            stickyKeysEnabled: "{keyboard}.model.stickyKeysEnabled"
        },
        messageBase: "{keyboard}.options.messageBase"
    }
}

Options

This component can be configured using the following options:

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",
      ...
}

Dependencies

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