TimerCursorMixin

Automatically advances an item cursor on a timer
OVERVIEW | USAGE | API

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 and pause 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) {}
Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: SlideshowWithPlayControls uses TimerCursorMixin for its timer ⇲

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.

cursorTimerDuration 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