Bill Krueger’s TechBlog

When I first posted my Sortable List Example, I had hoped to be posting more frequently on this blog. Unfortunately, life (and work) have been very busy as always, so I apologize for the lack of content. I have been anticipating updates to the mootools framework for sometime now that would greatly reduce the amount of duplicated code needed in my example. As of SVN Revision 76, the Sortables class now allows you to pass onStart and onComplete functions in the options used to initialize the Sortables object. Therefore, I have updated my example to take advantage of this new functionality.

In my original example, I was passing an empty sortableOptions object into the initialization for the Sortable list because I didn’t need to override any options at the time. However, I was forced to use the implement functionality in mootools to change the initialize function of the Sortables class just to add three or four lines of code to the onStart and onComplete functions. This resulted in about 50 lines of duplicated code… yuck!

If you view the source of my example now, you will see a greatly simplified setup. In the sortableOptions object that used to be empty, I have defined new onStart and onComplete functions as seen below:

var sortableOptions = {
	onStart: function() {
		statusFade.clearTimer();
		$('status').setOpacity(1).setHTML('Sorting in progress...')
	},
	onComplete: function() {
		$('status').setHTML('Sorting complete!');
		statusFade.custom(1,0);
	}
};

Now, when I pass that sortableOptions object into the Sortables object, the onStart and onComplete functions are executed in addition to the existing code for those functions in the dragger object. Feel free to take a look at the updated example.

Also of note, the transitions in mootools have been changed. Instead of specifying my transition as Fx.cubic, I now have to say Fx.Transitions.cubicIn. It’s not too much trouble to add the reference to the new Transitions class, but it is somewhat annoying that some effects that existed previously do not exist under the same name anymore. For example, the old Fx.sinoidal is now Fx.Transitions.sineInOut.

I can’t really complain though, there are way more transitions now than there used to be and some of them are very cool!

This entry was posted on Sunday, October 22nd, 2006 at 9:16 pm and is filed under Mootools, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.