Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support keyboard navigation of flyout buttons #2200

Merged
merged 3 commits into from
Apr 8, 2024
Merged

feat: support keyboard navigation of flyout buttons #2200

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9026339
feat: support keyboard navigation of flyout buttons
mikeharv Feb 13, 2024
5e3608e
fix: linting errors and rebase
mikeharv Apr 8, 2024
38c22aa
Merge remote-tracking branch 'upstream/rc/v11.0.0' into flyout-button…
mikeharv Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 29 additions & 4 deletions plugins/keyboard-navigation/src/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,7 @@

/**
* Sets the navigation state to flyout and moves the cursor to the first
* block in the flyout.
* block or button in the flyout.
* @param {!Blockly.WorkspaceSvg} workspace The workspace the flyout is on.
* @package
*/
Expand All @@ -500,9 +500,14 @@
}

if (flyout && flyout.getWorkspace()) {
const topBlocks = flyout.getWorkspace().getTopBlocks(true);
if (topBlocks.length > 0) {
const astNode = Blockly.ASTNode.createStackNode(topBlocks[0]);
const flyoutContents = flyout.getContents();
const firstFlyoutItem = flyoutContents[0];
if (firstFlyoutItem instanceof Blockly.FlyoutButton) {
const astNode = Blockly.ASTNode.createButtonNode(firstFlyoutItem);
this.getFlyoutCursor(workspace).setCurNode(astNode);
}
if (firstFlyoutItem instanceof Blockly.BlockSvg) {
const astNode = Blockly.ASTNode.createStackNode(firstFlyoutItem);
this.getFlyoutCursor(workspace).setCurNode(astNode);
}
}
Expand Down Expand Up @@ -1248,6 +1253,26 @@
return isHandled;
}

/**
* Triggers a flyout button's callback.
* @param {!Blockly.WorkspaceSvg} workspace The main workspace. The workspace
* containing a flyout with a button.
* @package
*/
triggerButtonCallback(workspace) {
const button = /** @type {!FlyoutButton} */ (

Check warning on line 1263 in plugins/keyboard-navigation/src/navigation.js

View workflow job for this annotation

GitHub Actions / lint 

The type 'FlyoutButton' is undefined
this.getFlyoutCursor(workspace).getCurNode().getLocation()
);
const buttonCallback = workspace.flyoutButtonCallbacks.get(
button.callbackKey,
);
if (typeof buttonCallback === 'function') {
buttonCallback(button);
} else {
throw new Error('No callback function found for flyout button.');
}
}

/**
* Removes the change listeners on all registered workspaces.
* @package
Expand Down
17 changes: 16 additions & 1 deletion plugins/keyboard-navigation/src/navigation_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,22 @@
this.navigation.handleEnterForWS(workspace);
return true;
case Constants.STATE.FLYOUT:
this.navigation.insertFromFlyout(workspace);
const flyoutCursor = this.navigation.getFlyoutCursor(workspace);

Check failure on line 512 in plugins/keyboard-navigation/src/navigation_controller.js

View workflow job for this annotation

GitHub Actions / lint 

Unexpected lexical declaration in case block
if (!flyoutCursor) {
return false;
}
const curNode = flyoutCursor.getCurNode();

Check failure on line 516 in plugins/keyboard-navigation/src/navigation_controller.js

View workflow job for this annotation

GitHub Actions / lint 

Unexpected lexical declaration in case block
const nodeType = curNode.getType();

Check failure on line 517 in plugins/keyboard-navigation/src/navigation_controller.js

View workflow job for this annotation

GitHub Actions / lint 

Unexpected lexical declaration in case block

switch (nodeType) {
case Blockly.ASTNode.types.STACK:
this.navigation.insertFromFlyout(workspace);
break;
case Blockly.ASTNode.types.BUTTON:
this.navigation.triggerButtonCallback(workspace);
break;
}

return true;
default:
return false;
Expand Down
5 changes: 3 additions & 2 deletions plugins/keyboard-navigation/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
* @fileoverview Plugin test.
*/

