Language Panel API

Sept 02, 2015

Language Panel Overview

Provides a means to change the language used by the First Discovery Tool.

On This Page

See Also

Still need help?

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

Adding a Language Panel to a Component/Grade

Option 1: Typically the Language Panel is integrated into the first discovery tool by supplying it as a type option in an Auxiliary Schema:

"lang": {
    "type": "gpii.firstDiscovery.language",
    "panel": {
        "type": "gpii.firstDiscovery.panel.lang",
        "container": ".gpiic-fd-prefsEditor-panel-lang",
        "template": "%prefix/lang.html",
        "message": "%prefix/lang.json",
        "stringArrayIndex": {
            "lang": ["lang-en-US", "lang-fr-FR", "lang-es-MX", "lang-de-DE", "lang-nl-NL", "lang-sv-SE"],
            "tooltip": ["lang-en-US-tooltip", "lang-fr-FR-tooltip", "lang-es-MX-tooltip", "lang-de-DE-tooltip", "lang-nl-NL-tooltip", "lang-sv-SE-tooltip"],
            "tooltipAtSelect": ["lang-en-US-tooltipAtSelect", "lang-fr-FR-tooltipAtSelect", "lang-es-MX-tooltipAtSelect", "lang-de-DE-tooltipAtSelect", "lang-nl-NL-tooltipAtSelect", "lang-sv-SE-tooltipAtSelect"]
        }
    }
}

Working in conjunction with the Auxiliary Schema, the type, its default value and enumeration of possible values of the language preference are defined in the Primary Schema:

fluid.defaults("gpii.firstDiscovery.schemas.language", {
    gradeNames: ["autoInit", "fluid.prefs.schemas"],
    schema: {
        "gpii.firstDiscovery.language": {
            "type": "string",
            "default": "en-US",
            "enum": ["en-US", "fr-FR", "es-MX", "de-DE", "nl-NL", "sv-SE"]
        }
    }
});

Option 2: Adding as a stand alone component:

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

Grades

The base grades used by the Yes/No Panel:

fluid.prefs.panel

Sub-components

The sub-components used by the Language Panel:

gpii.firstDiscovery.panel.lang.attachTooltipOnLang

Model

Path	Description	Values	Default

Path	Description	Values	Default
`lang`	The language applied to the First Discovery Tool	`String`	undefined
`selectedLang`	The language code that its corresponding button has focus	`String`	undefined
`displayLangIndex`	The index of the top language button to be displayed on the panel	`Number`	0
`atStartOfLangs`	Whether the first language button has focus	`Boolean`	false
`atEndOfLangs`	Whether the last language button has focus	`Boolean`	false

Options

Name	Description	Values	Default

Name	Description	Values	Default
`numOfLangPerPage`	The number of language buttons to be displayed on the panel.	Number	`numOfLangPerPage: 3`

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

Selector Name	Description	Default
`instructions`	The container to display the panel instruction.	".gpiic-fd-lang-instructions"
`langRow`	The row of each language selection. It often contains `langLabel` and `langInput`.	".gpiic-fd-lang-row"
`langLabel`	The label for each language button	".gpiic-fd-lang-label"
`controlsDiv`	The <input> tag for each language button	".gpiic-fd-lang-controls"
`prev`	The previous button	".gpiic-fd-lang-prev"
`next`	The next button	".gpiic-fd-lang-next"

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>