Versions Compared

Old Version 19

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

...

{span:class=small}Production Status: PREVIEW{span} {excerpt-include:_UIO and UIE overview|nopanel=true} *See Also* [Tutorial - Page Enhancer] [Full Page UI Options] [Full Page UI Options (with Preview)] [Fat Panel UI Options] *New in 1.4* {span:class=small}(September, 2011){span} * Code refactored * API changed {anchor:top} {div2:class=summary-table} ||[#Creators]| {{[

Div
classcomponent-api-page
Wiki Markup
Span
classsmall
Production Status: PREVIEW

Insert excerpt
_UIO and UIE overview
_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.| {div2} h2. Creators {span:class=back-to-top}[back to top|#top]{span} Use one of the following functions to create a UI Enhancer component: h3. fluid.uiEnhancer(container, options) {div2:class=api-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:javascript}

#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");
{code} | ||See also| [
See also
#fluid.pageEnhancer(options)
] |
{div2}

h3. 
fluid.pageEnhancer(options)

{div2:class=
}
||Method| {{
 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:javascript}
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();
{code} |
||See also| [
See also
#fluid.uiEnhancer(container, 
 
 options)
] |
{div2}

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

h3. onCreateTOCReady
{div2:class=api-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] subcomponent. |
||Type| default |
||Parameters| _none_ |
||Availability| Infusion 1.4 and later |
{div2}

h3. modelChanged
{div2:class=api-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|fluid:ChangeApplier#Firing a change using a ChangeApplier]|
{div2}

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

h3. classnameMap

{div2:class=api-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:javascript}
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"
}
{code} |
||Example| {code:javascript}
Example
 Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    classnameMap: {
        theme: {
            "default": "my-custom-theme"
        }
    }
});
{code}|
||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:Fluid Skinning System (FSS)] |
{div2}

h3. fontSizeMap

{div2:class=api-table}
||Description|A mapping between string values of 
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:javascript}
Default
 Code Block
javascript
javascript
fontSizeMap: {
    "xx-small": "9px",
    "x-small":  "11px",
    "small":    "13px",
    "medium":   "15px",
    "large":    "18px",
    "x-large":  "23px",
    "xx-large": "30px"
}
{code} |
||Example| {code:javascript}
Example
 Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    fontSizeMap: {
        "medium": "16px"
    }
});
{code}|
||Notes| The actual numerical value translations of the 
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:

Fluid 
 
 Skinning 
 
 System 
 
 (FSS)
]
[

CSS 
 
 font-size 
 Property|http://www.w3schools.com/cssref/pr_font_font-size.asp] |
{div2}

h3. px2emFactor

{div2:class=api-table}
||Description|A factor to convert px value to em value. This value is used by "Text Size" preference to adjust body 
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:javascript}16{code} |
||Example| {code:javascript}
Default
 Code Block
javascript
javascript
16
Example
 Code Block
javascript
javascript
var enh = fluid.pageEnhancer({
    px2emFactor: "10"
});
{code}|
||Notes| The factor varies depending on the 
Notes
 The factor varies depending on the "font-size" 
 
 set 
 
 on 
 
 <body>. 
 
 Refer 
 
 to 
 [
PX 
 
 to 
 
 EM 
 
 conversion
|http://pxtoem.com/] 
 to 
 
 adjust 
 
 the 
 
 factor 
 
 value 
 
 to 
 
 what 
 
 you 
 
 need.

||
See 
 
 also
| [
Tutorial 
 
 - 
 
 Page 
 
 Enhancer
]
[fluid:

Fluid 
 
 Skinning 
 
 System 
 
 (FSS)
]
[

PX 
 
 to 
 
 EM 
 conversion|http://pxtoem.com/] |
{div2}

h2. Subcomponents

{include:_subcomponents intro|nopanel=true}


h3. settingsStore

{div2:class=api-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|Cookie Settings Store]}} |
||Alternate implementation| {{[fluid.tempStore|Temporary Settings Store]}} |
||Example| {code:javascript}
conversion
Subcomponents
 Include Page
_subcomponents intro
_subcomponents intro
nopaneltrue
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"
                }
            }
        }
    }
});

{code} |
||See also|[Cookie Settings Store]\\
[Temporary Settings Store] |
{div2}


h3. tableOfContents

{div2:class=api-table}
||Description| The {{settingsStore}} subcomponent ...|
||Default implementation| {{[fluid.tableOfContents|Table of Contents]}} |
||Example| {code:javascript}
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"
                }
            }
        }
    }
});

{code} |
||See also|[Table of Contents] |
{div2}


See also
Table of Contents API