feat(cms): keyboard shortcuts — Ctrl+S save, Ctrl+P publish, ? help
CI Pipeline with Test Management / 🧪 Run Tests & Generate Reports (push) Waiting to run
CI Pipeline with Test Management / 🐳 Docker Integration Tests (push) Blocked by required conditions
CI Pipeline with Test Management / 🏗️ Build Docker Image (push) Blocked by required conditions
CI Pipeline with Test Management / 📊 Generate Test Summary (push) Blocked by required conditions
Test Reporting & Gherkin Analysis / 🧪 Run Tests & Generate Reports (push) Waiting to run
Test Reporting & Gherkin Analysis / 📊 Analyze Test Coverage (push) Blocked by required conditions
Test Reporting & Gherkin Analysis / 🔄 Sync with Linear (push) Blocked by required conditions
Test Reporting & Gherkin Analysis / ⚡ Performance Monitoring (push) Blocked by required conditions

- Ctrl/Cmd+S saves (native browser save dialog suppressed)
- Ctrl/Cmd+P publishes; Ctrl/Cmd+Shift+V opens the Versions panel
- '?' toggles a shortcuts overlay (Esc/click closes)
- plain typing in inputs never triggers actions (modifiers required;
  '?' only outside editing targets)
- jsdom regression tests run the real client script with dispatched
  KeyboardEvents; the client is evaluated once per suite because each
  eval would stack another keydown listener on the shared document

Closes MITHOME-75
This commit is contained in:
Do Siki
2026-08-19 22:52:09 +02:00
parent 8f72b91fb1
commit 6030c48abb
4 changed files with 168 additions and 0 deletions
+56
View File
@@ -329,3 +329,59 @@ render(DATA, document.getElementById('editor'));
// Auto-dismiss toast
const toast = document.querySelector('.toast');
if (toast) setTimeout(() => toast.remove(), 3500);
// ── Keyboard shortcuts ───────────────────────────────────────────────────────
// Ctrl/Cmd+S save · Ctrl/Cmd+P publish · Ctrl/Cmd+Shift+V versions · ? help
// Plain typing in inputs never triggers actions — the handler requires the
// modifier key (or, for '?', a non-editing target).
function showShortcutsOverlay() {
const existing = document.getElementById('shortcuts-overlay');
if (existing) { existing.remove(); return; }
const overlay = document.createElement('div');
overlay.id = 'shortcuts-overlay';
overlay.style.cssText = 'position:fixed;inset:0;background:rgba(15,17,23,.75);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;';
overlay.innerHTML = `
<div style="background:#1a2035;border:1px solid #2d3748;border-radius:14px;padding:28px 32px;max-width:420px;width:100%;font-size:14px;line-height:2;color:#e2e8f0;">
<h2 style="font-size:16px;color:#93c5fd;margin-bottom:12px;">⌨️ Gyorsbillentyűk</h2>
<div><kbd style="background:#0f1420;border:1px solid #2d3748;border-radius:5px;padding:2px 8px;font-family:monospace;">Ctrl/Cmd + S</kbd> — Mentés</div>
<div><kbd style="background:#0f1420;border:1px solid #2d3748;border-radius:5px;padding:2px 8px;font-family:monospace;">Ctrl/Cmd + P</kbd> — Publikálás</div>
<div><kbd style="background:#0f1420;border:1px solid #2d3748;border-radius:5px;padding:2px 8px;font-family:monospace;">Ctrl/Cmd + Shift + V</kbd> — Verziók</div>
<div><kbd style="background:#0f1420;border:1px solid #2d3748;border-radius:5px;padding:2px 8px;font-family:monospace;">?</kbd> — ez a súgó (Esc: bezárás)</div>
</div>`;
overlay.addEventListener('click', () => overlay.remove());
document.body.appendChild(overlay);
}
document.addEventListener('keydown', e => {
// Esc closes the shortcut overlay if open
if (e.key === 'Escape') {
const overlay = document.getElementById('shortcuts-overlay');
if (overlay) { overlay.remove(); e.preventDefault(); }
return;
}
const mod = e.ctrlKey || e.metaKey;
if (mod && !e.shiftKey && !e.altKey && (e.key === 's' || e.key === 'S')) {
e.preventDefault();
save();
return;
}
if (mod && !e.shiftKey && !e.altKey && (e.key === 'p' || e.key === 'P')) {
e.preventDefault();
publish();
return;
}
if (mod && e.shiftKey && (e.key === 'v' || e.key === 'V')) {
e.preventDefault();
window.open('/versions?file=' + encodeURIComponent(FILE), '_blank');
return;
}
if (!mod && !e.ctrlKey && !e.metaKey && !e.altKey && e.key === '?') {
const target = e.target;
const isEditing = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);
if (!isEditing) {
e.preventDefault();
showShortcutsOverlay();
}
}
});