83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import UINode, {UINodeOptions} from "../UINode";
|
|
import BeatGroupView from "../BeatGroup/BeatGroupView";
|
|
import BeatGroup from "../../BeatGroup";
|
|
import "./Root.css";
|
|
import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
|
|
|
|
export type RootUINodeOptions = UINodeOptions & {
|
|
title: string,
|
|
mainBeatGroup: BeatGroup,
|
|
};
|
|
|
|
export default class RootView extends UINode {
|
|
private title: string;
|
|
private beatGroupView: BeatGroupView;
|
|
private mainBeatGroup: BeatGroup;
|
|
private beatGroupSettingsView!: BeatGroupSettingsView;
|
|
private sidebar!: HTMLDivElement;
|
|
|
|
|
|
constructor(options: RootUINodeOptions) {
|
|
super(options);
|
|
this.mainBeatGroup = options.mainBeatGroup;
|
|
this.beatGroupView = new BeatGroupView({title: "THE BEAT", beatGroup: this.mainBeatGroup});
|
|
this.title = options.title;
|
|
}
|
|
|
|
toggleSidebar(): void {
|
|
this.node?.classList.toggle("sidebar-visible");
|
|
}
|
|
|
|
toggleOrientation(): void {
|
|
this.node?.classList.toggle("vertical-mode");
|
|
}
|
|
|
|
rebuild(): HTMLElement {
|
|
this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.mainBeatGroup});
|
|
const sidebarMain = UINode.make("div", {
|
|
classes: ["root-settings"],
|
|
subs: [
|
|
UINode.make("h1", {innerText: this.title, classes: ["root-title"]}),
|
|
this.beatGroupSettingsView.render(),
|
|
]
|
|
});
|
|
const sidebarToggle = UINode.make("div", {
|
|
classes: ["root-sidebar-toggle"],
|
|
subs: [
|
|
UINode.make("div", {
|
|
classes: ["root-hamburger"],
|
|
onclick: () => this.toggleSidebar(),
|
|
}),
|
|
UINode.make("div", {
|
|
classes: ["root-switch-mode"],
|
|
onclick: () => this.toggleOrientation(),
|
|
})
|
|
]
|
|
});
|
|
this.sidebar = UINode.make("div", {
|
|
classes: ["root-sidebar"],
|
|
subs: [
|
|
sidebarMain,
|
|
sidebarToggle,
|
|
]
|
|
});
|
|
this.node = UINode.make("div", {
|
|
classes: ["root", "sidebar-visible"],
|
|
subs: [
|
|
this.sidebar,
|
|
UINode.make("div", {
|
|
classes: ["root-beat-stage-container"],
|
|
subs: [
|
|
UINode.make("div", {
|
|
classes: ["root-beat-stage"],
|
|
subs: [
|
|
this.beatGroupView.render(),
|
|
],
|
|
})
|
|
]
|
|
})
|
|
],
|
|
});
|
|
return this.node;
|
|
}
|
|
} |