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:

Inline Edit

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>

Browser not supported