Topics

First Discovery Editor

Overview

Component Name: gpii.firstDiscovery.firstDiscoveryEditor

File: firstDiscoveryEditor.js

The First Discovery Editor component is the core component of the First Discovery Tool: It coordinates other major architectural functionality, such as navigation, text-to-speech, language management, etc.

Using the First Discovery Editor component

The First Discovery Editor component is an instance of a fluid.prefs.prefsEditorLoader. To use the component, specify it as the loader grade in the Auxiliary Schema:

fluid.defaults("my.auxSchema", {
    auxiliarySchema: {
        "loaderGrades": ["gpii.firstDiscovery.firstDiscoveryEditor"],
        // more not shown
    }
});

To instantiate the resulting preferences editor, use the auxiliary schema in a call to fluid.prefs.create():

fluid.prefs.create(container, {
    build: {
        gradeNames: ["my.auxSchema"]
    }
};

Grades

This component uses the following base grades:

  • fluid.prefs.prefsEditorLoader

Model

This component supports the following model properties:

Path Description Values Default
currentPanelNum The panel currently displayed Panel ID (Number) 1

Supported Events

This component supports the following events:

EventTypeDescriptionParameters
onPrefsEditorReady default Fired when the internal prefsEditor, containing all of the panels, is ready
component
An instance of fluid.prefs.prefsEditor
onCreateNav default Fired after onPrefsEditorReady, which is when all of the necessary markup is in place
component
An instance of fluid.prefs.prefsEditor
onPanelShown default Fired each time a panel becomes visible
number
The panel ID of visible shown panel

Methods

Method Description Parameters
showPanel Sets the visibility of the panels. The panel which is identified as the current panel in the model is made visible, the rest are hidden. none

Subcomponents

This component has the following subcomponents:

NameDescriptionValuesDefault
selfVoicing Specifies the Text-to-Speech engine to use for self voicing. "gpii.firstDiscovery.selfVoicing" 
selfVoicing: {
    type: "gpii.firstDiscovery.selfVoicing"
}
selfVoicingToggle Specifies the type of Text-to-Speech button to mute/unmute self voicing that results in the text-to-speech preference to be turned on/off accordingly. "gpii.firstDiscovery.selfVoicingToggle" 
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"
    }
}
helpButton Specifies the type of help button to use. The current help button is mostly a placeholder, as it only sets the text. "gpii.firstDiscovery.helpButton" 
helpButton: {
    type: "gpii.firstDiscovery.helpButton",
    container: "{that}.dom.helpButton",
    createOnEvent: "onPrefsEditorReady",
    options: {
        messageBase: "{messageLoader}.resources.prefsEditor.resourceText"
    }
}
prefsEditor Specifies the underlying prefs editor used. This is the part that contains all of the adjuster panels. "fluid.prefs.prefsEditor" 
prefsEditor: {
    container: "{that}.dom.prefsEditor",
    options: {
        gradeNames: ["gpii.firstDiscovery.tts.prefsEditor"],
        modelListeners: {
            states: {
                funcName: "{that}.save",
                excludeSource: "init"
            },
            preferences: {
                funcName: "{that}.saveAndApply",
                excludeSource: "init"
            }
        },
        model: {
            states: {
                currentPanelNum: "{firstDiscoveryEditor}.model.currentPanelNum"
            }
        },
        selectors: {
            panel: "{firstDiscoveryEditor}.options.selectors.panel"
        },
        events: {
            onPanelShown: "{firstDiscoveryEditor}.events.onPanelShown"
        },
        listeners: {
            onReady: {
                listener: "{firstDiscoveryEditor}.events.onPrefsEditorReady",
                args: "{firstDiscoveryEditor}"
            },
            // the page is reloaded to reset language and etc.
            "afterReset.reload": {
                "this": "location",
                method: "reload",
                args: true
            },
            "onCreate.bindResetShortcut": {
                listener: "gpii.firstDiscovery.keyboardShortcut.bindShortcut",
                args: [
                    "body",
                    gpii.firstDiscovery.keyboardShortcut.key.r,
                    ["ctrlKey", "altKey"],
                    "{that}.reset"
                ]
            }
        },
        distributeOptions: [{
            record: {
                offerAssistance: "{prefsEditor}.model.states.stickyKey.offerAssistance",
                tryAccommodation: "{prefsEditor}.model.states.stickyKey.tryAccommodation"
            },
            target: "{that > gpii.firstDiscovery.panel.keyboard}.options.model"
        }]
    }
}
nav Specifies the component to use to handle the navigation between panels, and the set of panel icons. "gpii.firstDiscovery.nav" 
nav: {
    type: "gpii.firstDiscovery.nav",
    container: "{that}.dom.nav",
    createOnEvent: "onCreateNav",
    options: {
        model: {
            currentPanelNum: "{firstDiscoveryEditor}.model.currentPanelNum",
            visitedPanelNums: "{prefsEditor}.model.states.visitedPanelNums"
        },
        messageBase: "{messageLoader}.resources.prefsEditor.resourceText",
        styles: "{firstDiscoveryEditor}.options.styles",
        panelTotalNum: "{firstDiscoveryEditor}.panels.length"
    }
}
messageLoader Specifies the component and means for loading in the JSON message bundle files. "fluid.prefs.resourceLoader" 
messageLoader: {
    options: {
        locale: "{prefsEditorLoader}.settings.preferences.gpii_firstDiscovery_language"
    }
}