import {createPlayground, toolboxCategories} from '@blockly/dev-tools';
import {createPlayground} from '@blockly/dev-tools';
import * as Blockly from 'blockly';
import {toolbox} from './toolbox';

import {LineCursor, NavigationController} from '../src';

Expand All @@ -31,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
controller = new NavigationController();
controller.init();
const defaultOptions = {
toolbox: toolboxCategories,
toolbox: toolbox,
};
createPlayground(
document.getElementById('root'),
Expand Down
218 changes: 218 additions & 0 deletions plugins/keyboard-navigation/test/toolbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
/**
* @license
* Copyright 2024 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/

/**
* @fileoverview A custom toolbox for the plugin test.
*/

export const toolbox = {
kind: 'categoryToolbox',
contents: [
{
kind: 'category',
name: 'Logic',
categorystyle: 'logic_category',
contents: [
{
type: 'controls_if',
kind: 'block',
},
{
type: 'logic_compare',
kind: 'block',
fields: {
OP: 'EQ',
},
},
{
type: 'logic_operation',
kind: 'block',
fields: {
OP: 'AND',
},
},
],
},
{
kind: 'category',
name: 'Loops',
categorystyle: 'loop_category',
contents: [
{
type: 'controls_repeat_ext',
kind: 'block',
inputs: {
TIMES: {
shadow: {
type: 'math_number',
fields: {
NUM: 10,
},
},
},
},
},
{
type: 'controls_repeat',
kind: 'block',
enabled: false,
fields: {
TIMES: 10,
},
},
{
type: 'controls_whileUntil',
kind: 'block',
fields: {
MODE: 'WHILE',
},
},
{
type: 'controls_for',
kind: 'block',
fields: {
VAR: {
name: 'i',
},
},
inputs: {
FROM: {
shadow: {
type: 'math_number',
fields: {
NUM: 1,
},
},
},
TO: {
shadow: {
type: 'math_number',
fields: {
NUM: 10,
},
},
},
BY: {
shadow: {
type: 'math_number',
fields: {
NUM: 1,
},
},
},
},
},
{
type: 'controls_forEach',
kind: 'block',
fields: {
VAR: {
name: 'j',
},
},
},
{
type: 'controls_flow_statements',
kind: 'block',
enabled: false,
fields: {
FLOW: 'BREAK',
},
},
],
},
{
kind: 'sep',
},
{
kind: 'category',
name: 'Variables',
custom: 'VARIABLE',
categorystyle: 'variable_category',
},
{
kind: 'category',
name: 'Buttons and Blocks',
categorystyle: 'loop_category',
contents: [
{
type: 'controls_repeat',
kind: 'block',
fields: {
TIMES: 10,
},
},
{
kind: 'BUTTON',
text: 'Randomize Button Style',
callbackkey: 'setRandomStyle',
},
{
kind: 'BUTTON',
text: 'Randomize Button Style',
callbackkey: 'setRandomStyle',
},
{
type: 'controls_repeat',
kind: 'block',
fields: {
TIMES: 10,
},
},
{
kind: 'BUTTON',
text: 'Randomize Button Style',
callbackkey: 'setRandomStyle',
},
],
},
{
kind: 'sep',
},
{
kind: 'category',
name: 'Nested Categories',
contents: [
{
kind: 'category',
name: 'sub-category 1',
contents: [
{
kind: 'BUTTON',
text: 'Randomize Button Style',
callbackkey: 'setRandomStyle',
},
{
type: 'logic_boolean',
kind: 'block',
fields: {
BOOL: 'TRUE',
},
},
],
},
{
kind: 'category',
name: 'sub-category 2',
contents: [
{
type: 'logic_boolean',
kind: 'block',
fields: {
BOOL: 'FALSE',
},
},
{
kind: 'BUTTON',
text: 'Randomize Button Style',
callbackkey: 'setRandomStyle',
},
],
},
],
},
],
};
Loading