Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »


The Text Controls subcomponent is used by UI Options to present controls that allow a user to configure how text should be presented on a page. The options described on this page can be configured through the options of the main UI Options components. Three version of UI Options are available:

Do not use this component directly. The information on this page should be use when customizing one of the three versions.

See Also
Layout Controls
Links Controls
Full Page UI Options
Full Page UI Options (with Preview)
Fat Panel UI Options

Unknown macro: {div2}

Supported Events

onUIOptionsRefresh
This event fires whenever the settings have been saved or reset, or when changes are cancelled.

Options

controlValues
Values for the two lists in this set of controls

lineSpacing
Minimum and maximum settings for the line spacing range

listeners
See Supported Events for information.

selectors
See below

strings
Labels for the drop-down lists in this set of controls

textSize
Minimum and maximum settings for the text size range

Selectors

lineSpacing
Container for the line spacing controls.

textFont
Container for the font family controls.

textSize
Container for the font size controls.

theme
Container for the colour contrast controls.

Supported Events

back to top

Listeners can be attached to any supported events through a component's listeners option. Values can be a function reference (not a string function name) or an anonymous function definition, as illustrated below:

var myComponent = component.name("#myContainerID", {
    listeners: {
        eventName1: functionName,
        eventName2: function (params) {
            ...
        }
    }
});

For information on the different types of events, see Infusion Event System.

onUIOptionsRefresh

Unknown macro: {div2}

Description

This event fires any time the text settings are saved or reset, or when the user cancels their changes to the interface.

Type

default

Parameters

none

Availability

Infusion 1.4 and later

Options

back to top

Configurable subcomponents can be configured though the parent component's options by passing a JavaScript object containing options for the subcomponent:

parent.component.name(".myContainer", {
    <subcomponentName>: {
        options: {
            <subcomponent options>
        }
    }
});

The options supported by the Text Controls subcomponent are described below.

controlValues

Unknown macro: {div2}

Description

This options defines values for the two lists in this set of controls: textFont and theme.

Default

 
controlValues: { 
    textFont: ["default", "times", "comic", "arial", "verdana"],
    theme: ["default", "bw", "wb", "by", "yb"]
}

Example

 
controlValues: { 
    textFont: ["default", "time", "comic", "arial", "verdana", "courier"]
}

Notes
  1. If the controlValues are modified, the UI Enhancer must be updated, and the associated strings option should be updated.
  2. The values are arrays. If the defaults are overridden, an entire new array must be specified, even if the only customization is the addition of an element to the array.

See also

UI Enhancer
Instructional Example: Adding elements to the control values

lineSpacing

Unknown macro: {div2}

Description

Minimum and maximum settings for the line spacing range

Default

 
lineSpacing: {
    min: 1,
    max: 2
}

Example

 
lineSpacing: {
    max: 5
}

selectors

Unknown macro: {div2}

Description

... See below.

strings

Unknown macro: {div2}

Description

Labels for the drop-down lists in this set of controls

Default

 
strings: {
    textFont: ["Default", "Times New Roman", "Comic Sans", "Arial", "Verdana"],
    theme: ["Default", "Black on white", "White on black", "Black on yellow", "Yellow on black"]
}

Example

 
strings: {
    theme: ["default", "black/white", "white/black", "black/yellow", "yellow/black"]
}

textSize

Unknown macro: {div2}

Description

Minimum and maximum settings for the text size range

Default

 
textSize: {
    min: 1,
    max: 2
}

Example

 
{
textSize: {
    min: 0.5,
    max: 3
}

Selectors

back to top

One of the options that can be provided to the component 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",
      ...
}

The component defines defaults for these selectors: If you use those defaults in your markup, you do not need to specify the selectors option. If you do choose to override any of the selectors, you can specify your custom selector using this option.

The selectors supported by the Text Controls subcomponent are described below.

lineSpacing

Unknown macro: {div2}

Description

Container for the line spacing controls (by default, a text-field/slider control)

Default

".flc-uiOptions-layout"

Example

 
selectors: {
    lineSpacing: "div.layout-controls-container"
}

textFont

Unknown macro: {div2}

Description

Container for the font family controls (by default, a drop-down list)

Default

".flc-uiOptions-line-text-font"

Example

 
selectors: {
    textFont: ".fontFamilyList"
}

textSize

Unknown macro: {div2}

Description

Container for the font size controls (by default, a text-field/slider control)

Default

".flc-uiOptions-line-min-text-size"

Example

 
selectors: {
    textSize: "#sizeInputs"
}

theme

Unknown macro: {div2}

Description

Container for the colour contrast controls (by default, a drop-down list)

Default

".flc-uiOptions-line-theme"

Example

 
selectors: {
    theme: "div.theme-list"
}
  • No labels