Page Comparison

{div:class=}

Wiki Markup

Div

class	component-api-page

The

UI

Options

component

works

in

conjunction

with

the

UI

Enhancer

component

and

the

[Infusion13:

]

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

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}

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

Include Page

	_UIO new in 1.4
	_UIO new in 1.4

Anchor

	top
	top

Div

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

Supported Events

Span

class	back-to-top

back to top

Include Page

	_supported events intro
	_supported events intro

modelChanged

Div

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

onAutoSave

Div

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

onCancel

Div

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

onReset

Div

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

onSave

Div

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

onUIOptionsComponentReady

Div

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

onUIOptionsRefresh

Div

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

Options

Span

class	back-to-top

back to top

autoSave

Div

class	api-table

Description

A boolean indicating whether or not the setting will save automatically when changed.

Default

false

Example

Code Block

	javascript
	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|

selectors

Div

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

Selectors

Span

class	back-to-top

back to top

Include Page

	_selectors intro
	_selectors intro

The selectors supported by UI Options are described below.

cancel

Div

class	api-table

Description	The "cancel" button.
Default	".flc-uiOptions-cancel"

| ||Example| {code:javascript}

Example

Code Block

	javascript
	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|

layoutControls

Div

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}

Example

Code Block

	javascript
	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|

See also

Layout Controls

linksControls

Div

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}

Example

Code Block

	javascript
	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|

See also

Links Controls

previewFrame

Div

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}

Example

Code Block

	javascript
	javascript

selectors: {
    previewFrame: "#previewIFrame"
}

{code}| ||See also| [Preview]| {div2} h3. reset {div2:class=api-table} ||Description|The "reset" button. | ||Default|

See also

Preview

reset

Div

class	api-table

Description	The "reset" button.
Default	".flc-uiOptions-reset"

| ||Example| {code:javascript}

Example

Code Block

	javascript
	javascript

selectors: {
    reset: ".resetButton"
}

{code}| {div2} h3. save {div2:class=api-table} ||Description|The "save" button. | ||Default|

save

Div

class	api-table

Description	The "save" button.
Default	".flc-uiOptions-save"

| ||Example|{code:javascript}

Example

Code Block

	javascript
	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|

textControls

Div

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}

Example

Code Block

	javascript
	javascript

selectors: {
    textControls: "#myTextControls"
}

{code}| ||See also| [Text Controls] | {div2} {div}

See also

Text Controls

Versions Compared

Old Version 2

New Version 3

Key

Supported Events

modelChanged

onAutoSave

onCancel

onReset

onSave

onUIOptionsComponentReady

onUIOptionsRefresh

Options

autoSave

selectors

Selectors

cancel

layoutControls

linksControls

previewFrame

reset

save

textControls