+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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: +
- + + + + + + + +
-
- 
+ 
+ 
+ 
+ 
+ 
+