Contrast

Overview

Component Name: gpii.firstDiscovery.panel.contrast

File: panels.js

The Contrast panel presents an adjuster that allows the user to adjust the contrast preference settings. The adjuster presents different forground and background colour themes. When the user selects a theme, an enactor (provided by the Infusion Preferences Framework) applies the selected theme to the First Discovery Tool interface.

Using the Contrast Panel

Option 1: In the Auxiliary Schema, specify the name of the panel as the type property of the panel section:

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

Working in conjunction with the Auxiliary Schema, the type, its default value and range of the text size preference are defined in the Primary Schema:

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

Option 2: Outside the context of the First Discovery Tool, developers may wish to create a standalone component:

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

Grades

This component uses the following base grades:

Model

This component supports the following model properties:

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

Options

This component can be configured using the following options:

Name	Description	Values	Default
`controlValues`	An object that contains an array of values that will be assigned to HTML radio buttons.	Object; The `controlValues` object of a Renderer protoTree: an array of string values	`controlValues: { theme: ["default", "bw", "wb"] }`
`selectors`	Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents.		See Selectors below

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
`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>

Edit this Page on GitHub