Class: TouchList
A touchscreen list which can be scrolled by clicking and dragging the mouse.
Hierarchy
ScrollList<TouchListProps>↳
TouchList
Constructors
constructor
• new TouchList(props): TouchList
Creates an instance of a DisplayComponent.
Parameters
| Name | Type | Description |
|---|---|---|
props | TouchListProps | The propertis of the component. |
Returns
Inherited from
Defined in
src/sdk/components/FSComponent.ts:73
Properties
_animationTargetScrollPos
• Protected Readonly _animationTargetScrollPos: Subject<undefined | number>
Inherited from
ScrollList._animationTargetScrollPos
Defined in
src/garminsdk/components/list/ScrollList.tsx:185
_firstVisibleIndex
• Protected Readonly _firstVisibleIndex: MappedSubject<[number, number], number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:202
_itemsPerPage
• Protected Readonly _itemsPerPage: undefined | Subject<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:75
_lengthPx
• Protected Readonly _lengthPx: Subscribable<number> | MappedSubscribable<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:103
_listItemLengthWithMarginPx
• Protected Readonly _listItemLengthWithMarginPx: MappedSubject<[number, number], number>
Inherited from
ScrollList._listItemLengthWithMarginPx
Defined in
src/garminsdk/components/list/ScrollList.tsx:84
_maxScrollPos
• Protected Readonly _maxScrollPos: MappedSubject<[number, number], number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:129
_renderWindow
• Protected Readonly _renderWindow: Vec2Subject
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:234
_scrollPos
• Protected Readonly _scrollPos: Subject<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:142
_totalLengthPx
• Protected Readonly _totalLengthPx: MappedSubject<[number, number, number], number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:92
animateFunc
• Protected Readonly animateFunc: () => void
Type declaration
▸ (): void
Called once per animation frame while we are animating.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:241
animationTargetScrollPos
• Readonly animationTargetScrollPos: Subscribable<undefined | number>
The scroll position targeted by this list's current scrolling animation, in pixels, or undefined if scrolling is
not currently animated or the animation has no defined target scroll position.
Inherited from
ScrollList.animationTargetScrollPos
Defined in
src/garminsdk/components/list/ScrollList.tsx:190
childrenNode
• Protected Optional childrenNode: VNode
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:58
context
• Optional context: [] = undefined
The context on this component, if any.
Inherited from
Defined in
src/sdk/components/FSComponent.ts:64
contextType
• Optional Readonly contextType: readonly [] = undefined
The type of context for this component, if any.
Inherited from
Defined in
src/sdk/components/FSComponent.ts:67
cssClassSub
• Protected Optional cssClassSub: Subscription | Subscription[]
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:257
deltaTimeSeconds
• Protected deltaTimeSeconds: number = 0
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:246
firstVisibleIndex
• Readonly firstVisibleIndex: Subscribable<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:210
goToAnimationTargetPos
• Protected goToAnimationTargetPos: boolean = false
Inherited from
ScrollList.goToAnimationTargetPos
Defined in
src/garminsdk/components/list/ScrollList.tsx:252
instrumentMouseLeaveSub
• Protected Readonly instrumentMouseLeaveSub: undefined | Subscription
Defined in
src/garminsdk/components/list/TouchList.tsx:24
interval
• Protected Optional interval: number
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:253
isAnimating
• Protected isAnimating: boolean = false
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:243
isMouseDown
• Protected Readonly isMouseDown: Subject<boolean>
Defined in
src/garminsdk/components/list/TouchList.tsx:22
itemCount
• Protected Readonly itemCount: Subscribable<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:70
itemsContainerRef
• Protected Readonly itemsContainerRef: NodeReference<HTMLDivElement>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:62
itemsPerPage
• Readonly itemsPerPage: undefined | Subscribable<number>
The number of visible list items per page displayed by this list, or undefined if the number of items per page
is not prescribed.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:80
itemsPerPageProp
• Protected Readonly itemsPerPageProp: undefined | Subscribable<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:66
lastMousePosition
• Protected lastMousePosition: undefined | number = undefined
Defined in
src/garminsdk/components/list/TouchList.tsx:27
lastTimeSeconds
• Protected lastTimeSeconds: number = 0
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:245
lengthPx
• Readonly lengthPx: Subscribable<number>
The visible length of this list, in pixels, along its scroll axis.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:116
listItemLengthPx
• Protected Readonly listItemLengthPx: Subject<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:68
listItemLengthPxProp
• Protected Readonly listItemLengthPxProp: Subscribable<number>
Inherited from
ScrollList.listItemLengthPxProp
Defined in
src/garminsdk/components/list/ScrollList.tsx:64
listItemLengthWithMarginPx
• Readonly listItemLengthWithMarginPx: Subscribable<number>
The length, in pixels, of one item in this list plus its margin along this list's scroll axis.
Inherited from
ScrollList.listItemLengthWithMarginPx
Defined in
src/garminsdk/components/list/ScrollList.tsx:90
listItemParamSubs
• Protected Readonly listItemParamSubs: Subscription[] = []
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:255
listItemSpacingPx
• Protected Readonly listItemSpacingPx: Subject<number>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:69
listItemSpacingPxProp
• Protected Readonly listItemSpacingPxProp: Subscribable<number>
Inherited from
ScrollList.listItemSpacingPxProp
Defined in
src/garminsdk/components/list/ScrollList.tsx:65
maxOverscrollPx
• Protected Readonly maxOverscrollPx: Subscribable<number>
How many pixels we will allow overscrolling before stopping.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:140
maxRenderedItemCount
• Protected Readonly maxRenderedItemCount: undefined | MappedSubject<[number, number], number>
Inherited from
ScrollList.maxRenderedItemCount
Defined in
src/garminsdk/components/list/ScrollList.tsx:212
maxScrollPos
• Readonly maxScrollPos: Subscribable<number>
This list's maximum allowed scroll position, in pixels. Does not include overscroll.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:137
maxTimeInOverscrollSeconds
• Protected maxTimeInOverscrollSeconds: number = 0.5
How long to wait while overscrolled before snapping back.
Inherited from
ScrollList.maxTimeInOverscrollSeconds
Defined in
src/garminsdk/components/list/ScrollList.tsx:249
onMouseDownCaptureFunc
• Protected Readonly onMouseDownCaptureFunc: (e: MouseEvent) => void
Type declaration
▸ (e): void
User has clicked on the list, so now we want to listen for the mouse moving so we can scroll the list with the mouse.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:29
onMouseDownFunc
• Protected Readonly onMouseDownFunc: (e: MouseEvent) => void
Type declaration
▸ (e): void
User has clicked on the list, so now we want to listen for the mouse moving so we can scroll the list with the mouse.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:30
onMouseMoveFunc
• Protected Readonly onMouseMoveFunc: (e: MouseEvent) => void
Type declaration
▸ (e): void
Responds to mousemove events on this list while the user is dragging.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:32
onMouseUpFunc
• Protected Readonly onMouseUpFunc: () => void
Type declaration
▸ (): void
Responds to mouseup events on this list after the user has started dragging.
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:31
pageLength
• Protected Readonly pageLength: MappedSubscribable<number>
The length of one page, in pixels, along this list's scroll axis.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:119
props
• props: TouchListProps & ComponentProps
The properties of the component.
Inherited from
Defined in
src/sdk/components/FSComponent.ts:61
renderWindow
• Readonly renderWindow: Subscribable<Readonly<Omit<Float64Array, "set" | "sort" | "copyWithin">>>
The window of rendered list items, as [startIndex, endIndex], where startIndex is the index of the first
rendered item, inclusive, and endIndex is the index of the last rendered item, exclusive.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:239
renderWindowStartIndex
• Protected Readonly renderWindowStartIndex: Subject<number>
Inherited from
ScrollList.renderWindowStartIndex
Defined in
src/garminsdk/components/list/ScrollList.tsx:220
renderWindowStartPos
• Protected Readonly renderWindowStartPos: MappedSubject<[number, number], number>
Inherited from
ScrollList.renderWindowStartPos
Defined in
src/garminsdk/components/list/ScrollList.tsx:221
rootRef
• Protected Readonly rootRef: NodeReference<HTMLDivElement>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:60
scrollAxis
• Readonly scrollAxis: "x" | "y"
The axis along which this list scrolls.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:73
scrollBarLengthFraction
• Readonly scrollBarLengthFraction: Subscribable<number>
The fraction of this list's visible length compared to the total length of all items in this list plus their margins along this list's scroll axis.
Inherited from
ScrollList.scrollBarLengthFraction
Defined in
src/garminsdk/components/list/ScrollList.tsx:177
scrollPos
• Readonly scrollPos: Subscribable<number>
This list's current scroll position, in pixels. The scroll position is zero when the list is scrolled to the beginning (without overscroll) and increases as the list is scrolled toward the end.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:147
scrollPosFraction
• Readonly scrollPosFraction: Subscribable<number>
This list's current scroll position, normalized such that 0 represents when the list is scrolled to the beginning (without overscroll) and 1 represents when the list is scrolled to the end (without overscroll).
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:153
snapToItem
• Protected Readonly snapToItem: boolean
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:82
snappingTransitionSpeed
• Protected snappingTransitionSpeed: number = 200
Once at or below this velocity, we pick that target Y to snap to.
Inherited from
ScrollList.snappingTransitionSpeed
Defined in
src/garminsdk/components/list/ScrollList.tsx:251
targetScrollPos
• Readonly targetScrollPos: MappedSubject<[undefined | number, number], number>
This list's current target scroll position, in pixels. The target scroll position is equal to the current animation target if it is defined; otherwise it is equal to the current scroll position.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:196
timeInOverscrollSeconds
• Protected timeInOverscrollSeconds: number = 0
Inherited from
ScrollList.timeInOverscrollSeconds
Defined in
src/garminsdk/components/list/ScrollList.tsx:247
totalLengthPx
• Readonly totalLengthPx: Subscribable<number>
The total length, in pixels, of all items in this list plus their margins along this list's scroll axis.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:101
translatableRef
• Protected Readonly translatableRef: NodeReference<HTMLDivElement>
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:61
trueScrollPos
• Protected Readonly trueScrollPos: MappedSubject<[number, number], number>
This list's current scroll position adjusted for the render window.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:228
velocity
• Protected velocity: number = 0
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:244
RESERVED_CLASSES
▪ Static Protected Readonly RESERVED_CLASSES: string[]
Overrides
Defined in
src/garminsdk/components/list/TouchList.tsx:20
Methods
animate
▸ animate(): void
Called once per animation frame while we are animating.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:488
animateSnapback
▸ animateSnapback(): void
Animates scrolling back when overscrolled.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:557
animateSnapping
▸ animateSnapping(deltaTimeSeconds): void
If we have a target Y position to stop scrolling at, animate towards a smooth stop right at that point.
Parameters
| Name | Type | Description |
|---|---|---|
deltaTimeSeconds | number | Seconds since last animation frame. |
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:588
animateVelocity
▸ animateVelocity(deltaTimeSeconds): void
Applies the velocity to the scroll position, which gives it the "flick" effect. Also slows the velocity down overtime.
Parameters
| Name | Type | Description |
|---|---|---|
deltaTimeSeconds | number | Seconds since last animation frame. |
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:532
changeRenderWindow
▸ changeRenderWindow(scrollPos, renderCount, itemLength, windowLength): void
Changes this list's item render window.
Parameters
| Name | Type | Description |
|---|---|---|
scrollPos | number | The scroll position on which to center the new render window, in pixels. |
renderCount | number | The number of items to render in the new window. |
itemLength | number | The length of each item to render, including margin, in pixels. |
windowLength | number | The length of the render window, in pixels. |
Returns
void
Overrides
Defined in
src/garminsdk/components/list/TouchList.tsx:100
destroy
▸ destroy(): void
Returns
void
Inherit Doc
Overrides
Defined in
src/garminsdk/components/list/TouchList.tsx:193
ensureScrollIsInBounds
▸ ensureScrollIsInBounds(): void
Checks if the list is scrolled past the maximum limit, and if so, snaps the list back to the limit.
Returns
void
Inherited from
ScrollList.ensureScrollIsInBounds
Defined in
src/garminsdk/components/list/ScrollList.tsx:766
executeScrollTo
▸ executeScrollTo(pos, animate): void
Executes a scroll to a specifed position.
Parameters
| Name | Type | Description |
|---|---|---|
pos | number | The position to which to scroll. |
animate | boolean | Whether to animate the scroll. |
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:449
getContainerRef
▸ getContainerRef(): HTMLDivElement
Returns a reference to the element where the list items should be added.
Returns
HTMLDivElement
A reference to the element where the list items should be added.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:306
getContext
▸ getContext(context): never
Gets a context data subscription from the context collection.
Parameters
| Name | Type | Description |
|---|---|---|
context | never | The context to get the subscription for. |
Returns
never
The requested context.
Throws
An error if no data for the specified context type could be found.
Inherited from
Defined in
src/sdk/components/FSComponent.ts:106
getDampening
▸ getDampening(direction): number
Returns a number used to dampen the mouse movement when overscrolled.
Parameters
| Name | Type | Description |
|---|---|---|
direction | number | What direction os the mouse moving in. |
Returns
number
a number used to dampen the mouse movement when overscrolled.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:782
getOverscrollPx
▸ getOverscrollPx(): number
Gets the distance by which this list is currently overscrolled, in pixels along the scroll axis.
Returns
number
The distance by which this list is currently overscrolled, in pixels along the scroll axis.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:814
getReservedCssClasses
▸ getReservedCssClasses(): readonly string[]
Gets an array of this list's reserved CSS classes.
Returns
readonly string[]
An array of this list's reserved CSS classes.
Overrides
ScrollList.getReservedCssClasses
Defined in
src/garminsdk/components/list/TouchList.tsx:188
isOverscrolled
▸ isOverscrolled(): boolean
Returns whether this list is currently overscrolled.
Returns
boolean
Whether this list is currently overscrolled.
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:828
onAfterRender
▸ onAfterRender(): void
Returns
void
Inherit Doc
Overrides
Defined in
src/garminsdk/components/list/TouchList.tsx:35
onBeforeRender
▸ onBeforeRender(): void
A callback that is called before the component is rendered.
Returns
void
Inherited from
Defined in
src/sdk/components/FSComponent.ts:80
onListItemParamChanged
▸ onListItemParamChanged(pipeTo, value): void
Responds to when one of this list's item parameters changes when the list supports snapping to items.
Parameters
| Name | Type | Description |
|---|---|---|
pipeTo | MutableSubscribable<number, number> | The mutable subscribable to which to pipe the new parameter value. |
value | number | The new parameter value. |
Returns
void
Inherited from
ScrollList.onListItemParamChanged
Defined in
src/garminsdk/components/list/ScrollList.tsx:694
onMouseDown
▸ onMouseDown(e): void
User has clicked on the list, so now we want to listen for the mouse moving so we can scroll the list with the mouse.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:130
onMouseDownCapture
▸ onMouseDownCapture(e): void
User has clicked on the list, so now we want to listen for the mouse moving so we can scroll the list with the mouse.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:113
onMouseMove
▸ onMouseMove(e): void
Responds to mousemove events on this list while the user is dragging.
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | The mouse event. |
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:160
onMouseUp
▸ onMouseUp(): void
Responds to mouseup events on this list after the user has started dragging.
Returns
void
Defined in
src/garminsdk/components/list/TouchList.tsx:143
pageBack
▸ pageBack(): void
Scrolls backward by one full page length.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:313
pageForward
▸ pageForward(): void
Scrolls forward by one full page length.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:328
pickNearestSnapToPos
▸ pickNearestSnapToPos(pos): number
Picks the scroll position, in pixels, of the snap-to target that is nearest to a given scroll position.
Parameters
| Name | Type | Description |
|---|---|---|
pos | number | The scroll position, in pixels, for which to find the nearest snap-to target. |
Returns
number
The scroll position, in pixels, of the snap-to target that is nearest to the specified scroll position.
Inherited from
ScrollList.pickNearestSnapToPos
Defined in
src/garminsdk/components/list/ScrollList.tsx:685
render
▸ render(): VNode
Returns
VNode
Inherit Doc
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:833
scrollToIndex
▸ scrollToIndex(index, position, animate): void
Scrolls until the item at a specified index is in view. The operation will be aborted if the list is currently being dragged by the user.
Parameters
| Name | Type | Description |
|---|---|---|
index | number | The index of the item to which to scroll. |
position | number | The position to place the target item at the end of the scroll. Position 0 is the top/left-most visible slot, position 1 is the next slot, and so on. Values greater than or equal to the number of visible items per page will be clamped. Negative values will be interpreted as counting backwards from the bottom/right-most visible slot starting with -1. Ignored if this list does not support snapping to list items. |
animate | boolean | Whether to animate the scroll. |
Returns
void
Overrides
Defined in
src/garminsdk/components/list/TouchList.tsx:69
scrollToIndexWithMargin
▸ scrollToIndexWithMargin(index, margin, animate): void
Scrolls the minimum possible distance until the item at a specified index is in view with a given margin from the edges of the visible list. The operation will be aborted if the list is currently being dragged by the user.
Parameters
| Name | Type | Description |
|---|---|---|
index | number | The index of the item to which to scroll. |
margin | number | The margin from the edges of the visible list to respect when scrolling to the target item. In other words, the scrolling operation will attempt to place the target item at least as far from the edges of the visible list as the specified margin. If this list supports snapping to items, then the margin should be expressed as an item count. If this list does not support snapping to items, then the margin should be expressed as pixels. The margin will be clamped between zero and the largest possible value such that an item can be placed within the visible list while respecting the margin value on both sides. |
animate | boolean | Whether to animate the scroll. |
Returns
void
Overrides
ScrollList.scrollToIndexWithMargin
Defined in
src/garminsdk/components/list/TouchList.tsx:90
startAnimating
▸ startAnimating(): void
Reset the animation vars and start the animation, if not already started.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:466
stopAnimating
▸ stopAnimating(): void
Stop the animation.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:478
updateRenderWindow
▸ updateRenderWindow(): void
Updates this list's item render window.
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:709
updateTransformX
▸ updateTransformX(scrollPos): void
Updates this list's item container's x-transform based on the current true scroll position.
Parameters
| Name | Type | Description |
|---|---|---|
scrollPos | number | The current true scroll position, in pixels. |
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:751
updateTransformY
▸ updateTransformY(scrollPos): void
Updates this list's item container's y-transform based on the current true scroll position.
Parameters
| Name | Type | Description |
|---|---|---|
scrollPos | number | The current true scroll position, in pixels. |
Returns
void
Inherited from
Defined in
src/garminsdk/components/list/ScrollList.tsx:759