18e72262dd
- Displays workflow form as collapsible sections - Combines run now toggle into submit - Fixes exclusion field errors not preventing form submission - Refactors `<btrix-observable>` into new `Observable` controller --------- Co-authored-by: emma <hi@emma.cafe>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import type { ReactiveController, ReactiveControllerHost } from "lit";
|
|
|
|
type IntersectionEventDetail = {
|
|
entries: IntersectionObserverEntry[];
|
|
};
|
|
export type IntersectEvent = CustomEvent<IntersectionEventDetail>;
|
|
|
|
/**
|
|
* Observe one or more elements with Intersection Observer API.
|
|
*
|
|
* @fires btrix-intersect IntersectionEventDetail
|
|
*/
|
|
export class ObservableController implements ReactiveController {
|
|
private readonly host: ReactiveControllerHost & EventTarget;
|
|
|
|
private observer?: IntersectionObserver;
|
|
private readonly observerOptions?: IntersectionObserverInit;
|
|
|
|
constructor(
|
|
host: ObservableController["host"],
|
|
options?: IntersectionObserverInit,
|
|
) {
|
|
this.host = host;
|
|
this.observerOptions = options;
|
|
host.addController(this);
|
|
}
|
|
|
|
hostConnected() {
|
|
this.observer = new IntersectionObserver(
|
|
this.handleIntersect,
|
|
this.observerOptions,
|
|
);
|
|
}
|
|
|
|
hostDisconnected() {
|
|
this.observer?.disconnect();
|
|
}
|
|
|
|
public observe(target: Element) {
|
|
this.observer?.observe(target);
|
|
}
|
|
|
|
private readonly handleIntersect = (entries: IntersectionObserverEntry[]) => {
|
|
this.host.dispatchEvent(
|
|
new CustomEvent<IntersectionEventDetail>("btrix-intersect", {
|
|
detail: { entries },
|
|
}),
|
|
);
|
|
};
|
|
}
|