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
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Build a Toggling Announcement Slider Using MooTools 1.2

    A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

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!