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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    MooTools Gone Wild: Element Flashing

    If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

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!