@xsynaptic/sonic-ui 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -20
- package/dist/default/dat.js +51 -0
- package/dist/default/define/button.js +7 -0
- package/dist/default/define/envelope.js +7 -0
- package/dist/default/define/split.js +7 -0
- package/dist/default/define/switch.js +7 -0
- package/dist/default/define/waveform.js +7 -0
- package/dist/default/define/wavestrip.js +7 -0
- package/dist/default/define/xy.js +7 -0
- package/dist/default/define.js +7 -1
- package/dist/default/elements/button.js +165 -0
- package/dist/default/elements/dial.js +16 -22
- package/dist/default/elements/envelope.js +383 -0
- package/dist/default/elements/meter.js +155 -63
- package/dist/default/elements/number.js +22 -9
- package/dist/default/elements/radio-group.js +183 -0
- package/dist/default/elements/readout-claim.js +81 -0
- package/dist/default/elements/readout.js +35 -0
- package/dist/default/elements/segmented.js +9 -159
- package/dist/default/elements/slider.js +42 -51
- package/dist/default/elements/sonic-element.js +69 -31
- package/dist/default/elements/split.js +249 -0
- package/dist/default/elements/switch.js +273 -0
- package/dist/default/elements/value-element.js +694 -0
- package/dist/default/elements/{range-entry.js → value-entry.js} +3 -3
- package/dist/default/elements/wave-element.js +80 -0
- package/dist/default/elements/waveform.js +328 -0
- package/dist/default/elements/wavestrip.js +185 -0
- package/dist/default/elements/xy.js +487 -0
- package/dist/default/index.js +10 -2
- package/dist/default/lib/adsr-shape.js +113 -0
- package/dist/default/lib/ballistics.js +55 -0
- package/dist/default/lib/canvas-surface.js +203 -0
- package/dist/default/lib/copy-node.js +32 -2
- package/dist/default/lib/crossfade.js +22 -0
- package/dist/default/lib/distribute.js +215 -0
- package/dist/default/lib/drag-step.js +99 -0
- package/dist/default/lib/envelope-curve.js +9 -0
- package/dist/default/lib/field.js +94 -0
- package/dist/default/lib/focus-by-pointer.js +28 -0
- package/dist/default/lib/frame-timeline.js +63 -0
- package/dist/default/lib/hold.js +38 -0
- package/dist/default/lib/marker-band.js +80 -0
- package/dist/default/lib/marker-rider.js +120 -0
- package/dist/default/lib/math.js +17 -3
- package/dist/default/lib/modifier-press.js +11 -0
- package/dist/default/lib/number-list.js +6 -6
- package/dist/default/lib/pointer-drag.js +46 -0
- package/dist/default/lib/render.js +20 -5
- package/dist/default/lib/resample-peaks.js +46 -0
- package/dist/default/lib/strip-scene.js +48 -0
- package/dist/default/lib/taper.js +23 -17
- package/dist/default/lib/time-regions.js +8 -0
- package/dist/default/lib/tracking-clock.js +35 -0
- package/dist/default/lib/value-mapping.js +115 -0
- package/dist/default/lib/waveform-buckets.js +41 -0
- package/dist/default/lib/write-attribute.js +1 -0
- package/dist/dev/dat.d.ts +19 -0
- package/dist/dev/dat.js +52 -0
- package/dist/dev/dat.js.map +1 -0
- package/dist/dev/define/button.d.ts +2 -0
- package/dist/dev/define/button.js +8 -0
- package/dist/dev/define/button.js.map +1 -0
- package/dist/dev/define/dial.js.map +1 -1
- package/dist/dev/define/envelope.d.ts +2 -0
- package/dist/dev/define/envelope.js +8 -0
- package/dist/dev/define/envelope.js.map +1 -0
- package/dist/dev/define/meter.js.map +1 -1
- package/dist/dev/define/number.js.map +1 -1
- package/dist/dev/define/segmented.js.map +1 -1
- package/dist/dev/define/slider.js.map +1 -1
- package/dist/dev/define/split.d.ts +2 -0
- package/dist/dev/define/split.js +8 -0
- package/dist/dev/define/split.js.map +1 -0
- package/dist/dev/define/switch.d.ts +2 -0
- package/dist/dev/define/switch.js +8 -0
- package/dist/dev/define/switch.js.map +1 -0
- package/dist/dev/define/waveform.d.ts +2 -0
- package/dist/dev/define/waveform.js +8 -0
- package/dist/dev/define/waveform.js.map +1 -0
- package/dist/dev/define/wavestrip.d.ts +2 -0
- package/dist/dev/define/wavestrip.js +8 -0
- package/dist/dev/define/wavestrip.js.map +1 -0
- package/dist/dev/define/xy.d.ts +2 -0
- package/dist/dev/define/xy.js +8 -0
- package/dist/dev/define/xy.js.map +1 -0
- package/dist/dev/define.d.ts +15 -3
- package/dist/dev/define.js +7 -1
- package/dist/dev/elements/{key.d.ts → button.d.ts} +8 -6
- package/dist/dev/elements/button.js +166 -0
- package/dist/dev/elements/button.js.map +1 -0
- package/dist/dev/elements/dial.d.ts +6 -4
- package/dist/dev/elements/dial.js +16 -22
- package/dist/dev/elements/dial.js.map +1 -1
- package/dist/dev/elements/envelope.d.ts +36 -0
- package/dist/dev/elements/envelope.js +388 -0
- package/dist/dev/elements/envelope.js.map +1 -0
- package/dist/dev/elements/form-element.d.ts +1 -1
- package/dist/dev/elements/form-element.js.map +1 -1
- package/dist/dev/elements/meter.d.ts +11 -6
- package/dist/dev/elements/meter.js +155 -63
- package/dist/dev/elements/meter.js.map +1 -1
- package/dist/dev/elements/number.d.ts +7 -3
- package/dist/dev/elements/number.js +22 -9
- package/dist/dev/elements/number.js.map +1 -1
- package/dist/dev/elements/radio-group.d.ts +25 -0
- package/dist/dev/elements/radio-group.js +184 -0
- package/dist/dev/elements/radio-group.js.map +1 -0
- package/dist/dev/elements/readout-claim.js +82 -0
- package/dist/dev/elements/readout-claim.js.map +1 -0
- package/dist/dev/elements/readout.js +36 -0
- package/dist/dev/elements/readout.js.map +1 -0
- package/dist/dev/elements/segmented.d.ts +4 -10
- package/dist/dev/elements/segmented.js +9 -159
- package/dist/dev/elements/segmented.js.map +1 -1
- package/dist/dev/elements/slider.d.ts +6 -6
- package/dist/dev/elements/slider.js +42 -51
- package/dist/dev/elements/slider.js.map +1 -1
- package/dist/dev/elements/sonic-element.d.ts +6 -3
- package/dist/dev/elements/sonic-element.js +119 -40
- package/dist/dev/elements/sonic-element.js.map +1 -1
- package/dist/dev/elements/split.d.ts +21 -0
- package/dist/dev/elements/split.js +258 -0
- package/dist/dev/elements/split.js.map +1 -0
- package/dist/dev/elements/switch.d.ts +35 -0
- package/dist/dev/elements/switch.js +274 -0
- package/dist/dev/elements/switch.js.map +1 -0
- package/dist/dev/elements/value-element.d.ts +84 -0
- package/dist/dev/elements/value-element.js +695 -0
- package/dist/dev/elements/value-element.js.map +1 -0
- package/dist/dev/elements/{range-entry.js → value-entry.js} +4 -4
- package/dist/dev/elements/value-entry.js.map +1 -0
- package/dist/dev/elements/wave-element.d.ts +37 -0
- package/dist/dev/elements/wave-element.js +81 -0
- package/dist/dev/elements/wave-element.js.map +1 -0
- package/dist/dev/elements/waveform.d.ts +55 -0
- package/dist/dev/elements/waveform.js +329 -0
- package/dist/dev/elements/waveform.js.map +1 -0
- package/dist/dev/elements/wavestrip.d.ts +51 -0
- package/dist/dev/elements/wavestrip.js +186 -0
- package/dist/dev/elements/wavestrip.js.map +1 -0
- package/dist/dev/elements/xy.d.ts +62 -0
- package/dist/dev/elements/xy.js +488 -0
- package/dist/dev/elements/xy.js.map +1 -0
- package/dist/dev/index.d.ts +11 -2
- package/dist/dev/index.js +10 -2
- package/dist/dev/lib/adsr-shape.js +114 -0
- package/dist/dev/lib/adsr-shape.js.map +1 -0
- package/dist/dev/lib/ballistics.js +56 -0
- package/dist/dev/lib/ballistics.js.map +1 -0
- package/dist/dev/lib/canvas-surface.d.ts +26 -0
- package/dist/dev/lib/canvas-surface.js +204 -0
- package/dist/dev/lib/canvas-surface.js.map +1 -0
- package/dist/dev/lib/copy-node.js +32 -2
- package/dist/dev/lib/copy-node.js.map +1 -1
- package/dist/dev/lib/crossfade.d.ts +12 -0
- package/dist/dev/lib/crossfade.js +23 -0
- package/dist/dev/lib/crossfade.js.map +1 -0
- package/dist/dev/lib/distribute.d.ts +4 -0
- package/dist/dev/lib/distribute.js +216 -0
- package/dist/dev/lib/distribute.js.map +1 -0
- package/dist/dev/lib/drag-step.js +100 -0
- package/dist/dev/lib/drag-step.js.map +1 -0
- package/dist/dev/lib/envelope-curve.d.ts +4 -0
- package/dist/dev/lib/envelope-curve.js +10 -0
- package/dist/dev/lib/envelope-curve.js.map +1 -0
- package/dist/dev/lib/field.d.ts +4 -0
- package/dist/dev/lib/field.js +95 -0
- package/dist/dev/lib/field.js.map +1 -0
- package/dist/dev/lib/focus-by-pointer.js +29 -0
- package/dist/dev/lib/focus-by-pointer.js.map +1 -0
- package/dist/dev/lib/frame-timeline.js +64 -0
- package/dist/dev/lib/frame-timeline.js.map +1 -0
- package/dist/dev/lib/hold.js +39 -0
- package/dist/dev/lib/hold.js.map +1 -0
- package/dist/dev/lib/marker-band.js +81 -0
- package/dist/dev/lib/marker-band.js.map +1 -0
- package/dist/dev/lib/marker-rider.js +121 -0
- package/dist/dev/lib/marker-rider.js.map +1 -0
- package/dist/dev/lib/math.js +17 -3
- package/dist/dev/lib/math.js.map +1 -1
- package/dist/dev/lib/modifier-press.js +12 -0
- package/dist/dev/lib/modifier-press.js.map +1 -0
- package/dist/dev/lib/number-list.js +6 -6
- package/dist/dev/lib/number-list.js.map +1 -1
- package/dist/dev/lib/pointer-drag.js +47 -0
- package/dist/dev/lib/pointer-drag.js.map +1 -0
- package/dist/dev/lib/read-px-property.js.map +1 -1
- package/dist/dev/lib/render.js +20 -5
- package/dist/dev/lib/render.js.map +1 -1
- package/dist/dev/lib/resample-peaks.js +47 -0
- package/dist/dev/lib/resample-peaks.js.map +1 -0
- package/dist/dev/lib/strip-scene.js +49 -0
- package/dist/dev/lib/strip-scene.js.map +1 -0
- package/dist/dev/lib/taper.js +23 -17
- package/dist/dev/lib/taper.js.map +1 -1
- package/dist/dev/lib/time-regions.d.ts +4 -0
- package/dist/dev/lib/time-regions.js +9 -0
- package/dist/dev/lib/time-regions.js.map +1 -0
- package/dist/dev/lib/tracking-clock.js +36 -0
- package/dist/dev/lib/tracking-clock.js.map +1 -0
- package/dist/dev/lib/value-mapping.d.ts +23 -0
- package/dist/dev/lib/value-mapping.js +116 -0
- package/dist/dev/lib/value-mapping.js.map +1 -0
- package/dist/dev/lib/waveform-buckets.d.ts +9 -0
- package/dist/dev/lib/waveform-buckets.js +42 -0
- package/dist/dev/lib/waveform-buckets.js.map +1 -0
- package/dist/dev/lib/write-attribute.js +1 -0
- package/dist/dev/lib/write-attribute.js.map +1 -1
- package/dist/skins/amber.css +8 -0
- package/dist/skins/flat.css +25 -0
- package/dist/skins/ivory.css +2 -2
- package/dist/skins/lime.css +2 -0
- package/dist/skins/slate.css +2 -0
- package/dist/styles/button.css +240 -0
- package/dist/styles/controls.css +8 -1
- package/dist/styles/dial.css +110 -56
- package/dist/styles/envelope.css +204 -0
- package/dist/styles/led.css +39 -8
- package/dist/styles/material.css +343 -100
- package/dist/styles/meter.css +41 -52
- package/dist/styles/number.css +5 -1
- package/dist/styles/panel.css +61 -0
- package/dist/styles/ring.css +74 -0
- package/dist/styles/segmented.css +46 -51
- package/dist/styles/slider.css +177 -40
- package/dist/styles/switch.css +386 -0
- package/dist/styles/waveform.css +196 -0
- package/dist/styles/wavestrip.css +232 -0
- package/dist/styles/xy.css +241 -0
- package/package.json +15 -6
- package/dist/default/define/key.js +0 -7
- package/dist/default/elements/key.js +0 -169
- package/dist/default/elements/range-element.js +0 -546
- package/dist/default/lib/detent.js +0 -17
- package/dist/dev/define/key.d.ts +0 -2
- package/dist/dev/define/key.js +0 -8
- package/dist/dev/define/key.js.map +0 -1
- package/dist/dev/elements/key.js +0 -170
- package/dist/dev/elements/key.js.map +0 -1
- package/dist/dev/elements/range-element.d.ts +0 -64
- package/dist/dev/elements/range-element.js +0 -547
- package/dist/dev/elements/range-element.js.map +0 -1
- package/dist/dev/elements/range-entry.js.map +0 -1
- package/dist/dev/lib/detent.js +0 -18
- package/dist/dev/lib/detent.js.map +0 -1
- package/dist/styles/key.css +0 -242
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
//#region src/lib/detent.ts
|
|
2
|
-
function isAcross(from, to, place) {
|
|
3
|
-
return from !== place && (from - place) * (to - place) <= 0;
|
|
4
|
-
}
|
|
5
|
-
function passDetent(hold, from, to) {
|
|
6
|
-
if (hold.slack === void 0 && !isAcross(from, to, hold.place)) return to;
|
|
7
|
-
const slack = (hold.slack ?? 0) + to - hold.place;
|
|
8
|
-
if (Math.abs(slack) <= hold.zone) {
|
|
9
|
-
hold.slack = slack;
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
hold.slack = void 0;
|
|
13
|
-
return hold.place + slack - Math.sign(slack) * hold.zone;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
//#endregion
|
|
17
|
-
export { passDetent };
|
package/dist/dev/define/key.d.ts
DELETED
package/dist/dev/define/key.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"key.js","names":[],"sources":["../../../src/define/key.ts"],"sourcesContent":["import { defineOnce } from '#elements/define-once.ts';\nimport { SonicKey } from '#elements/key.ts';\n\ndefineOnce('sonic-key', SonicKey);\n\n// Type-only, so the tag map augmentation ships without a runtime export\n/** @public */\nexport type { SonicKey } from '#elements/key.ts';\n"],"mappings":";;;;AAGA,WAAW,aAAa,QAAQ"}
|
package/dist/dev/elements/key.js
DELETED
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
import { requireChild, template } from "../lib/render.js";
|
|
2
|
-
import { writeAttribute } from "../lib/write-attribute.js";
|
|
3
|
-
import { SonicFormElement } from "./form-element.js";
|
|
4
|
-
import { copyNode } from "../lib/copy-node.js";
|
|
5
|
-
|
|
6
|
-
//#region src/elements/key.ts
|
|
7
|
-
const renderKey = template(`
|
|
8
|
-
<button class="sonic-key" type="button"><span class="sonic-key-cap"></span></button>
|
|
9
|
-
`, HTMLButtonElement);
|
|
10
|
-
const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
|
|
11
|
-
var SonicKey = class extends SonicFormElement {
|
|
12
|
-
static observedAttributes = [
|
|
13
|
-
...SonicFormElement.observedAttributes,
|
|
14
|
-
"busy",
|
|
15
|
-
"momentary",
|
|
16
|
-
"pressed",
|
|
17
|
-
"soft-disabled",
|
|
18
|
-
"toggle",
|
|
19
|
-
"value"
|
|
20
|
-
];
|
|
21
|
-
get busy() {
|
|
22
|
-
return this.hasAttribute("busy");
|
|
23
|
-
}
|
|
24
|
-
set busy(isBusy) {
|
|
25
|
-
this.reflect("busy", isBusy);
|
|
26
|
-
}
|
|
27
|
-
get defaultPressed() {
|
|
28
|
-
return this.hasAttribute("pressed");
|
|
29
|
-
}
|
|
30
|
-
set defaultPressed(isPressed) {
|
|
31
|
-
this.reflect("pressed", isPressed);
|
|
32
|
-
}
|
|
33
|
-
get momentary() {
|
|
34
|
-
return this.hasAttribute("momentary");
|
|
35
|
-
}
|
|
36
|
-
set momentary(isMomentary) {
|
|
37
|
-
this.reflect("momentary", isMomentary);
|
|
38
|
-
}
|
|
39
|
-
get pressed() {
|
|
40
|
-
return this.#isDirty ? this.#pressed : this.defaultPressed;
|
|
41
|
-
}
|
|
42
|
-
set pressed(isPressed) {
|
|
43
|
-
this.#isDirty = true;
|
|
44
|
-
this.#pressed = isPressed === true;
|
|
45
|
-
this.render();
|
|
46
|
-
}
|
|
47
|
-
get softDisabled() {
|
|
48
|
-
return this.hasAttribute("soft-disabled");
|
|
49
|
-
}
|
|
50
|
-
set softDisabled(isSoftDisabled) {
|
|
51
|
-
this.reflect("soft-disabled", isSoftDisabled);
|
|
52
|
-
}
|
|
53
|
-
get toggle() {
|
|
54
|
-
return this.hasAttribute("toggle");
|
|
55
|
-
}
|
|
56
|
-
set toggle(isToggle) {
|
|
57
|
-
this.reflect("toggle", isToggle);
|
|
58
|
-
}
|
|
59
|
-
get value() {
|
|
60
|
-
return this.getAttribute("value") ?? "on";
|
|
61
|
-
}
|
|
62
|
-
set value(value) {
|
|
63
|
-
this.reflect("value", value);
|
|
64
|
-
}
|
|
65
|
-
#holder;
|
|
66
|
-
#isDirty = false;
|
|
67
|
-
#key = renderKey();
|
|
68
|
-
#pressed = false;
|
|
69
|
-
attributeChangedCallback(name) {
|
|
70
|
-
if (name === "pressed") this.#isDirty = false;
|
|
71
|
-
if (this.isDisabled() || this.#isSoftDisabled()) this.#release();
|
|
72
|
-
this.render();
|
|
73
|
-
}
|
|
74
|
-
formResetCallback() {
|
|
75
|
-
this.attributeChangedCallback("pressed");
|
|
76
|
-
}
|
|
77
|
-
activate() {
|
|
78
|
-
this.#key.click();
|
|
79
|
-
}
|
|
80
|
-
connect(signal) {
|
|
81
|
-
const key = this.#key;
|
|
82
|
-
const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
|
|
83
|
-
this.upgradeProperties("busy", "defaultPressed", "momentary", "softDisabled", "toggle", "pressed", "value");
|
|
84
|
-
this.mirrorChildren({
|
|
85
|
-
control: key,
|
|
86
|
-
copy: (originals) => {
|
|
87
|
-
cap.replaceChildren(...originals.map((original) => copyNode(original)));
|
|
88
|
-
}
|
|
89
|
-
}, signal);
|
|
90
|
-
this.render();
|
|
91
|
-
this.checkStyles(key, "key.css");
|
|
92
|
-
signal.addEventListener("abort", () => {
|
|
93
|
-
this.#release();
|
|
94
|
-
}, { once: true });
|
|
95
|
-
key.addEventListener("click", (event) => {
|
|
96
|
-
if (this.#isSoftDisabled()) {
|
|
97
|
-
event.preventDefault();
|
|
98
|
-
event.stopImmediatePropagation();
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
if (!this.toggle) return;
|
|
102
|
-
this.pressed = !this.pressed;
|
|
103
|
-
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
104
|
-
}, { signal });
|
|
105
|
-
this.#bindMomentary(key, signal);
|
|
106
|
-
}
|
|
107
|
-
focusTarget() {
|
|
108
|
-
return this.#key;
|
|
109
|
-
}
|
|
110
|
-
render() {
|
|
111
|
-
const key = this.#key;
|
|
112
|
-
key.disabled = this.isDisabled();
|
|
113
|
-
writeAttribute(key, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
|
|
114
|
-
writeAttribute(key, "aria-busy", this.busy ? "true" : void 0);
|
|
115
|
-
key.removeAttribute("aria-pressed");
|
|
116
|
-
if (this.toggle) key.setAttribute("aria-pressed", String(this.pressed));
|
|
117
|
-
this.toggleState("pressed", this.pressed);
|
|
118
|
-
this.forwardNaming(key, true);
|
|
119
|
-
const submitted = this.toggle && this.pressed ? this.value : null;
|
|
120
|
-
this.writeFormValue(submitted, String(this.pressed));
|
|
121
|
-
}
|
|
122
|
-
restoreState(state) {
|
|
123
|
-
if (this.toggle) this.pressed = state === "true";
|
|
124
|
-
}
|
|
125
|
-
#bindMomentary(key, signal) {
|
|
126
|
-
const releasePointer = (event) => {
|
|
127
|
-
if (event.pointerId === this.#holder) this.#release();
|
|
128
|
-
};
|
|
129
|
-
key.addEventListener("pointerdown", (event) => {
|
|
130
|
-
if (event.button !== 0 || !this.#isMomentary()) return;
|
|
131
|
-
key.setPointerCapture(event.pointerId);
|
|
132
|
-
this.#hold(event.pointerId);
|
|
133
|
-
}, { signal });
|
|
134
|
-
key.addEventListener("lostpointercapture", releasePointer, { signal });
|
|
135
|
-
key.addEventListener("pointercancel", releasePointer, { signal });
|
|
136
|
-
key.addEventListener("pointerup", releasePointer, { signal });
|
|
137
|
-
key.addEventListener("keydown", (event) => {
|
|
138
|
-
if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
|
|
139
|
-
this.#hold(event.key);
|
|
140
|
-
}, { signal });
|
|
141
|
-
key.addEventListener("keyup", (event) => {
|
|
142
|
-
if (event.key === this.#holder) this.#release();
|
|
143
|
-
}, { signal });
|
|
144
|
-
key.addEventListener("blur", () => {
|
|
145
|
-
if (typeof this.#holder === "string") this.#release();
|
|
146
|
-
}, { signal });
|
|
147
|
-
}
|
|
148
|
-
#hold(holder) {
|
|
149
|
-
if (this.isDisabled() || this.#isSoftDisabled() || this.#holder !== void 0) return;
|
|
150
|
-
this.#holder = holder;
|
|
151
|
-
this.pressed = true;
|
|
152
|
-
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
153
|
-
}
|
|
154
|
-
#isMomentary() {
|
|
155
|
-
return this.momentary && !this.toggle;
|
|
156
|
-
}
|
|
157
|
-
#isSoftDisabled() {
|
|
158
|
-
return this.softDisabled && !this.isDisabled();
|
|
159
|
-
}
|
|
160
|
-
#release() {
|
|
161
|
-
if (this.#holder === void 0) return;
|
|
162
|
-
this.#holder = void 0;
|
|
163
|
-
this.pressed = false;
|
|
164
|
-
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
//#endregion
|
|
169
|
-
export { SonicKey };
|
|
170
|
-
//# sourceMappingURL=key.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"key.js","names":[],"sources":["../../../src/elements/key.ts"],"sourcesContent":["import { SonicFormElement } from '#elements/form-element.ts';\nimport { copyNode } from '#lib/copy-node.ts';\nimport { requireChild, template } from '#lib/render.ts';\nimport { writeAttribute } from '#lib/write-attribute.ts';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sonic-key': SonicKey;\n\t}\n}\n\nconst renderKey = template(\n\t/* HTML */ `\n\t\t<button class=\"sonic-key\" type=\"button\"><span class=\"sonic-key-cap\"></span></button>\n\t`,\n\tHTMLButtonElement,\n);\n\nconst holdKeys = new Set([' ', 'Enter']);\n\nexport class SonicKey extends SonicFormElement {\n\tstatic override readonly observedAttributes = [\n\t\t...SonicFormElement.observedAttributes,\n\t\t'busy',\n\t\t'momentary',\n\t\t'pressed',\n\t\t'soft-disabled',\n\t\t'toggle',\n\t\t'value',\n\t];\n\n\tget busy(): boolean {\n\t\treturn this.hasAttribute('busy');\n\t}\n\n\tset busy(isBusy: boolean) {\n\t\tthis.reflect('busy', isBusy);\n\t}\n\n\t// The `pressed` attribute, as `defaultChecked` holds a checkbox's `checked` attribute\n\tget defaultPressed(): boolean {\n\t\treturn this.hasAttribute('pressed');\n\t}\n\n\tset defaultPressed(isPressed: boolean) {\n\t\tthis.reflect('pressed', isPressed);\n\t}\n\n\tget momentary(): boolean {\n\t\treturn this.hasAttribute('momentary');\n\t}\n\n\tset momentary(isMomentary: boolean) {\n\t\tthis.reflect('momentary', isMomentary);\n\t}\n\n\t// The live state, which never writes the attribute, as `value` on the range\n\tget pressed(): boolean {\n\t\treturn this.#isDirty ? this.#pressed : this.defaultPressed;\n\t}\n\n\tset pressed(isPressed: boolean | undefined) {\n\t\tthis.#isDirty = true;\n\t\tthis.#pressed = isPressed === true;\n\t\tthis.render();\n\t}\n\n\tget softDisabled(): boolean {\n\t\treturn this.hasAttribute('soft-disabled');\n\t}\n\n\tset softDisabled(isSoftDisabled: boolean) {\n\t\tthis.reflect('soft-disabled', isSoftDisabled);\n\t}\n\n\tget toggle(): boolean {\n\t\treturn this.hasAttribute('toggle');\n\t}\n\n\tset toggle(isToggle: boolean) {\n\t\tthis.reflect('toggle', isToggle);\n\t}\n\n\t// What a pressed toggle submits, reading `on` while unset as a checkbox does\n\tget value(): string {\n\t\treturn this.getAttribute('value') ?? 'on';\n\t}\n\n\tset value(value: string | undefined) {\n\t\tthis.reflect('value', value);\n\t}\n\n\t#holder: number | string | undefined;\n\n\t// Re-read from the attribute until a press or a write\n\t// An attribute write clears it, so a framework driving `pressed` keeps control\n\t#isDirty = false;\n\n\treadonly #key = renderKey();\n\n\t#pressed = false;\n\n\tattributeChangedCallback(name: string): void {\n\t\tif (name === 'pressed') this.#isDirty = false;\n\t\tif (this.isDisabled() || this.#isSoftDisabled()) this.#release();\n\t\tthis.render();\n\t}\n\n\t// Back to the `pressed` attribute, as a checkbox resets to `checked`\n\toverride formResetCallback(): void {\n\t\tthis.attributeChangedCallback('pressed');\n\t}\n\n\t// As a checkbox's label toggles it\n\tprotected override activate(): void {\n\t\tthis.#key.click();\n\t}\n\n\tprotected connect(signal: AbortSignal): void {\n\t\tconst key = this.#key;\n\t\tconst cap = requireChild(key, '.sonic-key-cap', HTMLSpanElement);\n\n\t\tthis.upgradeProperties(\n\t\t\t'busy',\n\t\t\t'defaultPressed',\n\t\t\t'momentary',\n\t\t\t'softDisabled',\n\t\t\t'toggle',\n\t\t\t'pressed',\n\t\t\t'value',\n\t\t);\n\t\tthis.mirrorChildren(\n\t\t\t{\n\t\t\t\tcontrol: key,\n\t\t\t\tcopy: (originals) => {\n\t\t\t\t\tcap.replaceChildren(...originals.map((original) => copyNode(original)));\n\t\t\t\t},\n\t\t\t},\n\t\t\tsignal,\n\t\t);\n\t\tthis.render();\n\t\tthis.checkStyles(key, 'key.css');\n\t\tsignal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tthis.#release();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\n\t\tkey.addEventListener(\n\t\t\t'click',\n\t\t\t(event) => {\n\t\t\t\t// A native disabled button fires no click at all\n\t\t\t\tif (this.#isSoftDisabled()) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!this.toggle) return;\n\n\t\t\t\tthis.pressed = !this.pressed;\n\t\t\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tthis.#bindMomentary(key, signal);\n\t}\n\n\tprotected override focusTarget(): HTMLElement {\n\t\treturn this.#key;\n\t}\n\n\tprotected render(): void {\n\t\tconst key = this.#key;\n\n\t\tkey.disabled = this.isDisabled();\n\t\twriteAttribute(key, 'aria-disabled', this.#isSoftDisabled() ? 'true' : undefined);\n\t\twriteAttribute(key, 'aria-busy', this.busy ? 'true' : undefined);\n\t\tkey.removeAttribute('aria-pressed');\n\t\tif (this.toggle) key.setAttribute('aria-pressed', String(this.pressed));\n\t\tthis.toggleState('pressed', this.pressed);\n\t\tthis.forwardNaming(key, true);\n\n\t\t// eslint-disable-next-line unicorn/no-null -- `null` submits nothing\n\t\tconst submitted = this.toggle && this.pressed ? this.value : null;\n\n\t\t// The state restores an unpressed toggle too\n\t\tthis.writeFormValue(submitted, String(this.pressed));\n\t}\n\n\tprotected restoreState(state: string): void {\n\t\tif (this.toggle) this.pressed = state === 'true';\n\t}\n\n\t// Not `click`, which lands a tap late by the finger's dwell\n\t#bindMomentary(key: HTMLButtonElement, signal: AbortSignal): void {\n\t\tconst releasePointer = (event: PointerEvent): void => {\n\t\t\tif (event.pointerId === this.#holder) this.#release();\n\t\t};\n\n\t\tkey.addEventListener(\n\t\t\t'pointerdown',\n\t\t\t(event) => {\n\t\t\t\tif (event.button !== 0 || !this.#isMomentary()) return;\n\n\t\t\t\tkey.setPointerCapture(event.pointerId);\n\t\t\t\tthis.#hold(event.pointerId);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tkey.addEventListener('lostpointercapture', releasePointer, { signal });\n\t\tkey.addEventListener('pointercancel', releasePointer, { signal });\n\t\tkey.addEventListener('pointerup', releasePointer, { signal });\n\t\tkey.addEventListener(\n\t\t\t'keydown',\n\t\t\t(event) => {\n\t\t\t\tif (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;\n\n\t\t\t\tthis.#hold(event.key);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\tkey.addEventListener(\n\t\t\t'keyup',\n\t\t\t(event) => {\n\t\t\t\tif (event.key === this.#holder) this.#release();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t\t// Keyboard holds only; a finger on the next pad takes focus while this one is still held\n\t\tkey.addEventListener(\n\t\t\t'blur',\n\t\t\t() => {\n\t\t\t\tif (typeof this.#holder === 'string') this.#release();\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\t}\n\n\t#hold(holder: number | string): void {\n\t\tif (this.isDisabled() || this.#isSoftDisabled() || this.#holder !== undefined) return;\n\n\t\tthis.#holder = holder;\n\t\tthis.pressed = true;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n\n\t#isMomentary(): boolean {\n\t\treturn this.momentary && !this.toggle;\n\t}\n\n\t#isSoftDisabled(): boolean {\n\t\treturn this.softDisabled && !this.isDisabled();\n\t}\n\n\t#release(): void {\n\t\tif (this.#holder === undefined) return;\n\n\t\tthis.#holder = undefined;\n\t\tthis.pressed = false;\n\t\tthis.dispatchEvent(new Event('change', { bubbles: true }));\n\t}\n}\n"],"mappings":"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"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { SonicFormElement } from "./form-element.js";
|
|
2
|
-
//#region src/elements/range-element.d.ts
|
|
3
|
-
export interface RangeAxis {
|
|
4
|
-
position: (event: PointerEvent) => number;
|
|
5
|
-
travelPx: number;
|
|
6
|
-
}
|
|
7
|
-
export declare abstract class SonicRangeElement extends SonicFormElement {
|
|
8
|
-
#private;
|
|
9
|
-
static readonly observedAttributes: string[];
|
|
10
|
-
get default(): number | undefined;
|
|
11
|
-
set default(value: number | undefined);
|
|
12
|
-
get detent(): number | undefined;
|
|
13
|
-
set detent(value: number | undefined);
|
|
14
|
-
get dimmed(): boolean;
|
|
15
|
-
set dimmed(isDimmed: boolean);
|
|
16
|
-
get doublePress(): 'reset' | 'type';
|
|
17
|
-
set doublePress(gesture: 'reset' | 'type' | undefined);
|
|
18
|
-
get formatValue(): ((value: number) => string) | undefined;
|
|
19
|
-
set formatValue(format: ((value: number) => string) | undefined);
|
|
20
|
-
get max(): number;
|
|
21
|
-
set max(value: number | undefined);
|
|
22
|
-
get midpoint(): number | undefined;
|
|
23
|
-
set midpoint(value: number | undefined);
|
|
24
|
-
get min(): number;
|
|
25
|
-
set min(value: number | undefined);
|
|
26
|
-
get notched(): boolean;
|
|
27
|
-
set notched(isNotched: boolean);
|
|
28
|
-
get origin(): number | undefined;
|
|
29
|
-
set origin(value: number | undefined);
|
|
30
|
-
get parseValue(): ((text: string) => number) | undefined;
|
|
31
|
-
set parseValue(parse: ((text: string) => number) | undefined);
|
|
32
|
-
get readout(): boolean;
|
|
33
|
-
set readout(isShown: boolean);
|
|
34
|
-
get step(): number;
|
|
35
|
-
set step(value: number | undefined);
|
|
36
|
-
get taper(): 'linear' | 'log';
|
|
37
|
-
set taper(curve: 'linear' | 'log' | undefined);
|
|
38
|
-
get value(): number;
|
|
39
|
-
set value(next: number);
|
|
40
|
-
get values(): Array<number> | undefined;
|
|
41
|
-
set values(entries: Array<number> | undefined);
|
|
42
|
-
attributeChangedCallback(name: string): void;
|
|
43
|
-
connectedCallback(): void;
|
|
44
|
-
protected bindGestures(control: HTMLElement, signal: AbortSignal, grab: (event: PointerEvent) => RangeAxis | undefined): void;
|
|
45
|
-
protected bindScale(control: HTMLElement, scale: HTMLElement, signal: AbortSignal): void;
|
|
46
|
-
protected clampRange(next: number): number;
|
|
47
|
-
protected controlRole(): 'slider' | 'spinbutton';
|
|
48
|
-
protected fraction(value: number): number;
|
|
49
|
-
protected input(next: number): boolean;
|
|
50
|
-
protected modulationFractions(amount: number): [number, number];
|
|
51
|
-
protected originFraction(): number;
|
|
52
|
-
protected positions(): number | undefined;
|
|
53
|
-
protected range(): number;
|
|
54
|
-
protected renderAria(control: HTMLElement, orientation?: 'horizontal' | 'vertical'): void;
|
|
55
|
-
protected renderScale(): void;
|
|
56
|
-
protected restoreState(state: string): void;
|
|
57
|
-
protected restValue(): number;
|
|
58
|
-
protected springTarget(): number | undefined;
|
|
59
|
-
protected valueAt(fraction: number): number;
|
|
60
|
-
protected valueText(): string;
|
|
61
|
-
protected wraps(): boolean;
|
|
62
|
-
}
|
|
63
|
-
//#endregion
|
|
64
|
-
//# sourceMappingURL=range-element.d.ts.map
|