mirror of
https://github.com/google/blockly.git
synced 2025-12-16 06:10:12 +01:00
chore: add keyboard nav to advanced playground (#9359)
This commit is contained in:
10
package-lock.json
generated
10
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user