chore: add keyboard nav to advanced playground (#9359)

This commit is contained in:
Maribeth Moffatt
2025-09-12 10:59:37 -07:00
committed by GitHub
parent 2c46686d7d
commit 2649f5171d
3 changed files with 41 additions and 0 deletions

10
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"devDependencies": { "devDependencies": {
"@blockly/block-test": "^7.0.2", "@blockly/block-test": "^7.0.2",
"@blockly/dev-tools": "^9.0.2", "@blockly/dev-tools": "^9.0.2",
"@blockly/keyboard-navigation": "^3.0.1",
"@blockly/theme-modern": "^7.0.1", "@blockly/theme-modern": "^7.0.1",
"@hyperjump/browser": "^1.1.4", "@hyperjump/browser": "^1.1.4",
"@hyperjump/json-schema": "^1.5.0", "@hyperjump/json-schema": "^1.5.0",
@@ -199,6 +200,15 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/@blockly/keyboard-navigation": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@blockly/keyboard-navigation/-/keyboard-navigation-3.0.1.tgz",
"integrity": "sha512-qSOPqsqRgkSLEoUeEZc81PWe558pXqY0e+4jkRODoAD+I1hMpCoD+6ivveRp7Jpb8WE1lj2PrAFOVuIVpphjHA==",
"dev": true,
"peerDependencies": {
"blockly": "^12.3.0"
}
},
"node_modules/@blockly/theme-dark": { "node_modules/@blockly/theme-dark": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-8.0.1.tgz", "resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-8.0.1.tgz",

View File

@@ -102,6 +102,7 @@
"devDependencies": { "devDependencies": {
"@blockly/block-test": "^7.0.2", "@blockly/block-test": "^7.0.2",
"@blockly/dev-tools": "^9.0.2", "@blockly/dev-tools": "^9.0.2",
"@blockly/keyboard-navigation": "^3.0.1",
"@blockly/theme-modern": "^7.0.1", "@blockly/theme-modern": "^7.0.1",
"@hyperjump/browser": "^1.1.4", "@hyperjump/browser": "^1.1.4",
"@hyperjump/json-schema": "^1.5.0", "@hyperjump/json-schema": "^1.5.0",

View File

@@ -18,6 +18,11 @@
await loadScript( await loadScript(
'../../node_modules/@blockly/theme-modern/dist/index.js', '../../node_modules/@blockly/theme-modern/dist/index.js',
); );
await loadScript(
'../../node_modules/@blockly/keyboard-navigation/dist/index.js',
);
let kbNavigation;
function start() { function start() {
setBackgroundColour(); setBackgroundColour();
@@ -47,6 +52,28 @@
// Refresh theme. // Refresh theme.
ws.setTheme(ws.getTheme()); ws.setTheme(ws.getTheme());
}); });
// Keyboard navigation options.
const kbOptions = {
'Enable keyboard navigation': false,
};
gui.remember(kbOptions);
gui.add(kbOptions, 'Enable keyboard navigation').onChange((enabled) => {
setupKeyboardNav(enabled, playground);
});
// Set up keyboard navigation on page load
setupKeyboardNav(kbOptions['Enable keyboard navigation'], playground);
}
function setupKeyboardNav(enabled, playground) {
if (enabled) {
kbNavigation = new KeyboardNavigation(playground.getWorkspace());
} else {
if (kbNavigation) {
kbNavigation.dispose();
}
}
} }
function initPlayground() { function initPlayground() {
@@ -101,6 +128,8 @@
}; };
Blockly.ContextMenuItems.registerCommentOptions(); Blockly.ContextMenuItems.registerCommentOptions();
KeyboardNavigation.registerKeyboardNavigationStyles();
// TODO: register the navigation-deferring toolbox.
createPlayground( createPlayground(
document.getElementById('root'), document.getElementById('root'),
@@ -153,6 +182,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="shortcuts"></div>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>