ArrowDirectionMixin

Purpose: adds left and right arrow buttons to a carousel-like component like Carousel.

This mixin does most of its work at the beginning of the Elix render pipeline, although it also participates indirectly in rendering by adding elements to a component's template.

eventsmethods → setState → updates → render DOM → post-render

Expects the component to provide:

  • symbols.canGoLeft and symbols.canGoRight properties, typically via DirectionSelectionMixin. These properties determine when the arrow buttons are enabled or disabled. If the component does not define these properties, the arrow buttons are always enabled.
  • symbols.goLeft and symbols.goRight methods, typically via DirectionSelectionMixin.
  • symbols.template property for ShadowTemplateMixin. The property getter must invoke the mixin's wrapWithArrowDirection (below).

Provides the component with:

  • inject method that wraps a string template with the elements for left and right arrow buttons.

Usage

import { ArrowDirectionMixin, symbols } from 'elix';

class MyElement extends ArrowDirectionMixin(HTMLElement) {
  get [symbols.template]() {
    return `
      ... Elements outside arrows go here ...
      ${this[ArrowDirectionMixin.inject](`
        ... Elements inside arrows go here ...
      `)}
    `;
  }
}

ArrowDirectionMixin is a mixin that contributes to a component's template, as shown above.

As currently implemented, ArrowDirectionMixin only displays the arrow buttons if mouse movement is detected. This behavior is intended to avoid showing arrows when the user is viewing a carousel-like component on a mobile device with no mouse. In such cases, it is expected that the component will provided touch gestures (e.g., with TouchSwipeMixin), so the arrows are unnecessary and may prove distracting or reduce the screen real estate available for touch gestures.

Customizing

In addition to custom styling via the updates property, ArrowDirectionMixin supports the following customizations:

  • arrowButtonTag property: specifies the element tag used for the left and right arrow buttons.
  • arrowButtonLeft slot: sets the content of the left arrow button.
  • arrowButtonRight slot: sets the content of the right arrow button.

Example

Mountain lake Terraced farm Winter trees Forest river Red panda
Demo: `ArrowDirectionMixin` provides left and right arrow buttons if a mouse is detected

API

Includes subelement ArrowDirectionButton.

Used by classes Carousel, CarouselSlideshow, and CarouselWithThumbnails.

arrowButtonTag property

The tag used to create the left and right arrow buttons.

Type: string

Default: 'elix-arrow-direction-button'

inject(template) method

Add the arrow buttons to a template.

Parameters:
  • template: stringthe inner template placed inside the button container