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": {
"@blockly/block-test": "^7.0.2",
"@blockly/dev-tools": "^9.0.2",
"@blockly/keyboard-navigation": "^3.0.1",
"@blockly/theme-modern": "^7.0.1",
"@hyperjump/browser": "^1.1.4",
"@hyperjump/json-schema": "^1.5.0",
@@ -199,6 +200,15 @@
"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": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/@blockly/theme-dark/-/theme-dark-8.0.1.tgz",

View File

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

View File

@@ -18,6 +18,11 @@
await loadScript(
'../../node_modules/@blockly/theme-modern/dist/index.js',
);
await loadScript(
'../../node_modules/@blockly/keyboard-navigation/dist/index.js',
);
let kbNavigation;
function start() {
setBackgroundColour();
@@ -47,6 +52,28 @@
// Refresh theme.
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() {
@@ -101,6 +128,8 @@
};
Blockly.ContextMenuItems.registerCommentOptions();
KeyboardNavigation.registerKeyboardNavigationStyles();
// TODO: register the navigation-deferring toolbox.
createPlayground(
document.getElementById('root'),
@@ -153,6 +182,7 @@
</style>
</head>
<body>
<div id="shortcuts"></div>
<div id="root"></div>
</body>
</html>