Page Comparison

}
{anchor:top}
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:

* [Full page|Full Page UI Options]
* [Full page, with preview|Full Page UI Options (with Preview)]
* [Fat panel|Fat Panel UI Options]

*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]

{div2:class=summary-table}
||[#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.|
{div2}

h2. Supported Events
{span:class=back-to-top}[back to top|#top]{span}
{include:_supported events intro}

h3. onUIOptionsRefresh
{div2:class=api-table}
||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 |
{div2}


h2. Options
{span:class=back-to-top}[back to top|#top]{span}
{include:_configurable subcomponents intro}

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

h3. controlValues

{div2:class=api-table}
||Description| This options defines values for the two lists in this set of controls: {{textFont}} and {{theme}}.  |
||Default| {code:javascript}controlValues: { 
    textFont: ["default", "times", "comic", "arial", "verdana"],
    theme: ["default", "bw", "wb", "by", "yb"]
}{code}|
||Example|{code:javascript}controlValues: { 
    textFont: ["default", "time", "comic", "arial", "verdana", "courier"]
}{code}|
||Notes| # If the controlValues are modified, the [UI Enhancer] must be updated, and the associated {{strings}} option should be updated.
# 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|UI Options - Custom Dropdowns]|
{div2}

h3. lineSpacing

{div2:class=api-table}
||Description| Minimum and maximum settings for the line spacing range |
||Default| {code:javascript}lineSpacing: {
    min: 1,
    max: 2
}{code}|
||Example| {code:javascript}lineSpacing: {
    max: 5
}{code} |
{div2}

h3. selectors

{div2:class=api-table}
||Description|... See below.|
{div2}

h3. strings

{div2:class=api-table}
||Description| Labels for the drop-down lists in this set of controls  |
||Default| {code:javascript}strings: {
    textFont: ["Default", "Times New Roman", "Comic Sans", "Arial", "Verdana"],
    theme: ["Default", "Black on white", "White on black", "Black on yellow", "Yellow on black"]
}{code}|
||Example|{code:javascript}strings: {
    theme: ["default", "black/white", "white/black", "black/yellow", "yellow/black"]
}{code} |
{div2}

h3. textSize

{div2:class=api-table}
||Description| Minimum and maximum settings for the text size range  |
||Default| {code:javascript}textSize: {
    min: 1,
    max: 2
}
{code}|
||Example| {code:javascript}{
textSize: {
    min: 0.5,
    max: 3
}{code}|
{div2}


h2. Selectors
{span:class=back-to-top}[back to top|#top]{span}
{include:_selectors intro}

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

h3. lineSpacing
{div2:class=api-table}
||Description| Container for the line spacing controls (by default, a text-field/slider control) |
||Default| ".flc-uiOptions-layout"|
||Example| {code:javascript}selectors: {
    lineSpacing: "div.layout-controls-container"
}{code} |
{div2}

h3. textFont
{div2:class=api-table}
||Description| Container for the font family controls (by default, a drop-down list)  |
||Default| ".flc-uiOptions-line-text-font"|
||Example| {code:javascript}selectors: {
    textFont: ".fontFamilyList"
}{code}|
{div2}

h3. textSize
{div2:class=api-table}
||Description| Container for the font size controls (by default, a text-field/slider control)  |
||Default| ".flc-uiOptions-line-min-text-size"|
||Example| {code:javascript}selectors: {
    textSize: "#sizeInputs"
}{code}|
{div2}

h3. theme
{div2:class=api-table}
||Description| Container for the colour contrast controls (by default, a drop-down list)  |
||Default| ".flc-uiOptions-line-theme"|
||Example| {code:javascript}selectors: {
    theme: "div.theme-list"
}{code}|
{div2}

{div}

{div:class=component-api-page