Options

This component can be configured using the following options:

NameDescriptionValuesDefault
defaultLocale The language code to use, for selecting the correct message bundle, when no language has been provided in the preferences. A valid language code such as: "en-US", "fr-FR", "es-MX", "de-DE", "nl-NL", "sv-SE" This resolves to "en-US":
defaultLocale: {
    expander: {
        funcName: "fluid.get",
        args: [{
            expander: {
                funcName: "fluid.defaults",
                args: ["gpii.firstDiscovery.schemas.language"]
            }
        }, ["schema", "properties", "gpii.firstDiscovery.language", "default"]]
    }
}
tooltipOptions The options to be used by any descendant tooltip components. 
tooltipOptions: {
    delay: 0,
    duration: 0,
    position: {
        my: "left bottom",
        at: "right+1 top"
    },
    styles: {
        tooltip: "gpii-fd-tooltip"
    },
    items: ".gpiic-fd-tooltip:not([disabled])"
}
selectors Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents. See Selectors
styles Specific class names used to achieve the look and feel. 
styles: {
    active: "gpii-fd-active",
    show: "gpii-fd-show",
    currentPanel: "gpii-fd-current"
}
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

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
prefsEditor The container to use for the internal prefsEditor, which contains all of the adjuster panels. ".gpiic-fd-prefsEditor"
panel Passed down to internal prefsEditor to use as its panel selector. ".gpiic-fd-prefsEditor-panel"
selfVoicingToggle The container for the selfVoicingToggle subcomponent. ".gpiic-fd-selfVoicingToggle"
helpButton The container for the help button. ".gpiic-fd-help"
nav The container for the navigation subcomponent. ".gpiic-fd-nav"

Dependencies

<link rel="stylesheet" href="src/lib/infusion/src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" href="src/lib/foundation/css/foundation.min.css" />
<link rel="stylesheet" href="src/css/style.css" />
<link rel="stylesheet" type="text/css" href="src/lib/infusion/src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="src/lib/infusion/src/framework/preferences/css/PrefsEditor.css" />

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/schemas/schemas.js"></script>
<script type="text/javascript" src="src/js/keyboardShortcut.js"></script>
<script type="text/javascript" src="src/js/ttsHookup.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>
<script type="text/javascript" src="src/js/stickyKeysAssessment.js"></script>
<script type="text/javascript" src="src/js/keyboardInput.js"></script>
<script type="text/javascript" src="src/js/stickyKeysAdjuster.js"></script>
<script type="text/javascript" src="src/js/panels.js"></script>
<script type="text/javascript" src="src/js/enactors.js"></script>
<script type="text/javascript" src="src/js/navButtons.js"></script>
<script type="text/javascript" src="src/js/navIcons.js"></script>
<script type="text/javascript" src="src/js/helpButton.js"></script>
<script type="text/javascript" src="src/js/stepCount.js"></script>
<script type="text/javascript" src="src/js/nav.js"></script>
<script type="text/javascript" src="src/js/firstDiscoveryEditor.js"></script>

Edit this Page on GitHub