38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import {TOOLBAR_HEADER_CLASSNAME} from '../config.js';
|
||
import { Tool } from '../tool.js';
|
||
|
||
export class Header extends Tool {
|
||
constructor(container, title = 'Tools') {
|
||
super(container);
|
||
this.title = document.createElement('h1');
|
||
this.title.innerHTML = title;
|
||
|
||
this.toggleButton = document.createElement('button');
|
||
this.div.addEventListener('click', () => this.toggle());
|
||
|
||
this.div.appendChild(this.title);
|
||
this.div.appendChild(this.toggleButton);
|
||
|
||
this.div.style.display = 'flex';
|
||
this.div.style.justifyContent = 'space-around';
|
||
this.title.style.width = '9EM';
|
||
this.toggleButton.style.width = '3EM';
|
||
this.div.classList.add(TOOLBAR_HEADER_CLASSNAME);
|
||
}
|
||
|
||
setContainer(container) {
|
||
super.setContainer(container);
|
||
this.updateButton();
|
||
}
|
||
|
||
updateButton() {
|
||
this.toggleButton.innerHTML = this.container.expanded ? '˅' : '˄';
|
||
}
|
||
|
||
toggle() {
|
||
this.container.expanded = !this.container.expanded;
|
||
this.container.applyExpanded();
|
||
this.updateButton();
|
||
}
|
||
}
|