109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import "./BeatSettings.css";
|
|
import Beat, {BeatEvents} from "../../Beat";
|
|
import UINode, {UINodeOptions} from "../UINode";
|
|
import ISubscriber from "../../Subscriber";
|
|
import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
|
|
import {IPublisher} from "../../Publisher";
|
|
import BeatLike from "../../BeatLike";
|
|
import NumberInputView from "../Widgets/NumberInput/NumberInputView";
|
|
import BoolBoxView from "../Widgets/BoolBox/BoolBoxView";
|
|
|
|
export type BeatSettingsViewUINodeOptions = UINodeOptions & {
|
|
beat: Beat,
|
|
};
|
|
|
|
export default class BeatSettingsView extends UINode implements ISubscriber {
|
|
private beat: Beat;
|
|
private nameInput!: HTMLInputElement;
|
|
private deleteButton!: HTMLButtonElement;
|
|
private loopLengthInput!: NumberInputView;
|
|
private loopCheckbox!: BoolBoxView;
|
|
private loopLengthSection!: HTMLDivElement;
|
|
private sub!: { unbind: () => void };
|
|
|
|
constructor(options: BeatSettingsViewUINodeOptions) {
|
|
super(options);
|
|
this.beat = options.beat;
|
|
this.setupBindings();
|
|
}
|
|
|
|
private setupBindings() {
|
|
this.sub = this.beat.addSubscriber(this, "all");
|
|
}
|
|
|
|
setBeat(beat: Beat): void {
|
|
this.sub.unbind();
|
|
this.beat = beat;
|
|
this.setupBindings();
|
|
this.notify(null, BeatEvents.NewName);
|
|
this.notify(null, BeatEvents.LoopLengthChanged);
|
|
this.notify(null, BeatEvents.DisplayTypeChanged);
|
|
}
|
|
|
|
notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
|
|
if (event === BeatEvents.NewName) {
|
|
this.nameInput.value = this.beat.getName();
|
|
} else if (event === BeatEvents.LoopLengthChanged) {
|
|
this.loopLengthInput.setValue(this.beat.getLoopLength());
|
|
} else if (event === BeatEvents.DisplayTypeChanged) {
|
|
this.loopCheckbox.setValue(this.beat.isLooping());
|
|
if (this.beat.isLooping()) {
|
|
this.loopLengthSection.classList.remove("hide");
|
|
} else {
|
|
this.loopLengthSection.classList.add("hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
rebuild(): HTMLElement {
|
|
this.nameInput = UINode.make("input", {
|
|
value: this.beat.getName(),
|
|
classes: ["beat-settings-name-field"],
|
|
type: "text",
|
|
oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
|
|
});
|
|
this.deleteButton = UINode.make("button", {
|
|
classes: ["beat-settings-delete"],
|
|
innerText: "Delete",
|
|
onclick: () => this.beat.delete(),
|
|
});
|
|
this.loopLengthInput = new NumberInputView({
|
|
initialValue: this.beat.getLoopLength(),
|
|
onDecrement: () => this.beat.setLoopLength(this.beat.getLoopLength() - 1),
|
|
onIncrement: () => this.beat.setLoopLength(this.beat.getLoopLength() + 1),
|
|
onNewInput: (input: number) => this.beat.setLoopLength(input),
|
|
});
|
|
this.loopCheckbox = new BoolBoxView({
|
|
label: "Loop:",
|
|
value: this.beat.isLooping(),
|
|
onInput: (isChecked: boolean) => this.beat.setLooping(isChecked),
|
|
});
|
|
this.loopLengthSection = UINode.make("div", {
|
|
classes: ["loop-settings-option"],
|
|
subs: [
|
|
this.loopLengthInput.render(),
|
|
],
|
|
});
|
|
if (this.beat.isLooping()) {
|
|
this.loopLengthSection.classList.remove("hide");
|
|
} else {
|
|
this.loopLengthSection.classList.add("hide");
|
|
}
|
|
this.node = UINode.make("div", {
|
|
classes: ["beat-settings"],
|
|
subs: [
|
|
this.nameInput,
|
|
UINode.make("div", {
|
|
classes: ["loop-settings"],
|
|
subs: [
|
|
this.loopCheckbox.render(),
|
|
]
|
|
}),
|
|
this.loopLengthSection,
|
|
this.deleteButton,
|
|
],
|
|
});
|
|
return this.node;
|
|
}
|
|
}
|