Page Comparison

}
The UI Options component works in conjunction with the UI Enhancer component and the [Infusion13:Fluid Skinning System (FSS)] to allow users to set personal user interface preferences. {excerpt}The UI Options component provides a user interface for setting and saving personal preferences{excerpt}, and the UI Enhancer component carries out the work of applying those preferences to the user interface.

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*

[Fat Panel UI Options]
[Full Page UI Options (with Preview)]
[Full Page UI Options]
[UI Enhancer]

{include:_UIO new in 1.4}

{anchor:top}
{div2:class=summary-table}
||[#Supported Events]|{{[#modelChanged]}}\\
Fires when the user changes an interface control.\\
\\
{{[#onAutoSave]}}\\
Fires when the settings are about to be automatically saved.\\
\\
{{[#onCancel]}}\\
Fires when the user cancels their changes to the settings.\\
\\
{{[#onReset]}}\\
Fires when the user resets the settings.\\
\\
{{[#onSave]}}\\
Fires when the settings are about to be saved.\\
\\
{{[#onUIOptionsComponentReady]}}\\
Fires once the component has completed it's initialization.\\
\\
{{[#onUIOptionsRefresh]}}\\
Fires whenever the settings have been saved or reset, or when changes are cancelled. |
||Methods| _none_ |
||[#Options]|{{[#autoSave]}}\\
A boolean indicating whether or not the setting will save automatically when changed.\\
\\
*{{listeners}}*\\
See [#Supported Events] for information.\\
\\
*{{selectors}}*\\
See below.  |
||[#Selectors]| {{[#cancel]}}\\
The 'cancel' button\\
\\
{{[#layoutControls]}}\\
Container for the layout controls\\
\\
{{[#linksControls]}}\\
Container for the links controls\\
\\
{{[#previewFrame]}}\\
The {{<iframe>}} for the preview\\
\\
{{[#reset]}}\\
The 'reset' button\\
\\
{{[#save]}}\\
The 'save' button\\
\\
{{[#textControls]}}\\
Container for the text controls |
{div2}

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

h3. modelChanged
{div2:class=api-table}
||Description|This event fires when the user adjusts one of the controls in the UI Options interface. |
||Type| default |
||Parameters| _newModel_\\
The overall model containing the user's current selections.\\
\\
_oldModel_\\
A "snapshot" of the previous state of the model, before the change.\\
\\
_changeRequest_\\
The original change request object. |
||Availability| Infusion 1.3 and later |
||See also| [Firing a change using a ChangeApplier|Infusion13:ChangeApplier#Firing a change using a ChangeApplier] |
{div2}

h3. onAutoSave
{div2:class=api-table}
||Description|When the {{[#autoSave]}} option is set to {{true}}, this event fires before the settings are automatically saved. Note that this is not a "preventable" event. |
||Type| default |
||Parameters| none |
||Availability| Infusion 1.3 and later |
||See also| [Event Types|Infusion13:Infusion Event System#Event Types] |
{div2}

h3. onCancel
{div2:class=api-table}
||Description|This event fires when the use cancels any changes to the settings, before the settings are restore to their previous values. |
||Type| default |
||Parameters| none |
||Availability| Infusion 1.3 and later |
{div2}

h3. onReset
{div2:class=api-table}
||Description|This event fires when the use resets the settings, before the settings are restore to the site's default values.  |
||Type| default |
||Parameters| none |
||Availability| Infusion 1.3 and later |
{div2}

h3. onSave
{div2:class=api-table}
||Description|This event fires when the user saves the settings, before the new settings are recorded in the settings store.  |
||Type| default |
||Parameters| _selections_\\
A JavaScript object containing the user's selections. |
||Availability| Infusion 1.3 and later |
||See also| [Cookie Settings Store] |
{div2}

h3. onUIOptionsComponentReady
{div2:class=api-table}
||Description|This event fires after the UI Options component has loaded its templates and attached any event handlers. This event triggers the creation of the subcomponents relating to the different settings.  |
||Type| default |
||Parameters| _that_\\
The UI Options component object |
||Availability| Infusion 1.4 and later |
{div2}

h3. onUIOptionsRefresh
{div2:class=api-table}
||Description|This event fires any time the 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}

h3. autoSave

{div2:class=api-table}
||Description|A boolean indicating whether or not the setting will save automatically when changed.|
||Default| {{false}} |
||Example| {code:javascript}options: {
    autoSave: true
}
{code} |
{div2}

h3. selectors

{div2:class=api-table}
||Description|A JavaScript object identifying CSS-based selectors for DOM elements that are of interest to the component. See [#Selectors] below for details.|
||See also| [#Selectors]|
{div2}


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

The selectors supported by UI Options are described below.

h3. cancel
{div2:class=api-table}
||Description|The "cancel" button.  |
||Default| ".flc-uiOptions-cancel"|
||Example| {code:javascript}selectors: {
    cancel: "#myCancelButton"
}{code} |
{div2}

h3. layoutControls
{div2:class=api-table}
||Description|Container where the layout controls will be rendered. This will typically be an empty {{div}}.  |
||Default| ".flc-uiOptions-layout-controls"|
||Example|{code:javascript}selectors: {
    layoutControls: ".layout-controls"
}{code} |
||See also| [Layout Controls]|
{div2}

h3. linksControls
{div2:class=api-table}
||Description|Container where the links controls will be rendered. This will typically be an empty {{div}}.  |
||Default| ".flc-uiOptions-links-controls"|
||Example| {code:javascript}selectors: {
    linksControls: "div.links-controls-container"
}{code}|
||See also| [Links Controls] |
{div2}

h3. previewFrame
{div2:class=api-table}
||Description|The {{<iframe>}} to be used for the preview (in the case of the Full With Preview version of UI Options).  |
||Default| ".flc-uiOptions-preview-frame"|
||Example| {code:javascript}selectors: {
    previewFrame: "#previewIFrame"
}{code}|
||See also| [Preview]|
{div2}

h3. reset
{div2:class=api-table}
||Description|The "reset" button.  |
||Default| ".flc-uiOptions-reset"|
||Example| {code:javascript}selectors: {
    reset: ".resetButton"
}{code}|
{div2}

h3. save
{div2:class=api-table}
||Description|The "save" button.  |
||Default| ".flc-uiOptions-save"|
||Example|{code:javascript}selectors: {
    save: "input.save-button"
}{code} |
{div2}

h3. textControls
{div2:class=api-table}
||Description|Container where the text controls will be rendered. This will typically be an empty {{div}}.  |
||Default| ".flc-uiOptions-text-controls"|
||Example| {code:javascript}selectors: {
    textControls: "#myTextControls"
}{code}|
||See also| [Text Controls] |
{div2}


{div}

{div:class=component-api-page