Contrast Panel API

Last updated: Sept 02, 2015 by Alan HarnumVersion comment

2 min read

Contrast Panel Overview

The contrast panel component provides a means to change the contrast theme of the First Discovery Tool. Each contrast theme defines its own combination of foreground and background colors.

On This Page

See Also

Still need help?

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

Adding a Contrast Panel to a Component/Grade

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

"contrast": {
    "type": "fluid.prefs.contrast",
    "panel": {
        "type": "gpii.firstDiscovery.panel.contrast",
        "container": ".gpiic-fd-prefsEditor-panel-contrast",
        "classnameMap": {"theme": "@contrast.classes"},
        "template": "%prefix/contrast.html",
        "message": "%prefix/contrast.json"
    }
}

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

fluid.defaults("fluid.prefs.schemas.contrast", {
    gradeNames: ["autoInit", "fluid.prefs.schemas"],
    schema: {
        "fluid.prefs.contrast": {
            "type": "string",
            "default": "default",
            "enum": ["default", "bw", "wb", "by", "yb", "lgdg"]
        }
    }
});

Option 2: Adding as a stand alone component:

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

Grades

The base grades used by the Contrast Panel:

Model

Path	Description	Values	Default
`value`	The selected contrast preference	`String`	undefined

Options

Name	Description	Values	Default
`controlValues`	An object that contains a "theme" element that determines values assigned to HTML radio buttons.	Object The "theme" element: array.	controlValues: { choice: ["default", "bw", "wb"] }

Name

Description

Values

Default

controlValues

An object that contains a "theme" element that determines values assigned to HTML radio buttons.

Object

The "theme" element: array.

controlValues: {
    choice: ["default", "bw", "wb"]
}

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
`themeRow`	The row of each theme selection. It often contains `themeLabel` and `themeInput`.	".flc-prefsEditor-themeRow"
`themeLabel`	The label for each theme button	".flc-prefsEditor-theme-label"
`themeInput`	The <input> tag for each theme button	".flc-prefsEditor-themeInput"
`instructions`	The container to display the panel instruction.	".gpiic-fd-instructions"

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>