ZIP Export: Expanded page & added base attachment handling

[bookstack] / resources / js / components / editor-toolbox.js

diff --git a/resources/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js
index 354bf0a86b3262f4a5e14a9e446ea87ee9405c65..ddb4ff39c7686a285247466b708d32b2f76fbbba 100644 (file)
--- a/resources/js/components/editor-toolbox.js
+++ b/resources/js/components/editor-toolbox.js
@@ -1,49 +1,59 @@
-class EditorToolbox {
+import {Component} from './component';

 
 

-    constructor(elem) {
+export class EditorToolbox extends Component {
+
+    setup() {

         // Elements
         // Elements

-        this.elem = elem;
-        this.buttons = elem.querySelectorAll('[toolbox-tab-button]');
-        this.contentElements = elem.querySelectorAll('[toolbox-tab-content]');
-        this.toggleButton = elem.querySelector('[toolbox-toggle]');
+        this.container = this.$el;
+        this.buttons = this.$manyRefs.tabButton;
+        this.contentElements = this.$manyRefs.tabContent;
+        this.toggleButton = this.$refs.toggle;
+        this.editorWrapEl = this.container.closest('.page-editor');
+
+        this.setupListeners();
+
+        // Set the first tab as active on load
+        this.setActiveTab(this.contentElements[0].dataset.tabContent);
+    }

 
 

+    setupListeners() {

         // Toolbox toggle button click
         // Toolbox toggle button click

-        this.toggleButton.addEventListener('click', this.toggle.bind(this));
+        this.toggleButton.addEventListener('click', () => this.toggle());

         // Tab button click
         // Tab button click

-        this.elem.addEventListener('click', event => {
-            let button = event.target.closest('[toolbox-tab-button]');
-            if (button === null) return;
-            let name = button.getAttribute('toolbox-tab-button');
-            this.setActiveTab(name, true);
+        this.container.addEventListener('click', event => {
+            const button = event.target.closest('button');
+            if (this.buttons.includes(button)) {
+                const name = button.dataset.tab;
+                this.setActiveTab(name, true);
+            }

         });
         });

-
-        // Set the first tab as active on load
-        this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));

     }
 
     toggle() {
     }
 
     toggle() {

-        this.elem.classList.toggle('open');
-        const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
-        this.toggleButton.setAttribute('aria-expanded', expanded);
+        this.container.classList.toggle('open');
+        const isOpen = this.container.classList.contains('open');
+        this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        this.editorWrapEl.classList.toggle('toolbox-open', isOpen);

     }
 
     setActiveTab(tabName, openToolbox = false) {
         // Set button visibility
     }
 
     setActiveTab(tabName, openToolbox = false) {
         // Set button visibility

-        for (let i = 0, len = this.buttons.length; i < len; i++) {
-            this.buttons[i].classList.remove('active');
-            let bName =  this.buttons[i].getAttribute('toolbox-tab-button');
-            if (bName === tabName) this.buttons[i].classList.add('active');
+        for (const button of this.buttons) {
+            button.classList.remove('active');
+            const bName = button.dataset.tab;
+            if (bName === tabName) button.classList.add('active');

         }
         }

+

         // Set content visibility
         // Set content visibility

-        for (let i = 0, len = this.contentElements.length; i < len; i++) {
-            this.contentElements[i].style.display = 'none';
-            let cName = this.contentElements[i].getAttribute('toolbox-tab-content');
-            if (cName === tabName) this.contentElements[i].style.display = 'block';
+        for (const contentEl of this.contentElements) {
+            contentEl.style.display = 'none';
+            const cName = contentEl.dataset.tabContent;
+            if (cName === tabName) contentEl.style.display = 'block';

         }
 
         }
 

-        if (openToolbox) this.elem.classList.add('open');
+        if (openToolbox && !this.container.classList.contains('open')) {
+            this.toggle();
+        }

     }
 
 }
     }
 
 }

-
-export default EditorToolbox;
\ No newline at end of file