ETPlot/assets/js/keyboard-manager.js

/**
 * Keyboard shortcuts management
 */
export class KeyboardManager {
  constructor(galleryApp) {
    this.app = galleryApp;
    this.init();
  }

  /**
   * Initialize keyboard shortcuts
   */
  init() {
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.key === 'k') {
        e.preventDefault();
        const searchBox = document.getElementById('searchBox');
        if (searchBox) searchBox.focus();
      }
      
      if (e.ctrlKey && e.key === 'r') {
        e.preventDefault();
        if (this.app.recentPlotsManager) {
          this.app.recentPlotsManager.toggleSidebar();
        }
      }
      
      if (e.ctrlKey && e.key === 'c') {
        e.preventDefault();
        if (this.app.comparisonManager) {
          this.app.comparisonManager.toggleCompareMode();
        }
      }
      
      if (e.ctrlKey && e.key === 't') {
        e.preventDefault();
        if (this.app.themeManager) {
          this.app.themeManager.toggle();
        }
      }
      
      if (e.ctrlKey && e.key === 'v') {
        e.preventDefault();
        if (this.app.viewManager) {
          this.app.viewManager.cycleView();
        }
      }
      
      if (e.ctrlKey && e.key === 'n') {
        e.preventDefault();
        if (this.app.sortManager) {
          this.app.sortManager.setSortType('name');
        }
      }
      
      if (e.ctrlKey && e.key === 'm') {
        e.preventDefault();
        if (this.app.sortManager) {
          this.app.sortManager.setSortType('time');
        }
      }
      
      if (e.ctrlKey && e.key === 'o') {
        e.preventDefault();
        if (this.app.sortManager) {
          this.app.sortManager.toggleSortOrder();
        }
      }
      
      if (e.key === '?' && !e.ctrlKey && !e.altKey && !e.metaKey) {
        e.preventDefault();
        if (this.app.utils && this.app.utils.toggleShortcutsHelp) {
          this.app.utils.toggleShortcutsHelp();
        }
      }
      
      if (e.key === 'Escape') {
        this.handleEscape();
      }
    });
  }

  /**
   * Handle escape key actions
   */
  handleEscape() {
    // If in plot selection mode, cancel it
    if (this.app.comparisonManager && this.app.comparisonManager.comparisonSlot) {
      // Find and remove instruction element
      const instruction = document.getElementById('comparisonInstruction');
      if (instruction) instruction.remove();
      
      // Reset grid item styles
      const gridItems = document.querySelectorAll('.grid-item');
      gridItems.forEach(item => {
        item.style.cursor = '';
        item.style.border = '';
      });
      
      // Show overlay again
      const comparisonOverlay = document.getElementById('comparisonOverlay');
      if (comparisonOverlay) comparisonOverlay.classList.add('open');
      this.app.comparisonManager.comparisonSlot = null;
      return;
    }
    
    // Close comparison overlay if open
    const comparisonOverlay = document.getElementById('comparisonOverlay');
    if (comparisonOverlay && comparisonOverlay.classList.contains('open')) {
      if (this.app.comparisonManager) {
        this.app.comparisonManager.hideComparisonOverlay();
      }
      return;
    }
    
    // Other ESC behaviors
    const searchResults = document.getElementById('searchResults');
    if (searchResults) searchResults.style.display = 'none';
    
    const sidebar = document.getElementById('sidebar');
    if (sidebar && sidebar.classList.contains('open')) {
      if (this.app.recentPlotsManager) {
        this.app.recentPlotsManager.toggleSidebar();
      }
    }
    
    const shortcutsHelp = document.getElementById('shortcutsHelp');
    if (shortcutsHelp) shortcutsHelp.style.display = 'none';
  }
}