LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Keyboard shortcuts for ? key and ESC modal closing

Browse Source 
- Fix ? shortcut: removed incorrect !e.shiftKey condition
- ESC now closes all modal types (overlay, settings, advanced search)
- Replace toast-based help with proper styled modal
- ESC also blurs focused inputs before canceling edit mode

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-23 22:04:39 -05:00
parent 11a593a7dd
commit ee317d6662
1 changed files with 84 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
assets/js/keyboard-shortcuts.js
View File

@@ -4,18 +4,60 @@
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('keydown', function(e) {
// Skip if user is typing in an input/textarea
// ESC: Close modals, cancel edit mode, blur inputs
if (e.key === 'Escape') {
// Close any open modals first
const openModals = document.querySelectorAll('.modal-overlay');
let closedModal = false;
openModals.forEach(modal => {
if (modal.style.display !== 'none' && modal.offsetParent !== null) {
modal.remove();
document.body.classList.remove('modal-open');
closedModal = true;
}
});
// Close settings modal if open
const settingsModal = document.getElementById('settingsModal');
if (settingsModal && settingsModal.style.display !== 'none') {
settingsModal.style.display = 'none';
document.body.classList.remove('modal-open');
closedModal = true;
}
// Close advanced search modal if open
const searchModal = document.getElementById('advancedSearchModal');
if (searchModal && searchModal.style.display !== 'none') {
searchModal.style.display = 'none';
document.body.classList.remove('modal-open');
closedModal = true;
}
// If we closed a modal, stop here
if (closedModal) {
e.preventDefault();
return;
}
// Blur any focused input
if (e.target.tagName === 'INPUT' ||
e.target.tagName === 'TEXTAREA' ||
e.target.isContentEditable) {
// Allow ESC to exit edit mode even when in input
if (e.key === 'Escape') {
e.target.blur();
}
// Cancel edit mode on ticket pages
const editButton = document.getElementById('editButton');
if (editButton && editButton.classList.contains('active')) {
editButton.click();
window.location.reload();
}
return;
}
// Skip other shortcuts if user is typing in an input/textarea
if (e.target.tagName === 'INPUT' ||
e.target.tagName === 'TEXTAREA' ||
e.target.isContentEditable) {
return;
}
@@ -39,15 +81,6 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
// ESC: Cancel edit mode
if (e.key === 'Escape') {
const editButton = document.getElementById('editButton');
if (editButton && editButton.classList.contains('active')) {
// Reset without saving
window.location.reload();
}
}
// Ctrl/Cmd + K: Focus search (on dashboard)
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
@@ -58,24 +91,43 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
// ? : Show keyboard shortcuts help
if (e.key === '?' && !e.shiftKey) {
// ? : Show keyboard shortcuts help (requires Shift on most keyboards)
if (e.key === '?') {
e.preventDefault();
showKeyboardHelp();
}
});
});
function showKeyboardHelp() {
const helpText = `
╔════════════════════════════════════════╗
║ KEYBOARD SHORTCUTS ║
╠════════════════════════════════════════╣
║ Ctrl/Cmd + E : Toggle Edit Mode ║
║ Ctrl/Cmd + S : Save Changes ║
║ Ctrl/Cmd + K : Focus Search ║
║ ESC : Cancel Edit/Close ║
║ ? : Show This Help ║
╚════════════════════════════════════════╝
`;
toast.info(helpText, 5000);
// Check if help is already showing
if (document.getElementById('keyboardHelpModal')) {
return;
}
const modal = document.createElement('div');
modal.id = 'keyboardHelpModal';
modal.className = 'modal-overlay';
modal.innerHTML = `
<div class="modal-content ascii-frame-outer" style="max-width: 400px;">
<div class="ascii-frame">
<div class="ascii-content">
<h3 style="margin: 0 0 1rem 0; color: var(--terminal-green);">KEYBOARD SHORTCUTS</h3>
<div class="modal-body" style="padding: 0;">
<table style="width: 100%; border-collapse: collapse;">
<tr><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd + E</kbd></td><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">Toggle Edit Mode</td></tr>
<tr><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd + S</kbd></td><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">Save Changes</td></tr>
<tr><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd + K</kbd></td><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">Focus Search</td></tr>
<tr><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);"><kbd>ESC</kbd></td><td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">Close Modal / Cancel</td></tr>
<tr><td style="padding: 0.5rem;"><kbd>?</kbd></td><td style="padding: 0.5rem;">Show This Help</td></tr>
</table>
</div>
<div class="modal-footer" style="margin-top: 1rem;">
<button class="btn btn-secondary" onclick="this.closest('.modal-overlay').remove()">Close</button>
</div>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
}