Versions Compared

Old Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 3

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
{div:class=} {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}
Wiki Markup
Div
classcomponent-api-page

Anchor
top
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:

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

Div
classsummary-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.

Supported Events

Span
classback-to-top
back to top

Include Page
_supported events intro
_supported events intro

onUIOptionsRefresh

Div
classapi-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

Options

Span
classback-to-top
back to top

Include Page
_configurable subcomponents intro
_configurable subcomponents intro

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

controlValues

Div
classapi-table

Description

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

Default

Code Block
javascript
javascript
controlValues: { 
    textFont: ["default", "times", "comic", "arial", "verdana"],
    theme: ["default", "bw", "wb", "by", "yb"]
}
{code}| ||Example|{code:javascript}
Example
 Code Block
javascript
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}
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
 Div
classapi-table
Description
 Minimum and maximum settings for the line spacing range 
Default
 Code Block
javascript
javascript
lineSpacing: {
    min: 1,
    max: 2
}
{code}|
||Example| {code:javascript}
Example
 Code Block
javascript
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}
selectors
 Div
classapi-table
Description
... See below.
strings
 Div
classapi-table
Description
 Labels for the drop-down lists in this set of controls 
Default
 Code Block
javascript
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}
Example
 Code Block
javascript
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
 Div
classapi-table
Description
 Minimum and maximum settings for the text size range 
Default
 Code Block
javascript
javascript
textSize: {
    min: 1,
    max: 2
}

{code}|
||Example| {code:javascript}
Example
 Code Block
javascript
javascript
{
textSize: {
    min: 0.5,
    max: 3
}
{code}|
{div2}


h2. Selectors
{span:class=
Selectors
 Span
classback-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 
top
 Include Page
_selectors intro
_selectors intro
The selectors supported by the Text Controls subcomponent are described below.
lineSpacing
 Div
classapi-table
Description
 Container for the line spacing controls (by default, a text-field/slider 
 
 control) 
 |
||Default| 
Default
 ".flc-uiOptions-layout"
|
||Example| {code:javascript}
Example
 Code Block
javascript
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| 
textFont
 Div
classapi-table
Description
 Container for the font family controls (by default, a drop-down list) 
Default
 ".flc-uiOptions-line-text-font"
|
||Example| {code:javascript}
Example
 Code Block
javascript
javascript
selectors: {
    textFont: ".fontFamilyList"
}
{code}|
{div2}

h3. textSize
{div2:class=api-table}
||Description| Container for the font size controls (by default, a 
textSize
 Div
classapi-table
Description
 Container for the font size controls (by default, a text-field/slider 
 
 control) 
  |
||Default| 
Default
 ".flc-uiOptions-line-min-text-size"
|
||Example| {code:javascript}
Example
 Code Block
javascript
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| 
theme
 Div
classapi-table
Description
 Container for the colour contrast controls (by default, a drop-down list) 
Default
 ".flc-uiOptions-line-theme"
|
||Example| {code:javascript}
Example
 Code Block
javascript
javascript
selectors: {
    theme: "div.theme-list"

}{code}|


{div2}

{div
}