92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
|
import { Controller } from '@hotwired/stimulus';
|
||
|
|
import invariant from 'tiny-invariant';
|
||
|
|
import { z } from 'zod';
|
||
|
|
|
||
|
|
type Detail = Record<string, unknown>;
|
||
|
|
|
||
|
|
export class TurboEventController extends Controller {
|
||
|
|
static values = {
|
||
|
|
type: String,
|
||
|
|
detail: Object
|
||
|
|
};
|
||
|
|
|
||
|
|
declare readonly typeValue: string;
|
||
|
|
declare readonly detailValue: Detail;
|
||
|
|
|
||
|
|
connect(): void {
|
||
|
|
this.globalDispatch(this.typeValue, this.detailValue);
|
||
|
|
this.element.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
private globalDispatch(type: string, detail: Detail): void {
|
||
|
|
this.dispatch(type, {
|
||
|
|
detail,
|
||
|
|
prefix: '',
|
||
|
|
target: document.documentElement
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const MutationAction = z.enum(['show', 'hide', 'focus']);
|
||
|
|
type MutationAction = z.infer<typeof MutationAction>;
|
||
|
|
const Mutation = z.union([
|
||
|
|
z.object({
|
||
|
|
action: MutationAction,
|
||
|
|
delay: z.number().optional(),
|
||
|
|
target: z.string()
|
||
|
|
}),
|
||
|
|
z.object({
|
||
|
|
action: MutationAction,
|
||
|
|
delay: z.number().optional(),
|
||
|
|
targets: z.string()
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
type Mutation = z.infer<typeof Mutation>;
|
||
|
|
|
||
|
|
addEventListener('dom:mutation', (event) => {
|
||
|
|
const detail = (event as CustomEvent).detail;
|
||
|
|
const mutation = Mutation.parse(detail);
|
||
|
|
mutate(mutation);
|
||
|
|
});
|
||
|
|
|
||
|
|
const Mutations: Record<MutationAction, (mutation: Mutation) => void> = {
|
||
|
|
hide: (mutation) => {
|
||
|
|
for (const element of findElements(mutation)) {
|
||
|
|
element.classList.add('hidden');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show: (mutation) => {
|
||
|
|
for (const element of findElements(mutation)) {
|
||
|
|
element.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
focus: (mutation) => {
|
||
|
|
for (const element of findElements(mutation)) {
|
||
|
|
element.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function mutate(mutation: Mutation) {
|
||
|
|
const fn = Mutations[mutation.action];
|
||
|
|
invariant(fn, `Could not find mutation ${mutation.action}`);
|
||
|
|
if (mutation.delay) {
|
||
|
|
setTimeout(() => fn(mutation), mutation.delay);
|
||
|
|
} else {
|
||
|
|
fn(mutation);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function findElements<Element extends HTMLElement = HTMLElement>(
|
||
|
|
mutation: Mutation
|
||
|
|
): Element[] {
|
||
|
|
if ('target' in mutation) {
|
||
|
|
const element = document.querySelector<Element>(`#${mutation.target}`);
|
||
|
|
invariant(element, `Could not find element with id ${mutation.target}`);
|
||
|
|
return [element];
|
||
|
|
} else if ('targets' in mutation) {
|
||
|
|
return [...document.querySelectorAll<Element>(mutation.targets)];
|
||
|
|
}
|
||
|
|
invariant(false, 'Could not find element');
|
||
|
|
}
|