frontend-app-learning/src/plugin-slots/SequenceNavigationSlot

Sequence Navigation Slot

Slot ID: org.openedx.frontend.learning.sequence_navigation.v1

Props:

• sequenceId (string) — Current sequence identifier
• unitId (string) — Current unit identifier
• nextHandler (function) — Handler for next navigation action
• onNavigate (function) — Handler for direct unit navigation
• previousHandler (function) — Handler for previous navigation action

Description

This slot is used to replace/modify/hide the sequence navigation component that controls navigation between units within a course sequence.

Example

Default content

Replace with default sequence navigation component

You can also inject the default SequenceNavigation component explicitly using the slot system, for example to wrap or style it differently.

import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

import { SequenceNavigation } from './src/courseware/course/sequence/sequence-navigation';

const config = {
  pluginSlots: {
    'org.openedx.frontend.learning.sequence_navigation.v1': {
      keepDefault: false,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_sequence_navigation',
            type: DIRECT_PLUGIN,
            RenderWidget: ({ sequenceId, unitId, nextHandler, onNavigate, previousHandler }) => (
              <SequenceNavigation
                sequenceId={sequenceId}
                unitId={unitId}
                nextHandler={nextHandler}
                onNavigate={onNavigate}
                previousHandler={previousHandler}
              />
            ),
          },
        },
      ],
    },
  },
};

export default config;

Replaced with a custom component

The following env.config.jsx will replace the sequence navigation with a custom implementation that uses all available props.

import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

const config = {
  pluginSlots: {
    'org.openedx.frontend.learning.sequence_navigation.v1': {
      keepDefault: false,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_sequence_navigation',
            type: DIRECT_PLUGIN,
            RenderWidget: ({ sequenceId, unitId, nextHandler, onNavigate, previousHandler }) => {
              // Mock unit data for demonstration
              const units = ['unit-1', 'unit-2', 'unit-3'];

              return (
                <Stack gap={2} direction="horizontal" className="p-3 bg-light w-100">
                  <Button
                    className="flex-grow-1"
                    onClick={previousHandler}
                  >
                    ⬅️ Previous
                  </Button>
                  <Stack gap={2} direction="horizontal">
                    {units.map((unit, index) => (
                      <Button
                        variant="outline-primary"
                        key={unit}
                        className={`btn btn-sm ${unitId === unit ? 'btn-primary' : 'btn-outline-secondary'}`}
                        onClick={() => onNavigate(unit)}
                      >
                        {index + 1}
                      </Button>
                    ))}
                  </Stack>
                  <Button
                    className="flex-grow-1"
                    onClick={nextHandler}
                  >
                    Next ➡️
                  </Button>
                </Stack>
              )
            },
          },
        },
      ]
    }
  },
}

export default config;