The project is to complete/refine a responsive UI version of a drump-picker control, looking and functioning similarly to the iOS7+ datepicker. There is an existing control with MIT license available as a decent starting point.
Should work well on desktop, tablet and phone, on the common browsers. The wheel should work well with both mouse and touch. It should scale decently.
There is an existing MIT-licensed control that can be used as a basis: https://github.com/3epnm/drumjs
It requires some work to completely work for our scenario:
- It currently does not work well with IE
- The current solution for "highlighting" the selected item is based on growing the panels for the up and down arrows. We require a separate way to style / display the selected item. See image example in drumpicker folder of attached file
- currently the up and down panels contain a hardcoded "caret" style (^) arrows. This should be configurable e.g. with SVG images.
- the current version seems to end up with a mismatch in displayed and actual state if the browser goes to a different page and then clicks the back button. this needs to work consistently
- The current version has a bug where one entry does not correctly register with the onChange event. This needs to work
In use, the main scenario will see about 5 - 30 entries in the drumpicker,
changing the selection should have an event so that other parts of the page can be updated to reflect the change.
For Extra credit:
- the iOS datepicker has a feeling of "weight" where you can spin it. It would be very nice if a similar "spin" could be added to this control - but it is not a definite requirement. Open for suggestions/input on this.
Attached file contains the existing control, where one simple example starting point can be viewed by opening drumpicker/examples/test4.html
Also, drumpicker/Design example.png shows an example of a desirable design customization