eewing
265 lines
8.2 KiB
JavaScript
265 lines
8.2 KiB
JavaScript
import { attachRef, } from "svelte-toolbelt";
|
|
import { Context } from "runed";
|
|
import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
|
|
import { kbd } from "../../internal/kbd.js";
|
|
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
|
|
export const toolbarAttrs = createBitsAttrs({
|
|
component: "toolbar",
|
|
parts: ["root", "item", "group", "group-item", "link", "button"],
|
|
});
|
|
const ToolbarRootContext = new Context("Toolbar.Root");
|
|
const ToolbarGroupContext = new Context("Toolbar.Group");
|
|
export class ToolbarRootState {
|
|
static create(opts) {
|
|
return ToolbarRootContext.set(new ToolbarRootState(opts));
|
|
}
|
|
opts;
|
|
rovingFocusGroup;
|
|
attachment;
|
|
constructor(opts) {
|
|
this.opts = opts;
|
|
this.attachment = attachRef(this.opts.ref);
|
|
this.rovingFocusGroup = new RovingFocusGroup({
|
|
orientation: this.opts.orientation,
|
|
loop: this.opts.loop,
|
|
rootNode: this.opts.ref,
|
|
candidateAttr: toolbarAttrs.item,
|
|
});
|
|
}
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
role: "toolbar",
|
|
"data-orientation": this.opts.orientation.current,
|
|
[toolbarAttrs.root]: "",
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
class ToolbarGroupBaseState {
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(this.opts.ref);
|
|
}
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
[toolbarAttrs.group]: "",
|
|
role: "group",
|
|
"data-orientation": this.root.opts.orientation.current,
|
|
"data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
class ToolbarGroupSingleState extends ToolbarGroupBaseState {
|
|
opts;
|
|
root;
|
|
isMulti = false;
|
|
anyPressed = $derived.by(() => this.opts.value.current !== "");
|
|
constructor(opts, root) {
|
|
super(opts, root);
|
|
this.opts = opts;
|
|
this.root = root;
|
|
}
|
|
includesItem(item) {
|
|
return this.opts.value.current === item;
|
|
}
|
|
toggleItem(item) {
|
|
if (this.includesItem(item)) {
|
|
this.opts.value.current = "";
|
|
}
|
|
else {
|
|
this.opts.value.current = item;
|
|
}
|
|
}
|
|
}
|
|
class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
|
|
opts;
|
|
root;
|
|
isMulti = true;
|
|
anyPressed = $derived.by(() => this.opts.value.current.length > 0);
|
|
constructor(opts, root) {
|
|
super(opts, root);
|
|
this.opts = opts;
|
|
this.root = root;
|
|
}
|
|
includesItem(item) {
|
|
return this.opts.value.current.includes(item);
|
|
}
|
|
toggleItem(item) {
|
|
if (this.includesItem(item)) {
|
|
this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
|
|
}
|
|
else {
|
|
this.opts.value.current = [...this.opts.value.current, item];
|
|
}
|
|
}
|
|
}
|
|
export class ToolbarGroupState {
|
|
static create(opts) {
|
|
const { type, ...rest } = opts;
|
|
const rootState = ToolbarRootContext.get();
|
|
const groupState = type === "single"
|
|
? new ToolbarGroupSingleState(rest, rootState)
|
|
: new ToolbarGroupMultipleState(rest, rootState);
|
|
return ToolbarGroupContext.set(groupState);
|
|
}
|
|
}
|
|
export class ToolbarGroupItemState {
|
|
static create(opts) {
|
|
const group = ToolbarGroupContext.get();
|
|
return new ToolbarGroupItemState(opts, group, group.root);
|
|
}
|
|
opts;
|
|
group;
|
|
root;
|
|
attachment;
|
|
#isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
|
|
constructor(opts, group, root) {
|
|
this.opts = opts;
|
|
this.group = group;
|
|
this.root = root;
|
|
this.attachment = attachRef(this.opts.ref);
|
|
$effect(() => {
|
|
this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
|
|
});
|
|
this.onclick = this.onclick.bind(this);
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
}
|
|
#toggleItem() {
|
|
if (this.#isDisabled)
|
|
return;
|
|
this.group.toggleItem(this.opts.value.current);
|
|
}
|
|
onclick(_) {
|
|
if (this.#isDisabled)
|
|
return;
|
|
this.#toggleItem();
|
|
}
|
|
onkeydown(e) {
|
|
if (this.#isDisabled)
|
|
return;
|
|
if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
|
|
e.preventDefault();
|
|
this.#toggleItem();
|
|
return;
|
|
}
|
|
this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
|
|
}
|
|
isPressed = $derived.by(() => this.group.includesItem(this.opts.value.current));
|
|
#ariaChecked = $derived.by(() => {
|
|
return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
|
|
});
|
|
#ariaPressed = $derived.by(() => {
|
|
return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
|
|
});
|
|
#tabIndex = $state(0);
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
role: this.group.isMulti ? undefined : "radio",
|
|
tabindex: this.#tabIndex,
|
|
"data-orientation": this.root.opts.orientation.current,
|
|
"data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
|
|
"data-state": getToggleItemDataState(this.isPressed),
|
|
"data-value": this.opts.value.current,
|
|
"aria-pressed": this.#ariaPressed,
|
|
"aria-checked": this.#ariaChecked,
|
|
[toolbarAttrs.item]: "",
|
|
[toolbarAttrs["group-item"]]: "",
|
|
disabled: boolToTrueOrUndef(this.#isDisabled),
|
|
//
|
|
onclick: this.onclick,
|
|
onkeydown: this.onkeydown,
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
export class ToolbarLinkState {
|
|
static create(opts) {
|
|
return new ToolbarLinkState(opts, ToolbarRootContext.get());
|
|
}
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(this.opts.ref);
|
|
$effect(() => {
|
|
this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
|
|
});
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
}
|
|
onkeydown(e) {
|
|
this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
|
|
}
|
|
#role = $derived.by(() => {
|
|
if (!this.opts.ref.current)
|
|
return undefined;
|
|
const tagName = this.opts.ref.current.tagName;
|
|
if (tagName !== "A")
|
|
return "link";
|
|
return undefined;
|
|
});
|
|
#tabIndex = $state(0);
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
[toolbarAttrs.link]: "",
|
|
[toolbarAttrs.item]: "",
|
|
role: this.#role,
|
|
tabindex: this.#tabIndex,
|
|
"data-orientation": this.root.opts.orientation.current,
|
|
//
|
|
onkeydown: this.onkeydown,
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
export class ToolbarButtonState {
|
|
static create(opts) {
|
|
return new ToolbarButtonState(opts, ToolbarRootContext.get());
|
|
}
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(this.opts.ref);
|
|
$effect(() => {
|
|
this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
|
|
});
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
}
|
|
onkeydown(e) {
|
|
this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
|
|
}
|
|
#tabIndex = $state(0);
|
|
#role = $derived.by(() => {
|
|
if (!this.opts.ref.current)
|
|
return undefined;
|
|
const tagName = this.opts.ref.current.tagName;
|
|
if (tagName !== "BUTTON")
|
|
return "button";
|
|
return undefined;
|
|
});
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
[toolbarAttrs.item]: "",
|
|
[toolbarAttrs.button]: "",
|
|
role: this.#role,
|
|
tabindex: this.#tabIndex,
|
|
"data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
|
|
"data-orientation": this.root.opts.orientation.current,
|
|
disabled: boolToTrueOrUndef(this.opts.disabled.current),
|
|
//
|
|
onkeydown: this.onkeydown,
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
//
|
|
// HELPERS
|
|
//
|
|
function getToggleItemDataState(condition) {
|
|
return condition ? "on" : "off";
|
|
}
|