53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import {TOOLBAR_HEADER_CLASSNAME} from '../config.js';
|
||
import { Tool } from '../tool.js';
|
||
|
||
export class Header extends Tool {
|
||
expanded = true;
|
||
|
||
constructor(toolbar, title = 'Tools') {
|
||
super(toolbar);
|
||
|
||
this.title = document.createElement('h1');
|
||
this.title.innerHTML = title;
|
||
|
||
this.toggleButton = document.createElement('button');
|
||
this.updateButton();
|
||
this.div.addEventListener('click', () => this.toggle());
|
||
|
||
this.div.appendChild(this.title);
|
||
this.div.appendChild(this.toggleButton);
|
||
|
||
this.title.style.verticalAlign = 'center';
|
||
this.toggleButton.style.width = '3EM';
|
||
this.div.style.display = 'flex';
|
||
this.div.style.justifyContent = 'space-around';
|
||
|
||
this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
|
||
}
|
||
|
||
updateButton() {
|
||
this.toggleButton.innerHTML = this.expanded ? '˄' : '˅';
|
||
}
|
||
|
||
toggle() {
|
||
this.expanded = !this.expanded;
|
||
this.updateButton();
|
||
this.apply();
|
||
}
|
||
|
||
apply() {
|
||
for (const tool of this.toolbar.tools) {
|
||
if (tool === this) continue;
|
||
if (this.expanded) {
|
||
if (!this.toolbar.div.contains(tool.div)) {
|
||
this.toolbar.div.appendChild(tool.div);
|
||
}
|
||
} else {
|
||
if (this.toolbar.div.contains(tool.div)) {
|
||
this.toolbar.div.removeChild(tool.div);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|