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
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

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!