BookStack Code Mirror - bookstack/blob - resources/js/components/editor-toolbox.js

   1 import {Component} from './component';
   2
   3 export class EditorToolbox extends Component {
   4
   5     setup() {
   6         // Elements
   7         this.container = this.$el;
   8         this.buttons = this.$manyRefs.tabButton;
   9         this.contentElements = this.$manyRefs.tabContent;
  10         this.toggleButton = this.$refs.toggle;
  11
  12         this.setupListeners();
  13
  14         // Set the first tab as active on load
  15         this.setActiveTab(this.contentElements[0].dataset.tabContent);
  16
  17         setTimeout(() => {
  18             this.setActiveTab('files', true);
  19         }, 500);
  20     }
  21
  22     setupListeners() {
  23         // Toolbox toggle button click
  24         this.toggleButton.addEventListener('click', () => this.toggle());
  25         // Tab button click
  26         this.container.addEventListener('click', event => {
  27             const button = event.target.closest('button');
  28             if (this.buttons.includes(button)) {
  29                 const name = button.dataset.tab;
  30                 this.setActiveTab(name, true);
  31             }
  32         });
  33     }
  34
  35     toggle() {
  36         this.container.classList.toggle('open');
  37         const expanded = this.container.classList.contains('open') ? 'true' : 'false';
  38         this.toggleButton.setAttribute('aria-expanded', expanded);
  39     }
  40
  41     setActiveTab(tabName, openToolbox = false) {
  42         // Set button visibility
  43         for (const button of this.buttons) {
  44             button.classList.remove('active');
  45             const bName = button.dataset.tab;
  46             if (bName === tabName) button.classList.add('active');
  47         }
  48
  49         // Set content visibility
  50         for (const contentEl of this.contentElements) {
  51             contentEl.style.display = 'none';
  52             const cName = contentEl.dataset.tabContent;
  53             if (cName === tabName) contentEl.style.display = 'block';
  54         }
  55
  56         if (openToolbox && !this.container.classList.contains('open')) {
  57             this.toggle();
  58         }
  59     }
  60
  61 }