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

   1 class EditorToolbox {
   2
   3     constructor(elem) {
   4         // Elements
   5         this.elem = elem;
   6         this.buttons = elem.querySelectorAll('[toolbox-tab-button]');
   7         this.contentElements = elem.querySelectorAll('[toolbox-tab-content]');
   8         this.toggleButton = elem.querySelector('[toolbox-toggle]');
   9
  10         // Toolbox toggle button click
  11         this.toggleButton.addEventListener('click', this.toggle.bind(this));
  12         // Tab button click
  13         this.elem.addEventListener('click', event => {
  14             let button = event.target.closest('[toolbox-tab-button]');
  15             if (button === null) return;
  16             let name = button.getAttribute('toolbox-tab-button');
  17             this.setActiveTab(name, true);
  18         });
  19
  20         // Set the first tab as active on load
  21         this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));
  22     }
  23
  24     toggle() {
  25         this.elem.classList.toggle('open');
  26         const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
  27         this.toggleButton.setAttribute('aria-expanded', expanded);
  28     }
  29
  30     setActiveTab(tabName, openToolbox = false) {
  31         // Set button visibility
  32         for (let i = 0, len = this.buttons.length; i < len; i++) {
  33             this.buttons[i].classList.remove('active');
  34             let bName =  this.buttons[i].getAttribute('toolbox-tab-button');
  35             if (bName === tabName) this.buttons[i].classList.add('active');
  36         }
  37         // Set content visibility
  38         for (let i = 0, len = this.contentElements.length; i < len; i++) {
  39             this.contentElements[i].style.display = 'none';
  40             let cName = this.contentElements[i].getAttribute('toolbox-tab-content');
  41             if (cName === tabName) this.contentElements[i].style.display = 'block';
  42         }
  43
  44         if (openToolbox && !this.elem.classList.contains('open')) {
  45             this.toggle();
  46         }
  47     }
  48
  49 }
  50
  51 export default EditorToolbox;