Overview
Purpose: provides for automatic timed changes in selection.
This mixin works at the beginning of the Elix render pipeline:
events ➞ methods → setState → render DOM → post-render
Expects the component to provide:
selectNext
method.cursorTimerDuration
state value indicating how much time to wait before advancing.
Provides the component with:
- A timer that automatically advances the selection.
play
andpause
methods for playing and pausing the timer.playing
property that is true when the timer is playing.
Usage
import TimerCursorMixin from "elix/src/base/TimerCursorMixin.js";
class MyElement extends TimerCursorMixin(HTMLElement) {}
The cursorTimerDuration
property defines how much time will elapse before moving to the next item. If the user changes the selection, or the selection changes for any other reason, the timer resets. This ensures the user has a chance to look at the item they want before the timer advances the selection.
API
Used by classes CarouselSlideshow, PlainCarouselSlideshow, PlainSlideshow, PlainSlideshowWithPlayControls, Slideshow, and SlideshowWithPlayControls.
cursor Timer Duration property
The time in milliseconds that will elapse after the cursor advances before the cursor will be advanced to the next item in the list.
Type: number
Default: 1000 (1 second)
pause() method
Pause automatic progression of the cursor.
play() method
Begin automatic progression of the cursor.
playing property
True if the element is playing.
Type: boolean
Default: false