]> BookStack Code Mirror - bookstack/blob - resources/assets/js/components/editor-toolbox.js
Merge pull request #529 from cipi1965/master
[bookstack] / resources / assets / 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     }
27
28     setActiveTab(tabName, openToolbox = false) {
29         // Set button visibility
30         for (let i = 0, len = this.buttons.length; i < len; i++) {
31             this.buttons[i].classList.remove('active');
32             let bName =  this.buttons[i].getAttribute('toolbox-tab-button');
33             if (bName === tabName) this.buttons[i].classList.add('active');
34         }
35         // Set content visibility
36         for (let i = 0, len = this.contentElements.length; i < len; i++) {
37             this.contentElements[i].style.display = 'none';
38             let cName = this.contentElements[i].getAttribute('toolbox-tab-content');
39             if (cName === tabName) this.contentElements[i].style.display = 'block';
40         }
41
42         if (openToolbox) this.elem.classList.add('open');
43     }
44
45 }
46
47 module.exports = EditorToolbox;