Add keyboard shortcuts panel

index.html

@@ -1292,51 +1292,7 @@ <h2 id="modal-title" data-i18n="about_heading">
  id="info-panel"
  role="complementary"
  aria-label="Information panel"
- >
- <details id="info-details">
- <summary>
- <strong data-i18n="keyboard_controls">
- Keyboard controls info [Ctrl + /]
- </strong>
- </summary>
-
- <div id="info-content" class="content" tabindex="-1">
- <table role="table" aria-label="Keyboard shortcuts">
- <thead class="sr-only">
- <tr>
- <th scope="col">Shortcut</th>
- <th scope="col">Action</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Ctrl + M</td>
- <td data-i18n="keyboard_menu">Main menu</td>
- </tr>
- <tr>
- <td>Ctrl + P</td>
- <td data-i18n="keyboard_play">Play</td>
- </tr>
- <tr>
- <td>Ctrl + G</td>
- <td data-i18n="keyboard_gizmos">Gizmos</td>
- </tr>
- <tr>
- <td>Ctrl + E</td>
- <td data-i18n="keyboard_workspace">Code editor</td>
- </tr>
- <tr>
- <td>Ctrl + L</td>
- <td data-i18n="keyboard_navigation">
- Browser navigation bar (overridden shortcuts work from
- here)
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </details>
- </aside>
+ ></aside>
 
  <footer id="site-footer">
  <nav aria-label="Footer navigation">

main/accessibility.js

@@ -251,6 +251,195 @@ const GizmoMenuManager = {
  },
 };
 
