github.com/ngocphuongnb/tetua@v0.0.7-alpha/packages/editor/src/menu/menu-item.ts (about)

     1  import { TetuaEditor } from "..";
     2  
     3  export class MenuItem {
     4    protected command = '';
     5    protected editor: TetuaEditor;
     6    protected label: string = '';
     7    protected icon: string = '';
     8    protected element: HTMLButtonElement | HTMLInputElement;
     9    protected subMenuitems: HTMLElement[] = [];
    10  
    11    constructor(editor: TetuaEditor) {
    12      this.editor = editor;
    13    }
    14  
    15    public init() {
    16      this.element = document.createElement('button');
    17      this.element.className = 'btn'
    18  
    19      if (this.icon) {
    20        this.element.innerHTML = this.icon;
    21        this.element.setAttribute('title', this.label);
    22      } else {
    23        this.element.innerText = this.label;
    24      }
    25      this.element.addEventListener('click', (e: MouseEvent) => {
    26        this.handler.bind(this)(e);
    27  
    28        if (this.command) {
    29          if (this.editor.tiptapEditor.isActive(this.command)) {
    30            this.element.classList.add('active');
    31          } else {
    32            this.element.classList.remove('active');
    33          }
    34        }
    35      });
    36    }
    37  
    38    public update() {
    39      if (this.editor.tiptapEditor.isActive(this.command)) {
    40        this.element.classList.add('active');
    41      } else {
    42        this.element.classList.remove('active');
    43      }
    44    }
    45  
    46    protected handler(e: MouseEvent): void {
    47      e.preventDefault();
    48    }
    49  
    50    getElement() {
    51      if (this.subMenuitems.length > 0) {
    52        const dropdown = document.createElement('div');
    53        dropdown.className = 'mely-editor-dropdown';
    54        const trigger = document.createElement('div');
    55        trigger.className = 'mely-editor-dropdown-trigger';
    56        trigger.innerHTML = '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>';
    57        trigger.addEventListener('click', (e: MouseEvent) => {
    58          e.preventDefault();
    59          e.stopImmediatePropagation();
    60        });
    61  
    62        this.subMenuitems.forEach(item => {
    63          dropdown.appendChild(item);
    64        });
    65        trigger.append(dropdown);
    66        this.element.append(trigger);
    67        this.element.classList.add('has-sub-menu')
    68      }
    69      return this.element;
    70    }
    71  }