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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    jQuery Link Nudge Plugin

    A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at producing the same type of effect.

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

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!