summaryrefslogtreecommitdiff
path: root/packages/web/src/components/toolbar/index.ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/web/src/components/toolbar/index.ts')
-rw-r--r--packages/web/src/components/toolbar/index.ts70
1 files changed, 0 insertions, 70 deletions
diff --git a/packages/web/src/components/toolbar/index.ts b/packages/web/src/components/toolbar/index.ts
deleted file mode 100644
index b8a383d..0000000
--- a/packages/web/src/components/toolbar/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import NotiveElement, { customElement, eventHandler } from "../../element";
-import h from "../../html";
-import { minus16Icon, plus16Icon } from "../icons";
-import "./index.css";
-
-export class SubdivisionsChangeEvent extends Event {
- static readonly TYPE = "ntv:toolbar:subdivisionschange";
-
- constructor(public subdivisions: number | undefined) {
- super(SubdivisionsChangeEvent.TYPE);
- }
-}
-
-@customElement("ntv-toolbar")
-class NotiveToolbarElement extends NotiveElement {
- #subdivisionsInputEl: HTMLInputElement = h.input({
- title: "Subdivisions",
- disabled: true,
- });
-
- get subdivisions(): number | undefined {
- if (this.#subdivisionsInputEl.value === "") return;
- return parseInt(this.#subdivisionsInputEl.value);
- }
-
- set subdivisions(n: number | undefined) {
- const m = n && Math.max(n, 1);
- this.#subdivisionsInputEl.value = m === undefined ? "" : m.toString();
- }
-
- @eventHandler(SubdivisionsChangeEvent.TYPE)
- onsubdivisionschange?: (event: SubdivisionsChangeEvent) => any;
-
- connectedCallback() {
- this.append(
- h.section(
- h.button(
- {
- dataset: { icon: "" },
- onclick: () => {
- if (!this.subdivisions) return;
- this.subdivisions = this.subdivisions - 1;
- this.dispatchEvent(
- new SubdivisionsChangeEvent(this.subdivisions),
- );
- },
- },
- h.span(minus16Icon()),
- ),
- this.#subdivisionsInputEl,
- h.button(
- {
- dataset: { icon: "" },
- onclick: () => {
- if (!this.subdivisions) return;
- this.subdivisions = this.subdivisions + 1;
- this.dispatchEvent(
- new SubdivisionsChangeEvent(this.subdivisions),
- );
- },
- },
- h.span(plus16Icon()),
- ),
- ),
- h.section(h.button("Play")),
- );
- }
-}
-
-export default NotiveToolbarElement.makeFactory();