99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
import "./BeatLikeLoopSettings.css";
|
|
import BeatLike from "@/BeatLike";
|
|
import NumberInputView from "@/ui/Widgets/NumberInput/NumberInputView";
|
|
import ISubscriber from "@/Subscriber";
|
|
import UINode, {UINodeOptions} from "@/ui/UINode";
|
|
import {BeatEvents} from "@/Beat";
|
|
import {IPublisher} from "@/Publisher";
|
|
import BoolBoxView from "@/ui/Widgets/BoolBox/BoolBoxView";
|
|
|
|
export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
|
|
beatLike: BeatLike,
|
|
title?: string,
|
|
};
|
|
|
|
export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber {
|
|
private beatLike: BeatLike;
|
|
private loopLengthInput!: NumberInputView;
|
|
private loopCheckbox!: BoolBoxView;
|
|
private loopLengthSection!: HTMLDivElement;
|
|
private title: string;
|
|
|
|
constructor(options: BeatLikeLoopSettingsViewUINodeOptions) {
|
|
super(options);
|
|
this.beatLike = options.beatLike;
|
|
this.title = options.title ?? "Looping settings:";
|
|
this.setupBindings();
|
|
}
|
|
|
|
private setupBindings() {
|
|
this.beatLike.addSubscriber(this, [
|
|
BeatEvents.LoopLengthChanged,
|
|
BeatEvents.DisplayTypeChanged
|
|
]);
|
|
}
|
|
|
|
notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
|
|
if (event === BeatEvents.LoopLengthChanged) {
|
|
this.loopLengthInput.setValue(this.beatLike.getLoopLength());
|
|
} else if (event === BeatEvents.DisplayTypeChanged) {
|
|
this.loopCheckbox.setValue(this.beatLike.isLooping());
|
|
if (this.beatLike.isLooping()) {
|
|
this.loopLengthSection.classList.remove("hide");
|
|
} else {
|
|
this.loopLengthSection.classList.add("hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
setBeatLike(beatLike: BeatLike): void {
|
|
this.beatLike = beatLike;
|
|
this.notify(null, BeatEvents.LoopLengthChanged);
|
|
this.notify(null, BeatEvents.DisplayTypeChanged);
|
|
}
|
|
|
|
build(): HTMLElement {
|
|
this.loopLengthInput = new NumberInputView({
|
|
initialValue: this.beatLike.getLoopLength(),
|
|
label: "Length:",
|
|
onDecrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() - 1),
|
|
onIncrement: () => this.beatLike.setLoopLength(this.beatLike.getLoopLength() + 1),
|
|
onNewInput: (input: number) => this.beatLike.setLoopLength(input),
|
|
});
|
|
this.loopCheckbox = new BoolBoxView({
|
|
label: "On:",
|
|
value: this.beatLike.isLooping(),
|
|
onInput: (isChecked: boolean) => this.beatLike.setLooping(isChecked),
|
|
});
|
|
this.loopLengthSection = UINode.make("div", {
|
|
classes: ["loop-settings-option"],
|
|
subs: [
|
|
this.loopLengthInput.render(),
|
|
],
|
|
});
|
|
if (this.beatLike.isLooping()) {
|
|
this.loopLengthSection.classList.remove("hide");
|
|
} else {
|
|
this.loopLengthSection.classList.add("hide");
|
|
}
|
|
return UINode.make("div", {
|
|
classes: ["loop-settings"],
|
|
subs: [
|
|
UINode.make("p", {innerText: this.title}),
|
|
UINode.make("div", {
|
|
classes: ["loop-settings-option-group"],
|
|
subs: [
|
|
UINode.make("div", {
|
|
classes: ["loop-settings-option"],
|
|
subs: [
|
|
this.loopCheckbox.render(),
|
|
],
|
|
}),
|
|
this.loopLengthSection,
|
|
],
|
|
}),
|
|
]
|
|
});
|
|
}
|
|
}
|