mirror of
https://github.com/withastro/astro.git
synced 2025-02-03 22:29:08 -05:00
62b0d20b97
* extend virtual module astro:transitions/client to exports swapFunctions * use virtual module in e2e tests * Update .changeset/new-monkeys-sit.md * Update .changeset/new-monkeys-sit.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update new-monkeys-sit.md * Update swap-functions.ts restoreFocus() bindings are now returned by saveFocus() and do not make sense anymore as a member of the swapFunctions object * take over suggestion Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/new-monkeys-sit.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
32 lines
1.2 KiB
Markdown
32 lines
1.2 KiB
Markdown
---
|
|
'astro': minor
|
|
---
|
|
|
|
Adds a new object `swapFunctions` to expose the necessary utility functions on `astro:transitions/client` that allow you to build custom swap functions to be used with view transitions.
|
|
|
|
The example below uses these functions to replace Astro's built-in default `swap` function with one that only swaps the `<main>` part of the page:
|
|
|
|
```astro
|
|
<script>
|
|
import { swapFunctions } from 'astro:transitions/client';
|
|
|
|
document.addEventListener('astro:before-swap', (e) => { e.swap = () => swapMainOnly(e.newDocument) });
|
|
|
|
function swapMainOnly(doc: Document) {
|
|
swapFunctions.deselectScripts(doc);
|
|
swapFunctions.swapRootAttributes(doc);
|
|
swapFunctions.swapHeadElements(doc);
|
|
const restoreFocusFunction = swapFunctions.saveFocus();
|
|
const newMain = doc.querySelector('main');
|
|
const oldMain = document.querySelector('main');
|
|
if (newMain && oldMain) {
|
|
swapFunctions.swapBodyElement(newMain, oldMain);
|
|
} else {
|
|
swapFunctions.swapBodyElement(doc.body, document.body);
|
|
}
|
|
restoreFocusFunction();
|
|
};
|
|
<script>
|
|
```
|
|
|
|
See the [view transitions guide](https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap) for more information about hooking into the `astro:before-swap` lifecycle event and adding a custom swap implementation.
|