Sticky Key Panel API

Owned by Cindy Li
Last updated: Oct 07, 2015
3 min read

Sticky Key Panel Overview

The Sticky Key panel offers:

  1. Assesses whether the user needs the assistance of the sticky key feature;
  2. Provides a means for users to experiment the experience when the sticky key preference is turned on or off;
  3. Turn the sticky key preference on or off.
On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Adding a Sticky Key Panel to a Component/Grade

Option 1: Typically the Sticky Key Panel is integrated into the First Discovery Tool by supplying it in an Auxiliary Schema:

 

"keyboard": {
    "type": "gpii.firstDiscovery.stickyKeys",
    "panel": {
        "type": "gpii.firstDiscovery.panel.keyboard",
        "container": ".gpiic-fd-prefsEditor-panel-keyboard",
        "template": "%prefix/keyboard.html",
        "message": "%prefix/keyboard.json",
        "gradeNames": ["gpii.firstDiscovery.panel.keyboardTts"]
    }
}
Working in conjunction with Auxiliary Schema, the type and its default value of the Sticky Key preference are defined in the Primary Schema:

 

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

 

Option 2: Adding as a stand alone component:

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

Grades

The base grades used by the Sticky Key Panel:

Model

Path

Description

Values

Default

offerAssistance

Whether or not the sticky key feature should be offered.

Booleanundefined
tryAccommodationWhether or not users select to try the sticky key feature.Booleanfalse
userInputThe user input.String""

Supported Events

Event

Type

Description

Parameters

Parameter Description

onOfferAssistance

default

Fired when the sticky key feature is determined to be offered.

  
onInitInputdefaultFired when it's time to initialize the keyboard input sub-component.  

 

Methods

Method

Description

Parameters

toggleAssistance

Displays or hide the sticky key assessment container.

Boolean

 

Subcomponents

Name

Description

Values

Default

assistance

Used to turn on/off the sticky key assistance.

"gpii.firstDiscovery.keyboard.stickyKeysAdjuster"

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"
        }
    }
}
stickyKeysAssessorUsed to assess whether the user needs the help of the sticky key feature.
"gpii.firstDiscovery.keyboard.stickyKeysAssessment"
stickyKeysAssessor: {
    type: "gpii.firstDiscovery.keyboard.stickyKeysAssessment",
    options: {
        requiredInput: "%",
        model: {
            userInput: "{keyboard}.model.userInput",
            offerAssistance: "{keyboard}.model.offerAssistance"
        }
    }
}
keyboardInputUsed for the user input."gpii.firstDiscovery.keyboardInput"
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"
    }
}


Selectors

One of the options that can be provided to the First Discovery Editor is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

 

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

Selector Name

Description

Default

input

The input field.

".gpiic-fd-keyboard-input"
instructionsThe panel instruction.".gpiic-fd-keyboard-instructions"
assistanceThe area for assessing and experimenting the sticky key feature.".gpiic-fd-keyboard-assistance"

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>