Navigation

The navigation object provides methods for navigating between lecture pages within the Elice platform.

⚠️ All navigation methods only work correctly when the content is embedded in an iframe on the Elice platform. They communicate with the parent frame via postMessage.

Methods

previous (Navigate to Previous Page)

Navigates to the previous lecture page.

import { cdk } from './path/to/cdk';

cdk.navigation.previous();

next (Navigate to Next Page)

Navigates to the next lecture page.

import { cdk } from './path/to/cdk';

cdk.navigation.next();

getHasPrevious (Check if Previous Page Exists)

Checks if a previous lecture page exists. Returns true if navigation is available, otherwise returns false.

Return Value

Type	Description
boolean	Returns true if navigation to previous is available.

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasPrevious = await cdk.navigation.getHasPrevious();
  console.log('Previous page exists:', hasPrevious);
};

getHasNext (Check if Next Page Exists)

Checks if a next lecture page exists. Returns true if navigation is available, otherwise returns false.

Return Value

Type	Description
boolean	Returns true if navigation to next is available.

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasNext = await cdk.navigation.getHasNext();
  console.log('Next page exists:', hasNext);
};

Usage Examples

Implementing Navigation Buttons (React)

import { cdk } from './path/to/cdk';
import { useState, useEffect } from 'react';

const NavigationButtons = () => {
  const [hasPrevious, setHasPrevious] = useState(false);
  const [hasNext, setHasNext] = useState(false);

  useEffect(() => {
    const checkNavigationState = async () => {
      const [prev, next] = await Promise.all([
        cdk.navigation.getHasPrevious(),
        cdk.navigation.getHasNext(),
      ]);
      setHasPrevious(prev);
      setHasNext(next);
    };

    checkNavigationState();
  }, []);

  return (
    <div>
      <button disabled={!hasPrevious} onClick={() => cdk.navigation.previous()}>
        Previous
      </button>
      <button disabled={!hasNext} onClick={() => cdk.navigation.next()}>
        Next
      </button>
    </div>
  );
};