+// Modal showing all keyboard shortcuts, accessed with Ctrl + /
+
+// Check their platform (Mac or not Mac) to show the correct modifier key
+function isMac() {
+ return navigator.platform.toUpperCase().includes("MAC");
+}
+
+// List of shortcuts to show in the panel, with categories for grouping
+function getShortcuts() {
+ const mod = isMac() ? "⌘" : "Ctrl";
+ return [
+ { label: "Show/hide shortcut help", keys: `${mod} + /`, category: "Main" },
+ {
+ label: "Move between menus, canvas and editor",
+ keys: `Tab`,
+ category: "Main",
+ },
+ { label: "Confirm", keys: `Enter`, category: "Main" },
+ { label: "Exit", keys: `Esc`, category: "Main" },
+ { label: "Play", keys: `${mod} + P`, category: "Main" },
+ { label: "Undo", keys: `${mod} + Z`, category: "Main" },
+ { label: "Redo", keys: `${mod} + Shift + Z`, category: "Main" },
+ {
+ label: "Browser navigation bar (overriden shortcuts work from here)",
+ keys: `${mod} + L`,
+ category: "Main",
+ },
+
+ { label: "Main menu", keys: `${mod} + M`, category: "Menu" },
+ { label: "Open file", keys: `${mod} + O`, category: "Menu" },
+ { label: "Save / export", keys: `${mod} + S`, category: "Menu" },
+
+ {
+ label: "Open/close area menu",
+ keys: `${mod} + B`,
+ category: "Area menu",
+ },
+ { label: "Toggle area", keys: `Tab`, category: "Area menu" },
+ { label: "Select area", keys: `1-9 / Enter`, category: "Area menu" },
+
+ { label: "Code editor", keys: `${mod} + E`, category: "Editor" },
+ {
+ label: "Add block by name",
+ keys: `${mod} + ]`,
+ category: "Editor",
+ },
+ { label: "Search for a block", keys: `${mod} + F`, category: "Editor" },
+ { label: "Move through blocks", keys: `↑ ↓ ← →`, category: "Editor" },
+
+ { label: "Gizmos", keys: `${mod} + G`, category: "Gizmos" },
+ {
+ label: "Select gizmo",
+ keys: `1-9`,
+ category: "Gizmos",
+ },
+
+ {
+ label: "Keyboard cursor for gizmos",
+ keys: `↑ ↓ ← →`,
+ category: "Gizmos",
+ },
+ {
+ label: "Lock transform to axis",
+ keys: `X Y Z`,
+ category: "Gizmos",
+ },
+ { label: "Transform in 3D", keys: `↑ ↓ ← → PgUp PgDn`, category: "Gizmos" },
+ { label: "Focus camera on object", keys: `F`, category: "Gizmos" },
+
+ {
+ label: "Quick use colour in colour picker",
+ keys: `P`,
+ category: "Gizmos",
+ },
+ { label: "Delete object", keys: `Del`, category: "Gizmos" },
+ ];
+}
+
+// Formats keys for menu nicely
+// You can use + or / and these won't be <kbd> tagged
+function formatKeys(keys) {
+ return keys
+ .split(/( \+ | \/ )/)
+ .map((part) =>
+ part === " + " || part === " / "
+ ? part
+ : part
+ .split(" ")
+ .map((k) => `<kbd>${k}</kbd>`)
+ .join(" "),
+ )
+ .join("");
+}
+
+const ShortcutsPanel = {
+ panel: null,
+ dock: "left",
+
+ init() {
+ this.createPanel();
+ this.setupListeners();
+ },
+
+ createPanel() {
+ const div = document.createElement("div");
+ div.id = "shortcutsPanel";
+ div.className = "shortcuts-panel hidden shortcuts-panel--left";
+ div.setAttribute("role", "region");
+ div.setAttribute("aria-label", "Keyboard shortcuts");
+ div.innerHTML = `
+ <div class="shortcuts-panel__content">
+ <button type="button" class="close-button" id="closeShortcutsPanel" aria-label="Close keyboard shortcuts">&times;</button>
+ <h1 id="shortcuts-panel-title">Keyboard shortcuts</h1>
+ <table id="shortcuts-table"><tbody></tbody></table>
+ </div>`;
+ document.body.appendChild(div);
+ this.panel = div;
+ },
+
+ show() {
+ const tbody = this.panel.querySelector("tbody");
+ const groups = getShortcuts().reduce((acc, s) => {
+ (acc[s.category] ??= []).push(s);
+ return acc;
+ }, {});
+ tbody.innerHTML = Object.entries(groups)
+ .map(
+ ([cat, items]) => `
+ <tr><th colspan="2">${cat}</th></tr>
+ ${items.map(({ label, keys }) => `<tr><td>${label}</td><td>${formatKeys(keys)}</td></tr>`).join("")}
+ `,
+ )
+ .join("");
+ this.panel.classList.remove("hidden");
+ },
+
+ hide() {
+ this.panel.classList.add("hidden");
+ },
+
+ toggle() {
+ this.panel.classList.contains("hidden") ? this.show() : this.hide();
+ },
+
+ setDock(side) {
+ this.dock = side;
+ this.panel.classList.toggle("shortcuts-panel--left", side === "left");
+ this.panel.classList.toggle("shortcuts-panel--right", side === "right");
+ },
+
+ setupListeners() {
+ document.addEventListener("click", (e) => {
+ if (e.target.id === "closeShortcutsPanel") this.hide();
+ });
+ document.addEventListener("keydown", (e) => {
+ if (
+ (e.ctrlKey || e.metaKey) &&
+ !this.panel.classList.contains("hidden")
+ ) {
+ const t = e.target;
+ const tag = (t?.tagName || "").toLowerCase();
+ if (t?.isContentEditable || tag === "input" || tag === "textarea" || tag === "select") return;
+
+ if (e.key === "ArrowLeft") {
+ e.preventDefault();
+ this.setDock("left");
+ }
+ if (e.key === "ArrowRight") {
+ e.preventDefault();
+ this.setDock("right");
+ }
+ if (e.key === "ArrowUp") {
+ e.preventDefault();
+ const content = this.panel.querySelector(".shortcuts-panel__content");
+ content.scrollBy({ top: -100, behavior: "instant" });
+ }
+ if (e.key === "ArrowDown") {
+ e.preventDefault();
+ const content = this.panel.querySelector(".shortcuts-panel__content");
+ content.scrollBy({ top: 100, behavior: "instant" });
+ }
+ }
+ });
+ },
+};
+
 // Start it up
 AreaManager.init();
 GizmoMenuManager.init();
+ShortcutsPanel.init();
+
+export { ShortcutsPanel };

main/blockhandling.js

