Text Size

Overview

Component Name: gpii.firstDiscovery.panel.textSize

File: panels.js

The Text Size panel presents an adjuster that allows the user to adjust the text size preference settings. The adjuster presents plus and minus buttons, and a range indicator. When the user activates the buttons to change the text size, an enactor (provided by the Infusion Preferences Framework) applies the new text size to the First Discovery Tool interface.

This component uses Ranged Panel as a base grade so it has the same component structure as Ranged Panel in terms of the model, options, selectors and dependencies.

Using Text Size Panel

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

"textSize": {
    "type": "fluid.prefs.textSize",
    "panel": {
        "type": "gpii.firstDiscovery.panel.textSize",
        "container": ".gpiic-fd-prefsEditor-panel-size",
        "template": "%templatePrefix/rangeTemplate.html",
        "message": "%messagePrefix/textSize.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("gpii.firstDiscovery.schemas.textSize", {
    gradeNames: ["fluid.prefs.schemas"],
    schema: {
        "fluid.prefs.textSize": {
            "type": "number",
            "default": 1,
            "minimum": 0.2,
            "maximum": 1.2,
            "divisibleBy": 0.1
        }
    }
});

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

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

Grades

This component uses the following base grades: