Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Fat Panel UI Options

Owned by Anastasia Cheetham
Last updated: Sept 27, 2011Version comment
5 min read

This documentation applies to v1.4 of UI Options.
For earlier versions, see
UI Options API.

Production Status: PREVIEW

The User Interface Options component (UI Options) works in conjunction with the User Interface Enhancer component (UI Enhancer) and the Fluid Skinning System (FSS) to adjust the user interface based on personal preferences:

  • UI Options presents the user with controls for adjusting preferences.
  • UI Enhancer is the engine that transforms pages according to the saved preferences.

The Fat Panel version of UI Options places the UI Options dialog in a collapsible panel at the top of the page, accessible through a button in the upper right corner of the page.

See Also
Tutorial - Fat Panel UI Options
UI Options Instructional Demos
Full Page UI Options
Full Page UI Options (with Preview)
UI Enhancer

New in 1.4

(October, 2011)

The UI Options component has been completely refactored in version 1.4:

  • The component is now available in three versions: Full Page, Full Page with Preview, and Fat Panel.
  • The interface has been completely redesigned.
  • The API has been updated.

#Creator

fluid.uiOptions.fatPanel(container, options)

#Supported Events

#afterRender
Fires after the interface has been rendered into the iframe.

Methods

none

#Options

listeners
See #Supported Events for information.

#prefix
A relative path to templates.

selectors
See below

#Selectors

#iframe
The <iframe> element that will contain the UI Options controls.

#Configurable Subcomponents

#layoutControls
Renders the controls for customizing the layout of the page.

#linksControls
Renders the controls for customizing the appearance of links on the page.

#markupRenderer
Controls the rendering of the component into the iframe.

#slidingPanel
A hidden panel at the top of the page that contains the UI Options controls.

#templateLoader
Responsible for fetching HTML templates for the various controls.

#textControls
Renders the controls for customizing the appearance of text on the page.

#uiOptions
Responsible for the main rendering of the controls.

Creator

back to top

Use the following function to create a Fat Panel UI Options component:

Method

fluid.uiOptions.fatPanel(container, options);

Description

Instantiate a fat panel version of the UI Options component, which displays the controls in a sliding panel at the top of the page.

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 Fat Panel UI Options component

Examples

 
var myFatPanel = fluid.uiOptions.fatPanel("#myContainer", {
    prefix: "../../components/uiOptions/html"
});

Notes

The Fat Panel UI Options uses the page itself as a live "preview:" As users adjust controls, the page is modified accordingly.

See also

Full Page UI Options
Full Page UI Options (with Preview)

Supported Events

back to top

Listeners can be attached to any supported events through a component's listeners option. Values can be a function reference (not a string function name) or an anonymous function definition, as illustrated below:

var myComponent = component.name("#myContainerID", {
    listeners: {
        eventName1: functionName,
        eventName2: function (params) {
            ...
        }
    }
});

For information on the different types of events, see Infusion Event System.

afterRender

Description

This event fires after the UI Options controls have been rendered into the iframe. This event triggers the initialization of event handlers as well as the creation of the sliding panel.

Type

default

Parameters

none

Availability

Infusion 1.4 and later

Options

back to top

The second argument to the creator function is the options argument. This is a JavaScript object containing name/value pairs: The name is the name of the option and the value is the desired setting. Components define their own default values for options, but integrators can override these defaults by providing new values using the options argument. For technical information about how options are merged with defaults, see Options Merging.

var fatPanelUIO = fluid.uiOptions.fatPanel(".myContainer", {
    <option1Name>: <option1value>,
    <option2Name>: <option2value>
    ...
}
});

The options supported by Fat Panel UI Options are described below.

prefix

Description

The prefix option allows you to specify a custom relative path to the templates used by the UI Options interface. These templates can be found in the source tree of the Infusion distribution. The value of the prefix option will be passed on to the Template Loader subcomponent.

Default

"../html/"

Example

 
fluid.uiOptions.fullNoPreview("#myContainer", {
    prefix: "../../components/uiOptions/html/"
});

Notes

Note that if the Template Loader values do not use the %prefix notation, the value of the prefix option will be ignored.

See also

Template Loader

selectors

Description

See below for details.

Selectors

back to top

One of the options that can be provided to the component is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

The component defines defaults for these selectors: If you use those defaults in your markup, you do not need to specify the selectors option. If you do choose to override any of the selectors, you can specify your custom selector using this option.

The selectors supported by Fat Panel UI Options are described below.

iframe

Description

The <iFrame> element that will be used to house the UI Options controls. This frame will be placed in a sliding panel at the top of the page.

Default

".flc-uiOptions-iframe"

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    selectors: {
        iframe: "#uio-iframe"
    }
});

Configurable Subcomponents

Configurable subcomponents can be configured though the parent component's options by passing a JavaScript object containing options for the subcomponent:

parent.component.name(".myContainer", {
    <subcomponentName>: {
        options: {
            <subcomponent options>
        }
    }
});

To learn about the specific options for each subcomponent, visit the default implementation's API page.

layoutControls

Description

The layoutControls subcomponent renders the controls for customizing the layout of the page.

Default implementation

fluid.uiOptions.layoutControls

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    layoutControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Layout Controls

linksControls

Description

The linksControls subcomponent renders the controls for customizing the appearance of links on the page.

Default implementation

fluid.uiOptions.linksControls

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    linksControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Links Controls

markupRenderer

Description

The markupRenderer subcomponent controls the rendering of the component into the iframe.

Default implementation

fluid.uiOptions.renderIframe

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    markupRenderer: {
        options: {
            styles: {
                containerFlex: ".my-flex-container"
            }
        }
    }
});

See also

Render IFrame

slidingPanel

Description

The slidingPanel subcomponent is a hidden panel at the top of the page that contains the UI Options controls.

Default implementation

fluid.slidingPanel

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    slidingPanel: {
        options: {
            hideByDefault: false
        }
    }
});

See also

Sliding Panel

templateLoader

Description

The templateLoader subcomponent is responsible for fetching HTML templates for the various controls.

Default implementation

fluid.uiOptions.templateLoader

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    templateLoader: {
        options: {
            templates: {
                linksControls: "../templates/CustomLinksTemplate.html"
            }
        }
    }
});

See also

Template Loader

textControls

Description

The textControls subcomponent renders the controls for customizing the appearance of text on the page.

Default implementation

fluid.uiOptions.textControls

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    textControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Text Controls

uiOptions

Description

The uiOptions subcomponent is responsible for the main rendering of the controls.

Default implementation

fluid.uiOptions

Example

 
fluid.uiOptions.fullPreview(".myContainer", {
    uiOptions: {
        options: {
            autoSave: false
        }
    }
});

See also

UI Options