Add View Transitions announcer (#8621)

* Add View Transitions announcer

* fix astro check

* Append the text in a setTimeout

* Use 60 for the timeout

* Add comment on magic number

* Add a changeset

* Update .changeset/small-rules-relax.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Bring back announce logic

* Remove mention of env file

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 79 insertions, 0 deletions

diff --git a/examples/view-transitions/src/scripts/utils.js b/examples/view-transitions/src/scripts/utils.js
new file mode 100644
index 000000000..3d98181ab
--- /dev/null
+++ b/examples/view-transitions/src/scripts/utils.js
@@ -0,0 +1,79 @@
+export function getNavigationType(fromPath, toPath) {
+  if (fromPath.startsWith('/movies') && toPath === '/') {
+    return 'movie-to-home'
+  }
+
+  if (fromPath === '/tv' && toPath.startsWith('/tv/')) {
+    return 'tv-to-show'
+  }
+
+  if (fromPath === '/' && toPath.startsWith('/movies')) {
+    return 'home-to-movie'
+  }
+
+  if (fromPath.startsWith('/tv/') && toPath === '/tv') {
+    return 'show-to-tv'
+  }
+
+  if (
+    (fromPath.startsWith('/movies') || fromPath.startsWith('/tv')) &&
+    toPath.startsWith('/people')
+  ) {
+    return 'movie-to-person'
+  }
+
+  if (
+    fromPath.startsWith('/people') &&
+    (toPath.startsWith('/movies') || toPath.startsWith('/tv/'))
+  ) {
+    return 'person-to-movie'
+  }
+
+  return 'other'
+}
+
+export function isBackNavigation(navigateEvent) {
+  if (
+    navigateEvent.navigationType === 'push' ||
+    navigateEvent.navigationType === 'replace'
+  ) {
+    return false
+  }
+  if (
+    navigateEvent.destination.index !== -1 &&
+    navigateEvent.destination.index < navigation.currentEntry.index
+  ) {
+    return true
+  }
+  return false
+}
+
+export function shouldNotIntercept(navigationEvent) {
+  return (
+    navigationEvent.canIntercept === false ||
+    // If this is just a hashChange,
+    // just let the browser handle scrolling to the content.
+    navigationEvent.hashChange ||
+    // If this is a download,
+    // let the browser perform the download.
+    navigationEvent.downloadRequest ||
+    // If this is a form submission,
+    // let that go to the server.
+    navigationEvent.formData
+  )
+}
+
+export function useTvFragment(navigateEvent) {
+  const toUrl = new URL(navigateEvent.destination.url)
+  const toPath = toUrl.pathname
+
+  return toPath.startsWith('/tv')
+}
+
+export function getPathId(path) {
+  return path.split('/')[2]
+}
+
+export function updateTheDOMSomehow(data) {
+  document.getElementById('content').innerHTML = data
+}