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         this.editorWrapEl = this.container.closest('.page-editor');
  12
  13         // State
  14         this.open = false;
  15         this.tab = '';
  16
  17         this.setupListeners();
  18
  19         // Set the first tab as active on load
  20         this.setActiveTab(this.contentElements[0].dataset.tabContent);
  21     }
  22
  23     setupListeners() {
  24         // Toolbox toggle button click
  25         this.toggleButton.addEventListener('click', () => this.toggle());
  26         // Tab button click
  27         this.container.addEventListener('click', event => {
  28             const button = event.target.closest('button');
  29             if (this.buttons.includes(button)) {
  30                 const name = button.dataset.tab;
  31                 this.setActiveTab(name, true);
  32             }
  33         });
  34     }
  35
  36     toggle() {
  37         this.container.classList.toggle('open');
  38         const isOpen = this.container.classList.contains('open');
  39         this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  40         this.editorWrapEl.classList.toggle('toolbox-open', isOpen);
  41         this.open = isOpen;
  42         this.emitState();
  43     }
  44
  45     setActiveTab(tabName, openToolbox = false) {
  46         // Set button visibility
  47         for (const button of this.buttons) {
  48             button.classList.remove('active');
  49             const bName = button.dataset.tab;
  50             if (bName === tabName) button.classList.add('active');
  51         }
  52
  53         // Set content visibility
  54         for (const contentEl of this.contentElements) {
  55             contentEl.style.display = 'none';
  56             const cName = contentEl.dataset.tabContent;
  57             if (cName === tabName) contentEl.style.display = 'block';
  58         }
  59
  60         if (openToolbox && !this.container.classList.contains('open')) {
  61             this.toggle();
  62         }
  63
  64         this.tab = tabName;
  65         this.emitState();
  66     }
  67
  68     emitState() {
  69         this.$emit('change', {tab: this.tab, open: this.open});
  70     }
  71
  72 }