up.Preview up.Preview.prototype.undo(undoFn)

Instance method

Register a function that will revert this preview's effects when the preview ends.

See Advanced preview mutations for an elaborate example.

Example

The preview below sets a [foo] attribute on the targeted fragment. It uses #undo() to remove the attribute when the preview ends:

up.preview('my-preview', function(preview) {
  if (preview.fragment.hasAttribute('foo')) return
  preview.fragment.setAttribute('foo', 'foo-value')
  preview.undo(() => preview.fragment.removeAttribute('foo'))
})

Instead of registering a callback with #undo() a preview function can also return a function:

up.preview('my-preview', function(preview) {
  if (preview.fragment.hasAttribute('foo')) return
  preview.fragment.setAttribute('foo', 'foo-value')
  return () => preview.fragment.removeAttribute('foo')) // mark-phrase "return"
})

Common DOM mutations can be expressed more concisely using an up.Preview method. These methods automatically undo their changes, without you needing to call #undo():

up.preview('my-preview', function(preview) {
  preview.setAttrs({ foo: 'foo-value' })
})