mirror of
https://github.com/google/blockly.git
synced 2026-01-06 16:40:07 +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": {
|
"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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user