Versions Compared

Old Version 22

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Div
classcomponent-api-page

Span
classsmall
Production Status: PREVIEW

Insert excerpt
_UIO and UIE overview
nopaneltrue
_UIO and UIE overview
nopaneltrue

See Also
Tutorial - Page Enhancer
Full Page UI Options
Full Page UI Options (with Preview)
User Interface Options API

New in 1.4

Span
classsmall
(September, 2011)

  • Code refactored
  • API changed

Anchor
top
top

Div
classsummary-table

#Creators

#fluid.uiEnhancer(container, options)
#fluid.pageEnhancer(options)

#Supported Events

#onCreateTOCReady
Fires when table of content can be created

#modelChanged
Fires when any settings have changed

Methods

none

#Options

#classnameMap
A mapping between controls and CSS classnames used for those preferences

#fontSizeMap
A mapping between string values of "font-size" and the actual numerical values in px

#px2emFactor
A factor to convert px value to em value

#defaultSiteSettings
Default values for each of the settings

listeners
See #Supported Events for information.

#tocTemplate
Path to the template file for the Table of Contents

#Subcomponents

#settingsStore
Provides access to the saved settings.

#tableOfContents
Presents a links of links to headings on the page.

Creators

Span
classback-to-top
back to top

Use one of the following functions to create a UI Enhancer component:

fluid.uiEnhancer(container, options)

Div
classapi-table

Method

fluid.uiEnhancer(container, options);

Description

Instantiates a UI Enhancer component applied to the specified container.

Parameters

container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the UI Options interface should be placed.

options
An optional data structure that configures the UI Options component, as described below.

Returns

The UI Enhancer component

Examples

Code Block
javascript
javascript
var uie = fluid.uiEnhancer("#main");

See also

#fluid.pageEnhancer(options)

fluid.pageEnhancer(options)

Div
classapi-table

Method

fluid.pageEnhancer(options);

Description

Instantiates a UI Enhancer component applied to the entire current page.

Parameters

options
An optional data structure that configures the UI Options component, as described below.

Returns

The UI Enhancer component

Examples

Code Block
javascript
javascript
var enhancer = fluid.pageEnhancer();

See also

#fluid.uiEnhancer(container, options)

Supported Events

Span
classback-to-top
back to top

Include Page
_supported events intro
_supported events intro

onCreateTOCReady

Div
classapi-table

Description

This event fires when the "table of content" preference is turned on and the DOM is fully loaded. This event triggers the creation of the Table of Contents API subcomponent.

Type

default

Parameters

none

Availability

Infusion 1.4 and later

modelChanged

Div
classapi-table

Description

This event fires when any settings have changed.

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.4 and later

See also

Firing a change using a ChangeApplier

Options

Span
classback-to-top
back to top

Include Page
_options intro
_options intro

classnameMap

Div
classapi-table

Description

A mapping between controls and CSS classnames used for those preferences. The classnames defined using this option are applied to the document in response to user preferences.

Default

Code Block
javascript
javascript
classnameMap: {
    "textFont": {
        "default": "",
        "times": "fl-font-times",
        "comic": "fl-font-comic-sans",
        "arial": "fl-font-arial",
        "verdana": "fl-font-verdana"
    },
    "theme": {
        "default": "",
        "bw": "fl-theme-uio-hc fl-theme-hc",
        "wb": "fl-theme-uio-hci fl-theme-hci",
        "by": "fl-theme-uio-blackYellow fl-theme-blackYellow",
        "yb": "fl-theme-uio-yellowBlack fl-theme-yellowBlack"
    },
    "layout": "fl-layout-linear",
    "links": "fl-text-underline fl-text-bold fl-text-larger", 
    "inputsLarger": "fl-text-larger"
}

Example

Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    classnameMap: {
        theme: {
            "default": "my-custom-theme"
        }
    }
});

Notes

If you have a custom theme for your site, you should use the classnameMap to set the default theme name.

See also

Tutorial - Page Enhancer
Fluid Skinning System (FSS)

fontSizeMap

Div
classapi-table

Description

A mapping between string values of "font-size" and the actual numerical values in px. The option is necessary for "Text Size" preference working properly in IE6 & IE7.

Default

Code Block
javascript
javascript
fontSizeMap: {
    "xx-small": "9px",
    "x-small":  "11px",
    "small":    "13px",
    "medium":   "15px",
    "large":    "18px",
    "x-large":  "23px",
    "xx-large": "30px"
}

Example

Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    fontSizeMap: {
        "medium": "16px"
    }
});

Notes

The actual numerical value translations of the "font-size" string values vary depending on the OS display setting. If your computer is set to view in larger or smaller font, you need to adjust fontSizeMap to the desired mapped-to values.

See also

Tutorial - Page Enhancer
Fluid Skinning System (FSS)
CSS font-size Property

px2emFactor

Div
classapi-table

Description

A factor to convert px value to em value. This value is used by "Text Size" preference to adjust body "font-size" in em

Default

Code Block
javascript
javascript
16

Example

Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    px2emFactor: "10"
});

Notes

The factor varies depending on the "font-size" set on <body>. Refer to PX to EM conversion to adjust the factor value to what you need.

See also

Tutorial - Page Enhancer
Fluid Skinning System (FSS)
PX to EM conversion

Subcomponents

Include Page
_subcomponents intro
_subcomponents intro
nopaneltrue_subcomponents intro

settingsStore

Div
classapi-table

Description

The settingsStore subcomponent manages the storage and retrieval of the current settings, including default settings. Two implementations are provided with Infusion.

Default implementation

fluid.cookieStore

Alternate implementation

fluid.tempStore

Example

Code Block
javascript
javascript
fluid.uiEnhancer(".myContainer", {
    components: {
        settingsStore: {
            options: {
                cookie: {
                    expires: "Mon, 31 Dec 2012 23:59:00 UTC"
                }
            }
        }
    }
});

See also

Cookie Settings Store
Temporary Settings Store

tableOfContents

Div
classapi-table

Description

The tableOfContents subcomponent generates and renders a list of links to the headings on the page.

Default implementation

fluid.tableOfContents

Example

Code Block
javascript
javascript
fluid.pageEnhancer(".myContainer", {
    components: {
        tableOfContents: {
            options: {
                selectors: {
                    tocContainer: ".custom-tocContainer"
                }
            }
        }
    }
});

See also

Table of Contents API