bitmovin-player-ui/src/ts/components/settings/SettingsPanelPageNavigatorButton.ts

Bitmovin Player UI Framework

import { Button, ButtonConfig, ButtonStyle } from '../buttons/Button';
import { SettingsPanel, SettingsPanelConfig } from './SettingsPanel';
import { SettingsPanelPage } from './SettingsPanelPage';

/**
 * Configuration interface for a {@link SettingsPanelPageNavigatorButton}
 *
 * @category Configs
 */
export interface SettingsPanelPageNavigatorConfig extends ButtonConfig {
  /**
   * Container `SettingsPanel` where the navigation takes place
   */
  container: SettingsPanel<SettingsPanelConfig>;
  /**
   * Page where the button should navigate to
   * If empty it will navigate to the root page (not intended to use as navigate back behavior)
   */
  targetPage?: SettingsPanelPage;

  /**
   * WCAG20 standard: Establishes relationships between objects and their label(s)
   */
  ariaLabelledBy?: string;
}

/**
 * Can be used to navigate between SettingsPanelPages
 *
 * Example:
 *  let settingPanelNavigationButton = new SettingsPanelPageNavigatorButton({
 *    container: settingsPanel,
 *    targetPage: settingsPanelPage,
 *  });
 *
 *  settingsPanelPage.addComponent(settingPanelNavigationButton);
 *
 * Don't forget to add the settingPanelNavigationButton to the settingsPanelPage.
 *
 * @category Buttons
 */
export class SettingsPanelPageNavigatorButton extends Button<SettingsPanelPageNavigatorConfig> {
  private readonly container: SettingsPanel<SettingsPanelConfig>;
  private readonly targetPage?: SettingsPanelPage;

  constructor(config: SettingsPanelPageNavigatorConfig) {
    super(config);
    this.config = this.mergeConfig(
      config,
      {
        buttonStyle: ButtonStyle.Text,
      },
      this.config,
    );

    this.container = (this.config as SettingsPanelPageNavigatorConfig).container;
    this.targetPage = (this.config as SettingsPanelPageNavigatorConfig).targetPage;
  }

  /**
   * navigate one level back
   */
  popPage() {
    this.container.popSettingsPanelPage();
  }

  /**
   * navigate to the target page
   */
  pushTargetPage() {
    this.container.setActivePage(this.targetPage);
  }
}