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

     1  import { TetuaEditor } from '..';
     2  import { menuItems } from './items';
     3  import { MenuItem } from './menu-item';
     4  
     5  export class Menu {
     6    private editor: TetuaEditor;
     7    public menuElement: HTMLDivElement;
     8    public menuButtonsElement: HTMLDivElement;
     9    public menuContainerElement: HTMLDivElement;
    10    public menuSwitcherElement: HTMLLabelElement;
    11    private menuButtonInstances: MenuItem[] = [];
    12  
    13    public constructor(editor: TetuaEditor) {
    14      this.editor = editor;
    15      this.menuElement = document.createElement('div');
    16      this.menuElement.className = 'mely-editor-menu';
    17  
    18      this.menuButtonsElement = document.createElement('div');
    19      this.menuButtonsElement.className = 'mely-editor-menu-buttons';
    20  
    21      this.menuContainerElement = document.createElement('div');
    22      this.menuContainerElement.className = 'mely-editor-menu-container';
    23  
    24      this.menuButtonsElement.appendChild(this.menuElement);
    25      this.menuContainerElement.appendChild(this.menuButtonsElement);
    26    }
    27  
    28    public initialize() {
    29      this.editor.editorElement.insertBefore(this.menuContainerElement, this.editor.editorElement.firstChild);
    30      
    31      for (const MenuButton of menuItems) {
    32        const b = new MenuButton(this.editor);
    33        b.init();
    34        this.menuElement.appendChild(b.getElement());
    35        this.menuButtonInstances.push(b);
    36      }
    37  
    38      this.createSwitchEditorModeButton();
    39    }
    40  
    41    private createSwitchEditorModeButton() {
    42      this.menuSwitcherElement = document.createElement('label');
    43      const input = document.createElement('input');
    44      const slider = document.createElement('span');
    45  
    46      this.menuSwitcherElement.innerHTML = 'Markdown ';
    47      this.menuSwitcherElement.className = 'switch';
    48      this.menuSwitcherElement.setAttribute('for', 'use-markdown');
    49      
    50      input.id = 'use-markdown';
    51      input.type = 'checkbox';
    52      input.value = '1';
    53      input.addEventListener('change', this.switchMode.bind(this));
    54      slider.className = 'slider';
    55  
    56      this.menuSwitcherElement.appendChild(input);
    57      this.menuSwitcherElement.appendChild(slider);
    58  
    59      this.menuSwitcherElement.appendChild(input);
    60      this.menuSwitcherElement.appendChild(slider);
    61      this.menuContainerElement.appendChild(this.menuSwitcherElement);
    62    }
    63  
    64    private switchMode(e: Event) {
    65      e.preventDefault();
    66      this.editor.useMarkdown = (e.target as HTMLInputElement).checked;
    67      if (this.editor.useMarkdown) {
    68        this.editor.tiptapEditorElement.style.display = 'none';
    69        this.editor.textareaElement.style.display = 'block';
    70        this.editor.tiptapEditorElement.setAttribute('hidden', 'true');
    71      } else {
    72        this.editor.tiptapEditorElement.style.display = 'block';
    73        this.editor.textareaElement.style.display = 'none';
    74        this.editor.tiptapEditorElement.removeAttribute('hidden');
    75      }
    76    }
    77  
    78    public update() {
    79      for (const b of this.menuButtonInstances) {
    80        b.update();
    81      }
    82    }
    83  }