Do / Undo Functionality with MooTools

By  on  

We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools.

The MooTools Class

(function($){
	
	this.DoUndo = new Class({
		
		//initialization
		initialize: function() {
			this.registry = {};
		},
		
		//register something you'd do
		register: function(key,doo,undo,arguments) {
			this.registry[key] = {
				'doo': doo || $empty,
				'undo': undo || $empty,
				'args': arguments
			};
		},
		
		//do it!
		doo: function(key) {
			return this.registry[key]['doo'](this.registry[key]['args']);
		},
		
		undo: function(key) {
			return this.registry[key]['undo'](this.registry[key]['args']);
		}

	});
		
})(document.id);

Once you've created your class instance you need to register your do's/undo's by providing a key, do function, undo function, and your arguments. From then on out you just call doo and undo methods, providing the key of course, to make it happen.

The Sample Usage

//usage
window.addEvent('domready',function(){
	//instance
	var dooer = new DoUndo();
	//set up an do/undo command
	dooer.register('toggle-submit',function(submit) {
		submit.fade('out');
	},function(submit) {
		submit.fade('in');
	},$('submit'));
	//use
	$('hider').addEvent('click',function() { dooer.doo('toggle-submit'); });
	$('shower').addEvent('click',function() { dooer.undo('toggle-submit'); });
});

This do/undo does simple show/hide of a button.

The Goods

  • I like the terminology: do and undo, just like every word processing application you use.
  • I like the syntax: short and sweet.

The Bads

  • This was a total "proof of concept" class and I'll admit my execution isn't very refined.
  • The method names may need to be changed on account of "do" being a reserved word.
  • This structure only allows for one "undo", so to speak. I wonder if it would enhance this solution to have an internal variable which would keep track of undos.

What are your thoughts? Dead end? Good start? I'm a ball of emotions with this. One second I think it's great, the next second I don't know how useful it would be.

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    Add Site Screenshots for External Links Using MooTools Tooltips

    Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools. The MooTools JavaScript The first step is to grab...

Discussion

  1. You need to start with a strong use case, the current one is easily replaced w/ jQuery.toggle. The most common need for js undo is probably the wysiwig editors, who’ve already implemented it. Come up with some ajaxy concept that isn’t text editing.

    BTW: Nice Job on this mobile theme – looks really nice. Need a Scroll for code snippets though.

  2. instead of do – what about redo?

    That’s what is listed on all of the apps Im using.

  3. you can associate this with a stack similar to the browser history
    undo -> back
    redo -> forward

  4. I agree with Rob, you need a better demo on this one. A stack based do/undo would be awesome…and I’d definitely be able to use that all over my cms…

  5. This would probably work better as a mixin that you can Implement in your MooTools classes. At first glance using it as a mixin would seem kinda dumb because you can just bind custom events (objinstance.addEvent(‘doo’, fn(), etc)) but your mixin could do the things that others are asking for — keep a history of events and allow stepping through them until you get back to the original change.

    Either way, Great idea!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!