github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-10 05:06:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finished updating remainder of JS components to new system

Browse Source
This commit is contained in:
Dan Brown
2022-11-16 13:04:22 +00:00
parent db79167469
commit 3b8ee3954e
25 changed files with 164 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
resources/js/components/editor-toolbox.js
View File

@ -1,51 +1,58 @@
class EditorToolbox {
import {Component} from "./component";
constructor(elem) {
export class EditorToolbox extends Component {
setup() {
// 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;
// Toolbox toggle button click
this.toggleButton.addEventListener('click', this.toggle.bind(this));
// 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.setupListeners();
// Set the first tab as active on load
this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));
this.setActiveTab(this.contentElements[0].dataset.tabContent);
}
setupListeners() {
// Toolbox toggle button click
this.toggleButton.addEventListener('click', () => this.toggle());
// Tab button click
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);
}
});
}
toggle() {
this.elem.classList.toggle('open');
const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
this.container.classList.toggle('open');
const expanded = this.container.classList.contains('open') ? 'true' : 'false';
this.toggleButton.setAttribute('aria-expanded', expanded);
}
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');
}
// 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 button of this.buttons) {
button.classList.remove('active');
const bName = button.dataset.tab;
if (bName === tabName) button.classList.add('active');
}
if (openToolbox && !this.elem.classList.contains('open')) {
// Set content visibility
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.container.classList.contains('open')) {
this.toggle();
}
}
}
export default EditorToolbox;
}