Add align Wheel property for top/center/bottom vertical alignment

[DankTechnologies]

This change adds an align Wheel property to control vertical alignment - top, center, bottom. center is the default to ensure no breaking changes.

top is helpful on mobile for better control when using separate DOM elements as the pointer, in terms of positioning and stacking.

Great library!

[CrazyTim]

Hey @DankTechnologies thanks for the PR!

I have a few thoughts about this, but first can you help me understand why its needed? The more detail you can share the better. Perhaps could you share a few examples where it would be useful? It seems like a really good idea, but I'm just not sure if this feature should be extended to support the horizontal axis as well, or how it should interact with Wheel.offset.

Any detail and examples you can share will be helpful to get this merged! Thanks!

[DankTechnologies]

Sure thing, appreciate the feedback.

Here's a minimal example

• baseline 5.0.2 => https://codepen.io/DankTechnologies/pen/QwjyyWo
• with my changes and align: top => https://codepen.io/DankTechnologies/pen/empJJJN

The goal is to make the wheel as big as possible, less some padding. The results are the same on desktop viewports, but when you adjust to mobile/potrait, the baseline behavior centers the wheel and the space above/below grows significantly. I'm trying to overlay a SVG pointer guy in the top left, and aligning the wheel to the top of the wheel-container div made that much easier to accomplish. Picture on my current jank attached

I agree with the feedback re:horizontal support. I mulled naming this alignVertical or adding support for left, right, and combos (top-left). Do you have any strong opinions there?

Wheel.offset still works, but is applied after the align behavior. I think this passes principle of least surprise, but I could add some clarification to the readme that Wheel.offset works as fine-tuning after align.