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!

Recently, I’ve been playing around with mootools - the new Javascript Framework from the Mad4Milk guys. As you’ve probably already noticed, at the time of launch, there wasn’t much available in terms of demos and documentation. As time passes, the documentation is improving and people are adding resources to the mootools wiki that is available now.

One of the first examples available on the web was a Drag and Drop example provided by Jonathan Snook on his blog (See example here). After I played around with his example, I was interested in testing out the Sortable List functionality available in the effects portion of mootools. I put together a quick example of a Sortable List implementation, so feel free to check it out and view the source.

I tried to go a bit farther than simply implementing the Sortable List functionality by adding an Opacity effect and making additions to the onDrag and onComplete functions of the dragger. For a more in-depth explanation of the code, read the full post.

(more…)

So I’ve finally become one of the millions of people that have a blog! I’ve always been hesistant to create a blog because I don’t see why anyone would care to read what I have to say on a regular basis and I don’t usually have that much to say in the first place. However, recently I’ve been exploring some of the new web technologies that are out there and I decided that it might be nice to share some of my tech related thoughts and ideas. Also, I plan to post tutorials and demos of the technologies I am currently working with. Hopefully, these posts will be helpful to other people attempting to implement similar functionality or use similar technologies for their own projects.

More to come…