Do / Undo Functionality with MooTools
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.
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.
instead of do – what about redo?
That’s what is listed on all of the apps Im using.
you can associate this with a stack similar to the browser history
undo -> back
redo -> forward
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…
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!