Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const goLeft = assign({
  slideIndex: (context, event) => Math.max(context.slideIndex - 1, 0),
});

const goRight = assign({
  slideIndex: (context, event) =>
    Math.min(context.slideIndex + 1, context.slideCount - 1),
});

const goHome = assign({
  slideIndex: (context, event) => 0,
});

const goEnd = assign({
  slideIndex: (context, event) => context.slideCount - 1,
});

const goIndex = assign({
  slideIndex: (context, event) => 0, //TODO
});

const goFocusedIndex = assign({
  slideIndex: (context, event) => context.focusIndex,
});

const focusIndex = assign({
  focusIndex: (context, event) => 0, //TODO
});

const focusLeft = assign({
  focusIndex: (context, event) => Math.max(context.slideIndex - 1, 0),
});

const focusRight = assign({
  focusIndex: (context, event) => Math.max(context.slideIndex + 1, 0),
});

const pauseAnimation = assign({
  playing: (context, event) => false,
});

const resumeAnimation = assign({
  playing: (context, event) => (context.autoplay ? true : false),
});

const sliderMachine = Machine({
  id: "sliderPage",
  initial: "unfocused",
  context: {
    slideCount: 5,
    slideIndex: 0,
    focusIndex: 0,
    autoplay: true,
    playing: true,
  },
  states: {
    unfocused: {
      on: {
        FOCUS: {
          target: "focused",
          actions: pauseAnimation,
        },
        CLICK_DOT: {
          target: "focused.focusedDots",
          actions: [goIndex, focusIndex],
        },
      },
    },
    focused: {
      initial: "focusedLeft",
      states: {
        focusedLeft: {
          on: {
            ACTIVATE: {
              target: "focusedLeft",
              actions: goLeft,
            },
            TAB: {
              target: "focusedRight",
            },
          },
        },
        focusedRight: {
          on: {
            ACTIVATE: {
              target: "focusedRight",
              actions: goRight,
            },
            TAB: {
              target: "focusedDots",
            },
          },
        },
        focusedDots: {
          initial: "focusedLeft",
          on: {
            LEFT: {
              actions: focusLeft,
            },
            RIGHT: {
              actions: focusRight,
            },
            ACTIVATE: {
              actions: goFocusedIndex,
            },
            TAB: {
              target: "focusContent",
            },
          },
        },
        focusContent: {},
      },
      on: {
        BLUR: {
          target: "unfocused",
          actions: resumeAnimation,
        },
      },
    },
  },
});