Matteo Spinelli's

Cubiq.org

> Spinning wheel on webkit for iPhone/iPod touch

I’m more and more amazed by the power of mobile webkit. I don’t love the iPhone that much, but as a web developer the beauty of CSS transitions, animations and transforms can’t pass unnoticed. This time I’m giving away a widget that resembles the native Picker View (UIPickerView) functionality but entirely built on javascript.

Please note that the script is in beta phase, I am publishing it to receive feedback and suggestions. In the next few days we should have a stable version.

Update 2009/03/16: We are out of beta, the script is now stable and ready for production (hope so ). In the zip I also included a minified (9kb) version of the script to save some bits of precious bandwidth.

Update 2009/04/19: the script is now compatible with full screen mode apps. It seems that in full screen mode preventDefault() and stopPropagation() placed in touchStart event are not enough to block the propagation of the touch event. Adding preventDefault() to touchMove event solved the problem.

Update 2009/06/18: the script has been updated for OS3.0 compatibility.

Update 2009/07/09:it turned out that Apple is well aware of the webkit refresh bug, fortunately they are kind enough to offer a workaround. All we have to do is to use translate3d instead of translate and all our animations will be fluid as never before! Go get the latest version of the script!

How to use the script

The widget is composed of two parts: the stylesheet and the javascript. No HTML is needed as all the elements are created by the script on the fly. Include both the JS and the CSS into your page and you are ready to spin. You’ll be also surprised to see that the spinning wheel itself is built with just two images, while other three images are needed for the header and buttons. The PNGs altogether are 4.3kb.

The code does not need initialization on window load. You cannot have more than one picker at a time, so the SpinningWheel object is unique and it is created as soon as you include the JS file.

The first thing you need to do is to define the slots with:

SpinningWheel.addSlot(obj values, str styles, str defaultValue)

values is in the form of: { key: value, key2: value, ... }. Keys are the identifiers that won’t be shown in the picker (think of them as the value parameter in the <option value="foo">bar</option> tag). Values are the labels printed on the slots.styles is a list of space separated predefined styles to be applied to the slot. The available values are:

right, align text inside the slot to the right;

readonly, the slot can’t be spun;

shrink, shrink the slot width to the minimum possible.

The first element of the slot will be selected if no defaultValue is defined.

When all the slots have been created, set the default actions for the cancel and done buttons.

Create custom styles

I preconfigured for you three styles for the slots, but you can add as many as you need. Say you want a slot with center aligned text. Add the following to the stylesheet:

#sw-slots .sw-center { text-align:center; }

To apply the style create the slot like this:

SpinningWheel.addSlot(values, 'center');

A piece of cake.

By default the slots try to fit their content. Slots with long text will be wider than ones with short text. (Same as the <table /> cell elements). With custom style you can override this behavior. If you have two slots and you want them to be exactly the same width you may add the following style:

You don’t need to apply the style to both slots as the second will fit the remaining space (or the other 50% of the screen width).

Limitations

None that I can tell if not those imposed by the device small CPU. All animations are hardware accelerated, the “birth date” example in the demo creates more than one hundred elements and all animations are pretty fluid.

The script is also compatible with both landscape and portrait mode and you can freely switch from one to the other while the spinning wheel is opened. (That is more than what the native Picker View has to offer).

Note that once closed the spinning wheel is completely inaccessible and all variables will be null or undefined. So basically you can’t programmatically query the SpinningWheel object while it is not visible.

I’m now working on code optimization to reduce memory usage, I hope to release a stable version as soon as possible.The code is now stable, please leave your comments and suggestions.

@Steve,
yes, it’s not that difficult. First of all you need to remove all the CSS animations and related event handlers (ontransitionend) and replace them with a timed (setInterval) function (it’s a lot easier if you use something like jquery). You also need to replace touchstart with mousedown, touchmove with mousemove and touchend with mouseup. Probably you want to open a popup instead of making the control slide up from the bottom of the page.

Author: Russ

Posted on: 2009/03/24

At: 05:23

Is there a way to programatically set the wheels before or just after it appears? I’m looking to remember what the user chooses, then set it back to their previous setting the next time the spinner comes back up.

@AwayBBL, images can be used but you probably need to play a bit with CSS and cellHeight (now fixed at 44px). Regarding the circular motion is feasible but probably it’s easier setting a 3d rotation, there’s an example about it on the apple developers’ site.

@AwayBBL, surely something has changed in os3.0, but the beta is still too buggy. I hope the next beta will be something we can work with, because so far it seems Apple forgot their loyal web developers

Author: pugwash

Posted on: 2009/05/12

At: 07:05

It doesn’t work in 3.0 beta as the webkitTransform call in getComputedStyle() returns a 2d matrix() and not a matrix3d(). I’m not sure why. Changing the index from 13 I think to 5 will make it work but still not as smooth as OS 2.2.1

Author: pugwash

Posted on: 2009/05/16

At: 03:40

The reason for returning a 2d matrix is an optimization. A 3d matrix is returned if z-axis is used.

I’m investigating on the OS3 laziness. Probably we just have to do things in a slightly different way, but documentation lacks.

Author: AwayBBL

Posted on: 2009/06/19

At: 16:10

@Matteo

Thanks for getting spinning wheel working again.

Agree with the other folks that it’s still a little choppy, and it flashes the background, but at least it works.

Hope you can make it work smoothly again.

Author: name

Posted on: 2009/06/23

At: 14:52

I am struggling to figure out the changes between 2.0 and 3.0. The reported “freeze” after a touchstart event is similar to what I am experiencing. All is fine until the first touchend is fired. What was changed in this to make it 3.0 compatible?

Author: Fred

Posted on: 2009/06/25

At: 13:23

This is actually not the solution we need to re-smooth the ui, but here is a good directive to use in your document css body (or div) to disable the user selection (cut/paste) in the UI :

this is a great product, has anyone gotten it working with the iWebkit framework? I have been unsuccessful, it fails on the var results = SpinningWheel.getSelectedValues(); call, just sits there and does nothing.

Author: alex

Posted on: 2011/11/18

At: 17:59

Did you find a solution?
i have this problem too!

Author: Mike

Posted on: 2009/08/22

At: 19:04

Did anyone figure out how to get it to open a html link when the “Done” button is clicked?