6 this.buttons = elem.querySelectorAll('[toolbox-tab-button]');
7 this.contentElements = elem.querySelectorAll('[toolbox-tab-content]');
8 this.toggleButton = elem.querySelector('[toolbox-toggle]');
10 // Toolbox toggle button click
11 this.toggleButton.addEventListener('click', this.toggle.bind(this));
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);
20 // Set the first tab as active on load
21 this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));
25 this.elem.classList.toggle('open');
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');
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';
42 if (openToolbox) this.elem.classList.add('open');
47 module.exports = EditorToolbox;