This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

This page has not yet been updated to reflect the latest API changes.

Overview

The Undo subcomponent provides undo support for any component that bears a model. For more information about subcomponents, see Tutorial - Subcomponents.

Subcomponent Name: fluid.undoDecorator

Model

To support Undo, a component must bear a model, a collection of Javascript objects which constitute the data which it is operating on. A model:

  • consists of pure data, i.e. Javascript objects containing only other objects and primitives, without any functions;
  • is public, i.e. accessible as a member of the component's top-level that.

The actual contents of a model is, of course, entirely dependent on the component.

To support Undo, a component's model must:

  • be called model
On This Page
See Also
Still need help?

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

Implementing that.updateModel

To support the Undo subcomponent, the component using it must implement a public function on its that object called updateModel:

fluid.myComponent = function(container, options) {
    var that = fluid.initView("fluid.myComponent", container, options);
       ...
    that.updateModel = function (newValue, source) {
    };
};

The updateModel() function must update the locally stored model using the newValue provided. The source parameter is the subcomponent that triggered the model change.

Support

Currently, the Fluid components that support Undo are:

Construction

fluid.undoDecorator(component, options);

Parameters

component

The component parameter is the parent component object, i.e. the that object returned by the parent component's creator function.

options

The options parameter is an optional collection of name-value pairs that configure the Pager and its subcomponents, as described below in the #Options section.

Options

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.

In v1.1:

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


In v1.2:

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

renderer

A function that renders the markup for the undo controls

function

In v1.1:
A function that generates the following: 

<span class='flc-undo' aria-live='polite' aria-relevant='all'>
    <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>


In v1.2:
A function that generates the following: 

<span class='flc-undo' role='region' aria-live='polite' aria-relevant='all'>
    <a href='#' class='flc-undo-undoControl'>...string specified in strings option...</a>
    <a href='#' class='flc-undo-redoControl'>...string specified in strings option...</a>
</span>

New in v1.2:
strings

Javascript object containing named strings for use in the interface.

The object can contain any subset of the following keys:
   undo
   redo
Any values not provided will revert to the default. 

strings: {
    undo: "undo edit",
    redo: "redo edit"
}

Dependencies

The Undo functionality's 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, if you are including individual files, you must include Undo.js:

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