Child pages
  • Undo Functionality

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.

Skip to end of metadata
Go to start of metadata

This page is deprecated and will be deleted shortly. See either Undo for Component Developers or Undo for Component Users instead.

Overview

The "undo" functionality is part of the Fluid framework. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

This page discribes:

  • how to enable undo on components that support it, and
  • how to build undo support into a component that you are creating.

Enabling Undo on Components that Support it

There are two ways to enable Undo on components that support it:

  1. Specify the undo decorator as an option to the component creation
  2. Manually create the undo decorator

Using the componentDecorators option

The simplest way to enable Undo functionality on a component that supports it is to use the componentDecorators option.

This section is currently incorrect.

Option Name

Value

componentDecorators

"fluid.undoDecorator"

On This Page
Still need help?

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

Example - Inline Edit

var opts = {
    componentDecorators: "fluid.undoDecorator"
};
var myEditor = fluid.inlineEdit("#myContainer", opts);

Requesting the "fluid.undoDecorator" will automatically enable the Undo functionality, and the component will be decorated with the necessary controls, etc.

For more control and flexibility, an Undo decorator can be manually created.

Manual Creation

fluid.undoDecorator(component, userOptions);

Parameters

component

The component parameter is a standard Fluid component to receive the "undo" functionality.

userOptions

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: ".undoContainer",
    undoControl: ".undoControl",
    redoContainer: ".redoContainer",
    redoControl: ".redoControl"
}

renderer

a function that renders the markup for the undo controls

 

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

Building Undo Support into a Component

Component developers must ensure that their component has certain features for Undo to work with it. A component must:

  1. Bear a model
  2. Initialize the Undo decorator if requested

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. as a return available from the component's top-level "that", or else stored within its DOM instance using jQuery.data under a well-known value.

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

A model must have:

  1. events
  2. a renderer

Events

A component must maintain a list of 'listeners' who may subscribe to model-directed events representing updates to the model. The Fluid Framework provides an Event Firer that can be used for this:

fluid.myComponent = function(container, options) {
    var that = {};
      ...
    that.model = {};

    that.modelFirer = fluid.event.getEventFirer();
      ...
    return that;
};

The modelFirer provides three functions:

modelFirer.addListener(listener, namespace, exclusions);

Listeners registered using this function are notified when the model changes.

  • The Undo decorator registers a listener using this function.
modelFirer.removeListener(listener);
modelFirer.fireEvent();
  • The component is responsible for calling fireEvent() when the model changes.

Rendering

The component must implement a no-argument function called render():

    that.render();

This function should "re-render" the component, reflecting any changes in the model.

  • The Undo decorator calls this function when an action is 'un-done' or 're-done.'

Initializing the Undo decorator

A component must respond to a user-supplied option requesting Undo by initializing the Undo decorator. This is accomplished by using the initComponents() framework function:

that.decorators = fluid.initComponents();
  • No labels