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

Undo for Component Users

Owned by Anastasia Cheetham
Last updated: Apr 20, 2009Version comment

Overview

The Undo subcomponent is a special class of subcomponent called a component decorator. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

Enabling Undo on Components that Support it

The Undo subcomponent can be added to a parent component that supports it by specifying the subcomponent type and options in the componentDecorators option parameter to the parent component. (See Subcomponents for more information.)

var opts = {
    componentDecorators: {
        type: "fluid.undoDecorator",
        options: {
            selectors: myUndoSelectors,
            renderer: myUndoRenderer
        }
    }
};

var myComponent = fluid.component(container, opts);

If no customized options are desired, the string type can be provided as the componentDecorators value instead:

var opts = {
    componentDecorators: "fluid.undoDecorator"
};

var myComponent = fluid.component(container, opts);
On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Options

The undo decorator can be customized by providing options in the componentDecorators object:

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Undo decorator

The object can contain any subset of the following keys:
  undoContainer
  undoControl
  redoContainer
  redoControl
Any values not provided will revert to the default.

 
selectors: {
    undoContainer: ".flc-undo-undoContainer",
    undoControl: ".flc-undo-undoControl",
    redoContainer: ".flc-undo-redoContainer",
    redoControl: ".flc-undo-redoControl"
}

renderer

a function that renders the markup for the undo controls

 

 
function defaultRenderer(that, targetContainer) {
    var markup = "<span class='flc-undo'>" + 
        "<span class='flc-undo-undoContainer'>[<a href='#' class='flc-undo-undoControl'>undo</a>]</span>" + 
        "<span class='flc-undo-redoContainer'>[<a href='#' class='flc-undo-redoControl'>redo</a>]</span>" + 
        "</span>";
    var markupNode = $(markup);
    targetContainer.append(markupNode);
    return markupNode;
}

Dependencies

The Undo 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 file requirements (in addition to those of the component) are:

<... other dependencies ...>
<script type="text/javascript" src="components/undo/js/Undo.js"></script>