Skip to content

Instantly share code, notes, and snippets.

@AceCodePt
Last active October 29, 2023 17:30
Show Gist options
  • Save AceCodePt/662834e1e96afaa6c5324adb44427a13 to your computer and use it in GitHub Desktop.
Save AceCodePt/662834e1e96afaa6c5324adb44427a13 to your computer and use it in GitHub Desktop.
htmx-astro-view-transition
htmx.defineExtension("hx-astro-view-transition", {
onEvent: function (name, evt: any) {
if (name === "htmx:afterRequest") {
const attributes = evt.target.attributes;
const viewTransitionTarget =
attributes["hx-view-transition"]?.value;
if (!viewTransitionTarget) {
console.log(evt);
return;
}
const a = document.createElement("a");
a.href = viewTransitionTarget;
console.count(viewTransitionTarget);
document.body.appendChild(a);
a.dispatchEvent(
new PointerEvent("mouseenter", {
bubbles: true,
cancelable: true,
}),
);
a.dispatchEvent(
new PointerEvent("click", {
bubbles: true,
cancelable: true,
}),
);
}
},
});
// Runs on view transitions navigation + process the new HTML
document.addEventListener("astro:after-swap", () =>
htmx.process(document),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment