https://github.com/samthor/undoer

Native undo/redo behavior for web
https://github.com/samthor/undoer

Last synced: about 2 months ago
JSON representation

Native undo/redo behavior for web

• Host: GitHub
• URL: https://github.com/samthor/undoer
• Owner: samthor
• License: apache-2.0
• Created: 2019-03-09T02:01:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-24T23:32:47.000Z (over 5 years ago)
• Last Synced: 2024-07-07T08:24:03.386Z (3 months ago)
• Language: JavaScript
• Homepage: https://codepen.io/samthor/pen/WJvLxd
• Size: 10.7 KB
• Stars: 55
• Watchers: 7
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Native undo/redo behavior for web.

This lets you push native undo stack events onto your pages, so that users can use Ctrl/Cmd-Z—or even use some other gesture (e.g., on iOS devices, you can shake your phone to Undo).

See a [writeup on how this works](https://dev.to/chromiumdev/-native-undo--redo-for-the-web-3fl3) or an [awesome maze-based demo](https://codepen.io/samthor/pen/WJvLxd) for more.

## Usage

Install on NPM/Yarn via `undoer`.

You can use this element as a Web Component or as pure, imperative JavaScript.

### Web Component

Add the dependency to your JS and register it as a CE:

```js

import UndoerElement from './node_modules/undoer/element.js';

customElements.define('undoer-element', UndoerElement);

```

Then add the element to your page, optionally adding `state` attribute to set its zero initial state (otherwise it will be `null`):

```html

```

Finally, use the element's JavaScript API:

```js

const undoerEl = document.querySelector('undoer-element');

undoerEl.addEventListener('state', (ev) => {

  console.info('user undo or redid', ev.detail);

});

// set new state with

undoerEl.state = 'new state';

undoerEl.state = /* any object */ ;

// or via attribute for string state

undoerEl.setAttribute('state', 'new state');

```

### Imperative JavaScript

You can also use the raw `Undoer` class without CEs:

```js

import {Undoer} from './node_modules/undoer/undoer.js';

// or

import {Undoer} from 'undoer';  // your build system might allow this

// construct with callback and push state

const initialState = null;  // default is null

const undoer = new Undoer((data) => {

  console.info('user undo or redid', data);

}, initialState);

undoer.push('new state');

```

## Notes

This makes sense as a Web Component as the undo behavior works by adding a hidden `
` to your page.

In the WC case, this is as a child of the element: in the imperative case, it's added (by default) to `document.body`.