Constructor
new Wheel(elem, dateInput, angleOffset)
Constructs a `Wheel` based on existing DOM elements. Adds event listeners
to the wheel image.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
elem |
HTMLElement | The wheel image element. | |
dateInput |
HTMLInputElement | The date input that shows the date range of the selected zodiac. | |
angleOffset |
number | 0 | The offset to add to the visual rotation angle of the wheel before determining the mapped zodiac. Default: 0. |
- Source:
Members
(private) FRICTION :number
The amount of friction to apply to a wheel spinning with momentum. In
degrees/ms^2.
Type:
- number
- Source:
(private) FRICTION :number
The amount of friction to apply to a wheel spinning with momentum. In
degrees/ms^2.
Type:
- number
- Source:
(private) angle :number
The rotation angle of the wheel image.
Note that this may not be the angle to get the zodiac mapping from, since,
for example, the right wheel takes the zodiac from the left side of the
wheel.
Type:
- number
- Source:
(private) angle :number
The rotation angle of the wheel image.
Note that this may not be the angle to get the zodiac mapping from, since,
for example, the right wheel takes the zodiac from the left side of the
wheel.
Type:
- number
- Source:
(private) angleOffset :number
An offset to add to `#angle` before determining the mapped zodiac. The
right wheel has an offset of 180° because it takes the zodiac from the left
side of the wheel.
Type:
- number
- Source:
(private) angleOffset :number
An offset to add to `#angle` before determining the mapped zodiac. The
right wheel has an offset of 180° because it takes the zodiac from the left
side of the wheel.
Type:
- number
- Source:
(private) animating :MomentumInfo|null
Information about the wheel momentum animation, if the wheel momentum is
being animated.
Type:
- MomentumInfo | null
- Source:
(private) animating :MomentumInfo|null
Information about the wheel momentum animation, if the wheel momentum is
being animated.
Type:
- MomentumInfo | null
- Source:
(private) dateInput :HTMLInputElement
The input element that displays the date range of the selected zodiac.
Type:
- HTMLInputElement
- Source:
(private) dateInput :HTMLInputElement
The input element that displays the date range of the selected zodiac.
Type:
- HTMLInputElement
- Source:
(private) elem :HTMLElement
The wheel image that gets rotated.
Type:
- HTMLElement
- Source:
(private) elem :HTMLElement
The wheel image that gets rotated.
Type:
- HTMLElement
- Source:
(private) handlePointerDown
Event handler for the `pointerdown` event.
We're using [pointer
events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
rather than [mouse events](https://javascript.info/mouse-events-basics) or
[touch
events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events)
because pointer events have several advantages:
- They're an all-in-one set of events that fire for both mouse cursors,
fingers, and pens (collectively called pointers). This means that I don't
need to add both `mousedown` and `touchstart` event listeners.
- The `setPointerCapture` method lets me receive `pointermove` and
`pointerup` events on the wheel image even when the pointer moves outside
of the element. For mouse and touch events, I would have to listen for
move events on the entire `document`.
- Combined with CSS `touch-action: none;`, I don't need to use
`event.preventDefault()` to prevent scrolling, which would also require
`{ passive: true }` when using touch events.
- Finally, the `pointercancel` event makes it nice in case the user holds
down their mouse and leaves the page. For mouse events, it will simply
not fire any event when this happens, so to the user when they return,
it'll look like the wheel is sticking to their cursor even though they
aren't holding it down.
- Source:
(private) handlePointerDown
Event handler for the `pointerdown` event.
We're using [pointer
events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
rather than [mouse events](https://javascript.info/mouse-events-basics) or
[touch
events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events)
because pointer events have several advantages:
- They're an all-in-one set of events that fire for both mouse cursors,
fingers, and pens (collectively called pointers). This means that I don't
need to add both `mousedown` and `touchstart` event listeners.
- The `setPointerCapture` method lets me receive `pointermove` and
`pointerup` events on the wheel image even when the pointer moves outside
of the element. For mouse and touch events, I would have to listen for
move events on the entire `document`.
- Combined with CSS `touch-action: none;`, I don't need to use
`event.preventDefault()` to prevent scrolling, which would also require
`{ passive: true }` when using touch events.
- Finally, the `pointercancel` event makes it nice in case the user holds
down their mouse and leaves the page. For mouse events, it will simply
not fire any event when this happens, so to the user when they return,
it'll look like the wheel is sticking to their cursor even though they
aren't holding it down.
- Source:
(private) handlePointerMove
Event handler for the `pointermove` event.
- Source:
(private) handlePointerMove
Event handler for the `pointermove` event.
- Source:
(private) handlePointerUp
Event handler for the `pointerup` and `pointercancel` events. The latter
occurs if the user holds their mouse down then switches tabs.
- Source:
(private) handlePointerUp
Event handler for the `pointerup` and `pointercancel` events. The latter
occurs if the user holds their mouse down then switches tabs.
- Source:
(private) handleWheel
Rotates the wheel based on the mouse wheel event.
- Source:
(private) handleWheel
Rotates the wheel based on the mouse wheel event.
- Source:
(private) paint
Simulates the wheel moving and updates the wheel rotation accordingly, in
an animation frame. Automatically stops and snaps to the nearest zodiac
when the wheel slows down.
- Source:
(private) paint
Simulates the wheel moving and updates the wheel rotation accordingly, in
an animation frame. Automatically stops and snaps to the nearest zodiac
when the wheel slows down.
- Source:
(private) pointer :PointerInfo|null
Information about the pointer dragging the wheel, if the wheel is being
dragged.
Type:
- PointerInfo | null
- Source:
(private) pointer :PointerInfo|null
Information about the pointer dragging the wheel, if the wheel is being
dragged.
Type:
- PointerInfo | null
- Source:
(private) wheelTimeout :number|null
The `setTimeout` ID of the delay after using the scroll wheel on the wheel
before trying to snap the wheel to the closest zodiac. This timeout gets
cleared if the user continues to scroll before the timeout runs.
Type:
- number | null
- Source:
(private) wheelTimeout :number|null
The `setTimeout` ID of the delay after using the scroll wheel on the wheel
before trying to snap the wheel to the closest zodiac. This timeout gets
cleared if the user continues to scroll before the timeout runs.
Type:
- number | null
- Source:
Methods
getMapping() → {string}
Calculates the zodiac that the wheel's arrow is pointing to. If the wheel
rotation angle is not at a perfect multiple of 30°, it will round the angle
to determine which zodiac the arrow is pointing at.
- Source:
Returns:
The zodiac.
- Type
- string
getMapping() → {string}
Calculates the zodiac that the wheel's arrow is pointing to. If the wheel
rotation angle is not at a perfect multiple of 30°, it will round the angle
to determine which zodiac the arrow is pointing at.
- Source:
Returns:
The zodiac.
- Type
- string