diff --git a/src/navigationboard/NavigationBoard.tsx b/src/navigationboard/NavigationBoard.tsx index 63db83f..a8534fd 100644 --- a/src/navigationboard/NavigationBoard.tsx +++ b/src/navigationboard/NavigationBoard.tsx @@ -177,27 +177,30 @@ export class NavigationBoard extends React.Component this.renderToolbar(game, node.id(), squareSize)} + bottomComponent={({ squareSize }) => this.renderToolbar(game, node, squareSize)} />; } private renderNavigationField(game: Game, currentNodeId: string) { return this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))} - onPreviousPressed={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))} - onNextPressed={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))} - onLastPressed={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))} + onFirstPressed={() => this.handleNavClicked(firstNodeId(game, currentNodeId))} + onPreviousPressed={() => this.handleNavClicked(previousNodeId(game, currentNodeId))} + onNextPressed={() => this.handleNavClicked(nextNodeId(game, currentNodeId))} + onLastPressed={() => this.handleNavClicked(lastNodeId(game, currentNodeId))} />; } - private renderToolbar(game: Game, currentNodeId: string, squareSize: number) { + private renderToolbar(game: Game, node: GameNode | Variation, squareSize: number) { const buttons: NavigationButtonList = []; // Core navigation buttons - buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, onClick: () => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId)) }); - buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, onClick: () => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId)) }); - buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, onClick: () => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId)) }); - buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, onClick: () => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId)) }); + const currentNodeId = node.id(); + const hasPrevious = currentNodeId !== 'start'; + const hasNext = (node instanceof Variation ? node.first() : node.next()) !== undefined; + buttons.push({ iconPath: GO_FIRST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_FIRST, enabled: hasPrevious, onClick: () => this.handleNavClicked(firstNodeId(game, currentNodeId)) }); + buttons.push({ iconPath: GO_PREVIOUS_ICON_PATH, tooltip: i18n.TOOLTIP_GO_PREVIOUS, enabled: hasPrevious, onClick: () => this.handleNavClicked(previousNodeId(game, currentNodeId)) }); + buttons.push({ iconPath: GO_NEXT_ICON_PATH, tooltip: i18n.TOOLTIP_GO_NEXT, enabled: hasNext, onClick: () => this.handleNavClicked(nextNodeId(game, currentNodeId)) }); + buttons.push({ iconPath: GO_LAST_ICON_PATH, tooltip: i18n.TOOLTIP_GO_LAST, enabled: hasNext, onClick: () => this.handleNavClicked(lastNodeId(game, currentNodeId)) }); buttons.push('spacer'); if (this.props.flipButtonVisible) { buttons.push({ iconPath: FLIP_ICON_PATH, tooltip: i18n.TOOLTIP_FLIP, onClick: () => this.handleFlipButtonClicked() }); @@ -213,7 +216,7 @@ export class NavigationBoard extends React.Component; } - private handleNavigationButtonClicked(targetNodeId: string | undefined) { + private handleNavClicked(targetNodeId: string | undefined) { this.focus(); if (targetNodeId === undefined) { return; diff --git a/src/navigationboard/NavigationButton.ts b/src/navigationboard/NavigationButton.ts index 48c37a2..d477e5f 100644 --- a/src/navigationboard/NavigationButton.ts +++ b/src/navigationboard/NavigationButton.ts @@ -40,6 +40,11 @@ export type NavigationButton = { */ tooltip?: string; + /** + * Whether or not the button is enabled (true by default). + */ + enabled?: boolean; + /** * Callback invoked when the user clicks on the button. */ @@ -62,5 +67,6 @@ export function isNavigationButton(button: unknown): button is NavigationButton } return typeof (button as NavigationButton).iconPath === 'string' && ((button as NavigationButton).tooltip === undefined || typeof (button as NavigationButton).tooltip === 'string') && + ((button as NavigationButton).enabled === undefined || typeof (button as NavigationButton).enabled === 'boolean') && ((button as NavigationButton).onClick === undefined || typeof (button as NavigationButton).onClick === 'function'); } diff --git a/src/navigationboard/NavigationToolbar.css b/src/navigationboard/NavigationToolbar.css index b633b42..2135859 100644 --- a/src/navigationboard/NavigationToolbar.css +++ b/src/navigationboard/NavigationToolbar.css @@ -32,15 +32,23 @@ line-height: 0px; } -.kokopu-navigationButton { +.kokopu-enabledNavigationButton, +.kokopu-disabledNavigationButton { display: inline-block; +} + +.kokopu-enabledNavigationButton { cursor: pointer; } -.kokopu-navigationButton:hover { +.kokopu-enabledNavigationButton:hover { opacity: 0.6; } +.kokopu-disabledNavigationButton { + opacity: 0.2; +} + .kokopu-navigationSpacer { display: inline-block; } diff --git a/src/navigationboard/NavigationToolbar.tsx b/src/navigationboard/NavigationToolbar.tsx index b423302..fc614b1 100644 --- a/src/navigationboard/NavigationToolbar.tsx +++ b/src/navigationboard/NavigationToolbar.tsx @@ -64,7 +64,7 @@ export function NavigationToolbar({ squareSize, buttons }: NavigationToolbarProp // Enqueue the button node. buttonNodes.push( +
diff --git a/test/graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png b/test/graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png index 50d6856..c8d9c76 100644 Binary files a/test/graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png and b/test/graphic_references/12_navigation_board/additional_buttons/multiple_buttons.png differ diff --git a/test/graphic_references/12_navigation_board/additional_buttons/single_button.png b/test/graphic_references/12_navigation_board/additional_buttons/single_button.png index 3d0ca0c..1691891 100644 Binary files a/test/graphic_references/12_navigation_board/additional_buttons/single_button.png and b/test/graphic_references/12_navigation_board/additional_buttons/single_button.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png index 5e63db0..32dfd4e 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png and b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_0.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png index a21060e..fad13c2 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png and b/test/graphic_references/12_navigation_board/controlled/forbidden_navigation_1.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png b/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png index ce34978..32dfd4e 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png and b/test/graphic_references/12_navigation_board/controlled/invalid_node_id.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png index ace322f..d99c563 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png and b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_0.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png index 128ab98..2da7178 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png and b/test/graphic_references/12_navigation_board/controlled/no_callback_defined_1.png differ diff --git a/test/graphic_references/12_navigation_board/controlled/overriding_initial_node_id.png b/test/graphic_references/12_navigation_board/controlled/overriding_initial_node_id.png index ba990b7..2d05d73 100644 Binary files a/test/graphic_references/12_navigation_board/controlled/overriding_initial_node_id.png and b/test/graphic_references/12_navigation_board/controlled/overriding_initial_node_id.png differ diff --git a/test/graphic_references/12_navigation_board/theme/custom_1.png b/test/graphic_references/12_navigation_board/theme/custom_1.png index 8e4ac1b..027dbe9 100644 Binary files a/test/graphic_references/12_navigation_board/theme/custom_1.png and b/test/graphic_references/12_navigation_board/theme/custom_1.png differ diff --git a/test/graphic_references/12_navigation_board/theme/custom_2.png b/test/graphic_references/12_navigation_board/theme/custom_2.png index be2c3b8..cf9bd54 100644 Binary files a/test/graphic_references/12_navigation_board/theme/custom_2.png and b/test/graphic_references/12_navigation_board/theme/custom_2.png differ diff --git a/test/graphic_references/12_navigation_board/theme/large.png b/test/graphic_references/12_navigation_board/theme/large.png index d8e7359..05b372b 100644 Binary files a/test/graphic_references/12_navigation_board/theme/large.png and b/test/graphic_references/12_navigation_board/theme/large.png differ diff --git a/test/graphic_references/12_navigation_board/theme/small.png b/test/graphic_references/12_navigation_board/theme/small.png index f6657dd..1b1beff 100644 Binary files a/test/graphic_references/12_navigation_board/theme/small.png and b/test/graphic_references/12_navigation_board/theme/small.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png index cc2091f..d5914f5 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_0.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png index e42fa76..d5914f5 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_1.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png index 34c94e8..62d91b2 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_beginning_2.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png index 857d7fe..2d05d73 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_0.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png index 9716b49..2d05d73 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_1.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png index 633f33f..8e8a996 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png and b/test/graphic_references/12_navigation_board/uncontrolled/forbidden_navigation_at_end_2.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png index ba990b7..2d05d73 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png and b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_at_end.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png index 1ff8367..efa02ee 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png and b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png index 35de2bd..d5914f5 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png and b/test/graphic_references/12_navigation_board/uncontrolled/initial_state_default_with_game_index.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png b/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png index bb143d5..b8b7e74 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png and b/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_1.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png b/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png index 70e9abc..3347420 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png and b/test/graphic_references/12_navigation_board/uncontrolled/navigation_with_keys_4.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png index e7d1799..a6dd538 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png and b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_0.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png index 648ee60..7923133 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png and b/test/graphic_references/12_navigation_board/uncontrolled/regular_flipping_1.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png index 2536d81..b8b7e74 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png and b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_3.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png index bad8189..0405784 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png and b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_4.png differ diff --git a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png index e5a6b5b..ac6e84d 100644 Binary files a/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png and b/test/graphic_references/12_navigation_board/uncontrolled/regular_navigation_5.png differ