This commit is contained in:
eewing
+240
@@ -0,0 +1,240 @@
|
||||
import { afterSleep, onDestroyEffect, attachRef, DOMContext, boxWith, } from "svelte-toolbelt";
|
||||
import { Context, watch } from "runed";
|
||||
import { on } from "svelte/events";
|
||||
import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
|
||||
import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
|
||||
import { getTabbableCandidates } from "../../internal/focus.js";
|
||||
import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
|
||||
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
|
||||
const linkPreviewAttrs = createBitsAttrs({
|
||||
component: "link-preview",
|
||||
parts: ["content", "trigger"],
|
||||
});
|
||||
const LinkPreviewRootContext = new Context("LinkPreview.Root");
|
||||
export class LinkPreviewRootState {
|
||||
static create(opts) {
|
||||
return LinkPreviewRootContext.set(new LinkPreviewRootState(opts));
|
||||
}
|
||||
opts;
|
||||
hasSelection = $state(false);
|
||||
isPointerDownOnContent = $state(false);
|
||||
containsSelection = $state(false);
|
||||
timeout = null;
|
||||
contentNode = $state(null);
|
||||
contentMounted = $state(false);
|
||||
contentPresence;
|
||||
triggerNode = $state(null);
|
||||
isOpening = false;
|
||||
domContext = new DOMContext(() => null);
|
||||
constructor(opts) {
|
||||
this.opts = opts;
|
||||
this.contentPresence = new PresenceManager({
|
||||
ref: boxWith(() => this.contentNode),
|
||||
open: this.opts.open,
|
||||
onComplete: () => {
|
||||
this.opts.onOpenChangeComplete.current(this.opts.open.current);
|
||||
},
|
||||
});
|
||||
watch(() => this.opts.open.current, (isOpen) => {
|
||||
if (!isOpen) {
|
||||
this.hasSelection = false;
|
||||
return;
|
||||
}
|
||||
if (!this.domContext)
|
||||
return;
|
||||
const handlePointerUp = () => {
|
||||
this.containsSelection = false;
|
||||
this.isPointerDownOnContent = false;
|
||||
afterSleep(1, () => {
|
||||
const isSelection = this.domContext.getDocument().getSelection()?.toString() !== "";
|
||||
if (isSelection) {
|
||||
this.hasSelection = true;
|
||||
}
|
||||
else {
|
||||
this.hasSelection = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
const unsubListener = on(this.domContext.getDocument(), "pointerup", handlePointerUp);
|
||||
if (!this.contentNode)
|
||||
return;
|
||||
const tabCandidates = getTabbableCandidates(this.contentNode);
|
||||
for (const candidate of tabCandidates) {
|
||||
candidate.setAttribute("tabindex", "-1");
|
||||
}
|
||||
return () => {
|
||||
unsubListener();
|
||||
this.hasSelection = false;
|
||||
this.isPointerDownOnContent = false;
|
||||
};
|
||||
});
|
||||
}
|
||||
clearTimeout() {
|
||||
if (this.timeout) {
|
||||
this.domContext.clearTimeout(this.timeout);
|
||||
this.timeout = null;
|
||||
}
|
||||
}
|
||||
handleOpen() {
|
||||
this.clearTimeout();
|
||||
if (this.opts.open.current || this.opts.disabled.current)
|
||||
return;
|
||||
this.isOpening = true;
|
||||
this.timeout = this.domContext.setTimeout(() => {
|
||||
if (this.isOpening) {
|
||||
this.opts.open.current = true;
|
||||
this.isOpening = false;
|
||||
}
|
||||
}, this.opts.openDelay.current);
|
||||
}
|
||||
immediateClose() {
|
||||
this.clearTimeout();
|
||||
this.isOpening = false;
|
||||
this.opts.open.current = false;
|
||||
}
|
||||
handleClose() {
|
||||
this.isOpening = false;
|
||||
this.clearTimeout();
|
||||
if (!this.isPointerDownOnContent && !this.hasSelection) {
|
||||
this.timeout = this.domContext.setTimeout(() => {
|
||||
this.opts.open.current = false;
|
||||
}, this.opts.closeDelay.current);
|
||||
}
|
||||
}
|
||||
}
|
||||
export class LinkPreviewTriggerState {
|
||||
static create(opts) {
|
||||
return new LinkPreviewTriggerState(opts, LinkPreviewRootContext.get());
|
||||
}
|
||||
opts;
|
||||
root;
|
||||
attachment;
|
||||
constructor(opts, root) {
|
||||
this.opts = opts;
|
||||
this.root = root;
|
||||
this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
|
||||
this.root.domContext = new DOMContext(opts.ref);
|
||||
this.onpointerenter = this.onpointerenter.bind(this);
|
||||
this.onpointerleave = this.onpointerleave.bind(this);
|
||||
this.onfocus = this.onfocus.bind(this);
|
||||
this.onblur = this.onblur.bind(this);
|
||||
}
|
||||
onpointerenter(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onpointerleave(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
if (!this.root.contentMounted || !this.root.opts.open.current) {
|
||||
this.root.immediateClose();
|
||||
}
|
||||
}
|
||||
onfocus(e) {
|
||||
if (!isFocusVisible(e.currentTarget))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onblur(_) {
|
||||
this.root.handleClose();
|
||||
}
|
||||
props = $derived.by(() => ({
|
||||
id: this.opts.id.current,
|
||||
"aria-haspopup": "dialog",
|
||||
"aria-expanded": boolToStr(this.root.opts.open.current),
|
||||
"data-state": getDataOpenClosed(this.root.opts.open.current),
|
||||
"aria-controls": this.root.contentNode?.id,
|
||||
role: "button",
|
||||
[linkPreviewAttrs.trigger]: "",
|
||||
onpointerenter: this.onpointerenter,
|
||||
onfocus: this.onfocus,
|
||||
onblur: this.onblur,
|
||||
onpointerleave: this.onpointerleave,
|
||||
...this.attachment,
|
||||
}));
|
||||
}
|
||||
export class LinkPreviewContentState {
|
||||
static create(opts) {
|
||||
return new LinkPreviewContentState(opts, LinkPreviewRootContext.get());
|
||||
}
|
||||
opts;
|
||||
root;
|
||||
attachment;
|
||||
constructor(opts, root) {
|
||||
this.opts = opts;
|
||||
this.root = root;
|
||||
this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
|
||||
this.root.domContext = new DOMContext(opts.ref);
|
||||
this.onpointerdown = this.onpointerdown.bind(this);
|
||||
this.onpointerenter = this.onpointerenter.bind(this);
|
||||
this.onfocusout = this.onfocusout.bind(this);
|
||||
new SafePolygon({
|
||||
triggerNode: () => this.root.triggerNode,
|
||||
contentNode: () => this.opts.ref.current,
|
||||
enabled: () => this.root.opts.open.current,
|
||||
onPointerExit: () => {
|
||||
this.root.handleClose();
|
||||
},
|
||||
});
|
||||
onDestroyEffect(() => {
|
||||
this.root.clearTimeout();
|
||||
});
|
||||
}
|
||||
onpointerdown(e) {
|
||||
const target = e.target;
|
||||
if (!isElement(target))
|
||||
return;
|
||||
if (e.currentTarget.contains(target)) {
|
||||
this.root.containsSelection = true;
|
||||
}
|
||||
this.root.hasSelection = true;
|
||||
this.root.isPointerDownOnContent = true;
|
||||
}
|
||||
onpointerenter(e) {
|
||||
if (isTouch(e))
|
||||
return;
|
||||
this.root.handleOpen();
|
||||
}
|
||||
onfocusout(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
onInteractOutside = (e) => {
|
||||
this.opts.onInteractOutside.current(e);
|
||||
if (e.defaultPrevented)
|
||||
return;
|
||||
this.root.handleClose();
|
||||
};
|
||||
onEscapeKeydown = (e) => {
|
||||
this.opts.onEscapeKeydown.current?.(e);
|
||||
if (e.defaultPrevented)
|
||||
return;
|
||||
this.root.handleClose();
|
||||
};
|
||||
onOpenAutoFocus = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
onCloseAutoFocus = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
get shouldRender() {
|
||||
return this.root.contentPresence.shouldRender;
|
||||
}
|
||||
snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
|
||||
props = $derived.by(() => ({
|
||||
id: this.opts.id.current,
|
||||
tabindex: -1,
|
||||
"data-state": getDataOpenClosed(this.root.opts.open.current),
|
||||
[linkPreviewAttrs.content]: "",
|
||||
onpointerdown: this.onpointerdown,
|
||||
onpointerenter: this.onpointerenter,
|
||||
onfocusout: this.onfocusout,
|
||||
...this.attachment,
|
||||
}));
|
||||
popperProps = {
|
||||
onInteractOutside: this.onInteractOutside,
|
||||
onEscapeKeydown: this.onEscapeKeydown,
|
||||
onOpenAutoFocus: this.onOpenAutoFocus,
|
||||
onCloseAutoFocus: this.onCloseAutoFocus,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user