UI Enhancer API

UI Enhancer

fluid.uiEnhancer();
fluid.uiEnhancer(document, options);

options

The options parameter is an optional data structure that configures the UI Enhancer component, as described below in the fluid:Options section of this page .

Supported Events

The UI Enhancer component fires the following events (for more information about events in the Fluid Framework, see Events for Component Users):

Functions and Properties

These functions and properties are defined on the central that object returned from the uiEnhancer construction function - for example with

var that = fluid.uiEnhancer(document, options);

that.refreshView();

Applies the settings in that.model to the DOM - restyles the markup, adds a table of contents, etc.

that.updateModel(newValue, source);

Updates the component's internal representation of the settings to a new value. The modelChanged event will fire and that.model is set to newValue

that.container

The body of the document.

that.defaultSiteSettings

The default site settings as defined by the integrator.

that.model

The settings that the UI Enhancer will apply.

that.settingsStore

The persistence strategy for the settings - defaults to a cookieStore.

Options

The following options to the creator function can be used to customize the behaviour of the UI Enhancer component:

defaultSiteSettings: {
    textFont: "",                 // key from classnameMap
    textSpacing: "default",       // key from classnameMap
    theme: "default",             // key from classnameMap
    layout: "default",            // key from classnameMap
    textSize: "",                 // in points
    lineSpacing: "",              // in ems
    backgroundImages: true,       // boolean
    toc: false,                   // boolean
    linksUnderline: false,        // boolean
    linksBold: false,             // boolean
    linksLarger: false,           // boolean
    inputsLarger: false           // boolean
}

settingsStore: {
    type: "fluid.uiEnhancer.cookieStore"
}

tableOfContents: {
    type: "fluid.tableOfContents",
    options: {
        templateUrl: "../../tableOfContents/html/TableOfContents.html"
    }
}

classnameMap: {
    "textFont": {
        "serif": "fl-font-serif",
        "sansSerif": "fl-font-sans",
        "arial": "fl-font-arial",
        "verdana": "fl-font-verdana",
        "monospace": "fl-font-monospace",
        "courier": "fl-font-courier",
        "times": "fl-font-times"
    },
    "textSpacing": {
        "default": "",
        "wide0": "fl-font-spacing-0",
        "wide1": "fl-font-spacing-1",
        "wide2": "fl-font-spacing-2",
        "wide3": "fl-font-spacing-3",
        "wide4": "fl-font-spacing-4",
        "wide5": "fl-font-spacing-5",
        "wide6": "fl-font-spacing-6"
    },
    "theme": {
        "mist": "fl-theme-mist",
        "rust": "fl-theme-rust",
        "highContrast": "fl-theme-hc",
        "highContrastInverted": "fl-theme-hci",
        "lowContrast": "fl-theme-slate",
        "mediumContrast": "fl-theme-coal",
        "default": ""
    },
    "layout": {
        "simple": "fl-layout-linear",
        "default": ""
    },
    "noBackgroundImages": "fl-no-background-images",
    "linksUnderline": "fl-text-underline", 
    "linksBold": "fl-text-bold", 
    "linksLarger": "fl-text-larger", 
    "inputsLarger": "fl-text-larger"
}

Cookie Store subcomponent

The Cookie Store is used to record a set of UI preferences for later retrieval by the UI Enhancer. It is the default settings store shipped with the UI Enhancer component.

Subcomponent Name: fluid.uiEnhancer.cookieStore

Functions

A settings store subcomponent implements two functions, fetch and save.

that.fetch = function () {
};

This function retrieves and returns the value of the stored settings (i.e. the stored cookie).

that.save = function (settings) {
};

This function saves (stores) the settings in a cookie.

options

cookieName: "fluid-ui-settings"

Temp Store subcomponent

The Temp Store is a settings store subcomponent that provides temporary storage of preferences, without persistance.

Subcomponent Name: fluid.uiEnhancer.tempStore

Functions

A settings store subcomponent implements two functions, fetch and save.

that.fetch = function () {
};

This function retrieves and returns the value of the stored settings from memory.

that.save = function (settings) {
};

This function saves the settings in memory.

The Temp Store subcomponent has no default options.

Dependencies

The UI Options component depends on the Fluid Skinning System and as such the following style-sheets are required:

<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-reset.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.hc.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.hci.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.mist.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.rust.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.coal.css" />
<link rel="stylesheet" type="text/css" href="framework/fss/css/fss-theme.slate.css" />

The UI Enhancer javascript dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file.

<script type="text/javascript" src="InfusionAll.js"></script>

Alternatively, the individual javascript file requirements are:

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="lib/json/js/json2.js"></script>
<script type="text/javascript" src="components/tableOfContents/js/TableOfContents.js"></script>
<script type="text/javascript" src="components/uiOptions/js/UIEnhancer.js"></script>