I recently sat down and completely rewrote Roundabout from scratch. It’s been over a year since I’ve last updated it, and nearly two years since I started writing the plugin. I’ve learned a lot in two years, and it was worth it to start from zero.
The result: cleaner code that’s better organized, better contained, and better encapsulated. That means that hopefully if something isn’t working for you or you want to get crazy and change things, it’s easier to understand. It should also be easier for me to maintain.
So once everything was updated into the new code, I made a couple of additions. Here’s a sign of things to come.
Odd Number of Elements Breaking Things
This was happening due to the way I was trying to figure out if an element is in front. Instead of doing exact calculations, I need to compare values and make sure the difference is less than an allowed amount.
I also changed a bit of how the animation gets to where it needs to go.
The result is that there should be no problems with no matter how many items you add. (Well, you know, browser limitations, but yeah.)
Ready Callback
Roundabout’s new version now accepts a callback function that will be called when Roundabout is ready to go. This is helpful because now you can hide Roundabout by default and show it when it’s ready. I’ve been playing with fading Roundabout in when ready, it’s a nice effect.
Autoplay
I probably get emails every other day asking about how to get Roundabout to autoplay. Although I created a demo for people to copy, a lot of people that use Roundabout don’t have a great grasp on JavaScript in general. Hopefully this makes it easier for everyone.
Autoplay is now an option. Set autoplay to true and away you go. Woo!
Out-The-Back Events
Something else that I get asked about is the ability to specify a hundred items but only show a couples and have them rotate out. I haven’t fully figured this one out yet, but the start of it is in place. Now, when moving elements pass through the back of the Roundabout, they trigger an event with the direction that they’re traveling.
Preserving CSS Position
Currently, Roundabout changes the CSS position of the element that you call Roundabout on to relative. In version two, it will only do this if the CSS position is static. This means that you can better position Roundabout through fixed or absolute positioning.
Drag & Drop Support
Another awesome feature, leveraging a couple of really great plugins by ThreeDubMedia, Roundabout now supports drag rotation by simply setting an option of enableDrag to true.
But that’s not all.
Drag support is also supported on iOS devices using touch support in Mobile Safari. Your Roundabouts just got a little bit more usable just about everywhere.
When’s It Coming?
I’m not sure. With all of the code rewriting, I have a long way to go. I need to update all of the documentation, create new demonstrations for all of the great new features, and I’d really like to write some tutorials to support those people that use Roundabout that aren’t JavaScript masters. That and there’s a hundred other things to do that aren’t Roundabout related. Luckily I have a couple of long plane flights coming up soon.
I can’t wait to show you all!
