diff --git a/assets/js/keyboard-shortcuts.js b/assets/js/keyboard-shortcuts.js index e27710e..661364d 100644 --- a/assets/js/keyboard-shortcuts.js +++ b/assets/js/keyboard-shortcuts.js @@ -4,18 +4,60 @@ document.addEventListener('DOMContentLoaded', function() { document.addEventListener('keydown', function(e) { - // Skip if user is typing in an input/textarea - 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(); - const editButton = document.getElementById('editButton'); - if (editButton && editButton.classList.contains('active')) { - editButton.click(); + // 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) { + e.target.blur(); + } + + // Cancel edit mode on ticket pages + const editButton = document.getElementById('editButton'); + if (editButton && editButton.classList.contains('active')) { + 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 ║ -╚════════════════════════════════════════╝ + // 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 = ` + `; - toast.info(helpText, 5000); + document.body.appendChild(modal); }