Language Panel API

Owned by Cindy Li
Last updated: Sept 02, 2015 by Alan HarnumVersion comment
2 min read

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:

Sub-components

The sub-components used by the Language Panel:

Model

Path

Description

Values

Default

lang

The language applied to the First Discovery Tool

Stringundefined
selectedLangThe language code that its corresponding button has focusStringundefined
displayLangIndexThe index of the top language button to be displayed on the panelNumber0
atStartOfLangsWhether the first language button has focusBooleanfalse
atEndOfLangsWhether the last language button has focusBooleanfalse

Options

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
instructionsThe 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"
langLabelThe label for each language button".gpiic-fd-lang-label"
controlsDivThe <input> tag for each language button".gpiic-fd-lang-controls"
prevThe previous button".gpiic-fd-lang-prev"
nextThe 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>