toolbar.js

/**
 * Toolbar Module
 * จัดการแถบเครื่องมือและการทำงานของปุ่ม
 */
(function(global) {
  'use strict';

  /**
   * คลาส Toolbar
   * จัดการแถบเครื่องมือและการทำงานของปุ่ม
   */
  class Toolbar {
    constructor(editor) {
      this.editor = editor;
      this.toolbar = null;
      this.buttons = {};
      this.shortcuts = {};
    }

    /**
     * เริ่มต้นโมดูลแถบเครื่องมือ
     */
    init() {
      this.setupEventListeners();
      this.setupKeyboardShortcuts();

      if (this.editor.config.debug) {
        console.log('Toolbar เริ่มต้นแล้ว');
      }
    }

    /**
     * ตั้งค่า event listeners
     */
    setupEventListeners() {
      // ฟังเหตุการณ์การเปลี่ยนแปลงโหมดตัวแก้ไข
      this.editor.on('editor:mode-changed', (data) => {
        this.updateToolbarState(data.mode);
      });

      // ฟังเหตุการณ์การเริ่มต้นแก้ไขเนื้อหา
      this.editor.on('content:editing-started', () => {
        this.showContentToolbar();
      });

      // ฟังเหตุการณ์การสิ้นสุดการแก้ไขเนื้อหา
      this.editor.on('content:editing-ended', () => {
        this.hideContentToolbar();
      });
    }

    /**
     * ตั้งค่าคีย์บอร์ดลัด
     */
    setupKeyboardShortcuts() {
      // กำหนดคีย์บอร์ดลัด
      this.shortcuts = {
        'Ctrl+S': () => {
          this.editor.saveTemplate();
        },
        'Ctrl+Z': () => {
          this.editor.emit('toolbar:undo');
        },
        'Ctrl+Y': () => {
          this.editor.emit('toolbar:redo');
        },
        'Ctrl+E': () => {
          this.editor.emit('toolbar:edit');
        },
        'Ctrl+P': () => {
          this.editor.emit('toolbar:preview');
        },
        'Escape': () => {
          if (this.editor.state === 'edit') {
            this.editor.emit('toolbar:preview');
          }
        }
      };

      // เพิ่ม event listener สำหรับคีย์บอร์ดลัด
      document.addEventListener('keydown', (e) => {
        const key = this.getShortcutKey(e);
        if (this.shortcuts[key]) {
          e.preventDefault();
          this.shortcuts[key]();
        }
      });
    }

    /**
     * รับคีย์ลัด
     */
    getShortcutKey(e) {
      const parts = [];

      if (e.ctrlKey || e.metaKey) {
        parts.push('Ctrl');
      }

      if (e.shiftKey) {
        parts.push('Shift');
      }

      if (e.altKey) {
        parts.push('Alt');
      }

      parts.push(e.key);

      return parts.join('+');
    }

    /**
     * อัปเดตสถานะแถบเครื่องมือ
     */
    updateToolbarState(mode) {
      const editBtn = document.getElementById('toolbar-edit-btn');
      const previewBtn = document.getElementById('toolbar-preview-btn');

      if (mode === 'edit') {
        if (editBtn) editBtn.classList.add('active');
        if (previewBtn) previewBtn.classList.remove('active');
      } else if (mode === 'preview') {
        if (editBtn) editBtn.classList.remove('active');
        if (previewBtn) previewBtn.classList.add('active');
      }
    }

    /**
     * แสดงแถบเครื่องมือเนื้อหา
     */
    showContentToolbar() {
      const contentToolbar = document.getElementById('editor-text-toolbar');
      if (contentToolbar) {
        contentToolbar.style.display = 'flex';
        setTimeout(() => {
          contentToolbar.classList.add('editor-toolbar-active');
        }, 10);
      }
    }

    /**
     * ซ่อนแถบเครื่องมือเนื้อหา
     */
    hideContentToolbar() {
      const contentToolbar = document.getElementById('editor-text-toolbar');
      if (contentToolbar) {
        contentToolbar.classList.remove('editor-toolbar-active');
        setTimeout(() => {
          contentToolbar.style.display = 'none';
        }, 200);
      }
    }
  }

  // เปิดเผยคลาส Toolbar ทั่วโลก
  global.Toolbar = Toolbar;

})(typeof window !== 'undefined' ? window : this);