@@ -292,7 +292,7 @@ export function initializeBlockHandling() {
  return;
  }
 
- if (event.ctrlKey && event.key === ".") {
+ if ((event.ctrlKey || event.metaKey) && event.key === ".") {
  event.preventDefault();
 
  createKeywordBlockAtViewportCenter("keyword_block");
@@ -301,7 +301,7 @@ export function initializeBlockHandling() {
 
  // Handle Enter key for adding new blocks
  document.addEventListener("keydown", function (event) {
- if (event.ctrlKey && event.key === "]") {
+ if ((event.ctrlKey || event.metaKey) && event.key === "]") {
  const selectedBlock = getSelectedBlockForKeywordShortcut();
  event.preventDefault();
 

main/input.js

@@ -66,13 +66,6 @@ export function setupInput() {
  .querySelectorAll("#gizmoButtons button, #gizmoButtons input")
  .forEach(pushUnique);
 
- // 3) Info panel
- pushUnique(document.querySelector("#info-details summary"));
- const infoDetails = document.getElementById("info-details");
- if (infoDetails && infoDetails.open) {
- pushUnique(infoDetails.querySelector(".content"));
- }
-
  // 4) Logo link + resizer
  pushUnique(document.querySelector("#info-panel-link"));
  pushUnique(document.querySelector("#resizer"));
@@ -198,13 +191,6 @@ export function setupInput() {
  ) {
  // Let custom management handle this - will go to next UI element
  }
- // If we're on the summary and details is open, let browser handle the Tab into content
- else if (
- activeElement.matches("#info-details summary") &&
- detailsElement.open
- ) {
- return; // Let browser handle tab into details content
- }
  // If we're anywhere inside open details content, let browser handle it
  else if (activeElement.closest("#info-details") && detailsElement.open) {
  return; // Let browser handle navigation within details
@@ -302,7 +288,11 @@ export function setupInput() {
 
  function handleCanvasKeyboard(e) {
  // Handle Ctrl+Z for undo when canvas is focused
- if (e.ctrlKey && e.key.toLowerCase() === "z" && !e.shiftKey) {
+ if (
+ (e.ctrlKey || e.metaKey) &&
+ e.key.toLowerCase() === "z" &&
+ !e.shiftKey
+ ) {
  e.preventDefault();
  const workspace = window.mainWorkspace || Blockly.getMainWorkspace();
  if (workspace) {
@@ -314,7 +304,7 @@ export function setupInput() {
 
  // Handle Ctrl+Shift+Z or Ctrl+Y for redo when canvas is focused
  if (
- (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "z") ||
+ ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "z") ||
  (e.ctrlKey && e.key.toLowerCase() === "y")
  ) {
  e.preventDefault();

main/main.js

@@ -48,7 +48,7 @@ import {
  initializeSavedLanguage,
  translate,
 } from "./translation.js";
-import "./accessibility.js";
+import { ShortcutsPanel } from "./accessibility.js";
 
 function isEmbedModeEnabled() {
  const embedParam = new URLSearchParams(window.location.search).get("embed");
@@ -577,13 +577,8 @@ function initializeApp() {
  break;
 
  case "/": {
- // Ctrl+/ - Toggle info details
  e.preventDefault();
- const infoSummary = document.querySelector("#info-details summary");
- if (infoSummary) {
- infoSummary.click(); // Simulate a click to toggle details
- infoSummary.focus(); // Move focus to the summary
- }
+ ShortcutsPanel.toggle();
  break;
  }
 
@@ -779,26 +774,6 @@ window.onload = async function () {
  }
  });
 
- const infoDetails = document.getElementById("info-details");
- if (infoDetails) {
- infoDetails.addEventListener("toggle", function () {
- if (this.open) {
- setTimeout(() => {
- const content = this.querySelector(".content");
- if (content) {
- content.setAttribute("tabindex", "0"); // Make it focusable
- content.focus();
- }
- }, 10);
- } else {
- const content = this.querySelector(".content");
- if (content) {
- content.setAttribute("tabindex", "-1"); // Remove from tab order when closed
- }
- }
- });
- }
-
  // Initial view setup
  window.loadingCode = true;