🐛 Fix interactive components not working with Astro's ViewTransition API

Frontendland · Jan 12, 2025 · 090fedf · 090fedf
1 parent 1603a0d
commit 090fedf
Show file tree

Hide file tree

Showing 32 changed files with 785 additions and 661 deletions.
diff --git a/src/blocks/Deployments/Deployments.astro b/src/blocks/Deployments/Deployments.astro
@@ -23,16 +23,21 @@ import styles from './deployments.module.scss'
 </Modal>
 
 <script>
-    import { closeModal, modal } from 'webcoreui'
+    import { closeModal, modal, on } from 'webcoreui'
 
-    const closeButton = document.querySelectorAll('.close-modal')
+    const addModal = () => {
+        const closeButton = document.querySelectorAll('.close-modal')
 
-    modal({
-        trigger: '#connect',
-        modal: '.modal'
-    })
+        modal({
+            trigger: '#connect',
+            modal: '.modal'
+        })
 
-    Array.from(closeButton).forEach(button => {
-        button?.addEventListener('click', () => closeModal('.modal'))
-    })
+        Array.from(closeButton).forEach(button => {
+            button?.addEventListener('click', () => closeModal('.modal'))
+        })
+    }
+
+    on(document, 'astro:after-swap', addModal)
+    addModal()
 </script>
diff --git a/src/blocks/Settings/Settings.astro b/src/blocks/Settings/Settings.astro
@@ -36,16 +36,21 @@ const radioItems = [
 </Toast>
 
 <script>
-    import { toast } from 'webcoreui'
+    import { on, toast } from 'webcoreui'
 
-    const marketing = document.querySelector('.marketing input')
+    const addToast = () => {
+        const marketing = document.querySelector('.marketing input')
 
-    marketing?.addEventListener('change', (e: any) => {
-        toast({
-            element: '.marketing-toast',
-            content: e.target.checked
-                ? 'Marketing emails enabled'
-                : 'Marketing emails disabled'
+        marketing?.addEventListener('change', (e: any) => {
+            toast({
+                element: '.marketing-toast',
+                content: e.target.checked
+                    ? 'Marketing emails enabled'
+                    : 'Marketing emails disabled'
+            })
         })
-    })
+    }
+
+    on(document, 'astro:after-swap', addToast)
+    addToast()
 </script>
diff --git a/src/blocks/SignUp/SignUp.astro b/src/blocks/SignUp/SignUp.astro
@@ -62,5 +62,10 @@ const {
 <script>
     import { on } from '@utils/DOMUtils'
 
-    on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
+    const addEventListener = () => {
+        on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
+    }
+
+    on(document, 'astro:after-swap', addEventListener)
+    addEventListener()
 </script>
diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro
@@ -45,13 +45,18 @@ const classes = [
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-accordion"]', 'click', (event: Event) => {
-        const target = event.target as HTMLDivElement
-
-        if (target.dataset.toggle) {
-            target.dataset.open = target.dataset.open === 'true'
-                ? 'false'
-                : 'true'
-        }
-    }, true)
+    const addEventListeners = () => {
+        on('[data-id="w-accordion"]', 'click', (event: Event) => {
+            const target = event.target as HTMLDivElement
+
+            if (target.dataset.toggle) {
+                target.dataset.open = target.dataset.open === 'true'
+                    ? 'false'
+                    : 'true'
+            }
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Banner/Banner.astro b/src/components/Banner/Banner.astro
@@ -48,9 +48,14 @@ const style = top
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-banner-close"]', 'click', (event: Event) => {
-        const target = event.currentTarget as HTMLDivElement
+    const addEventListeners = () => {
+        on('[data-id="w-banner-close"]', 'click', (event: Event) => {
+            const target = event.currentTarget as HTMLDivElement
 
-        target.parentElement?.remove()
-    }, true)
+            target.parentElement?.remove()
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Carousel/Carousel.astro b/src/components/Carousel/Carousel.astro
@@ -102,53 +102,55 @@ const style = itemsPerSlide > 1
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
 
-    const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
-
-    const scroll = (event: Event) => {
-        const target = event.target as HTMLDivElement
-
-        if (!target.dataset.paginated) {
-            const scrollLeft = target.scrollLeft
-            const itemWidth = target.children[0].clientWidth
-            const page = Math.round(scrollLeft / itemWidth) + 1
-            const carouselElement = target.children[0]
-            const paginationElement = target.parentElement
-                ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
-            const currentPage = Number(paginationElement.dataset.currentPage)
-            const diff = Math.abs(currentPage - page)
-
-            let triggerButton = currentPage > page
-                ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
-                : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
-
-            if (!triggerButton) {
-                triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
-            }
+    const addEventListeners = () => {
+        const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
+
+        const scroll = (event: Event) => {
+            const target = event.target as HTMLDivElement
+
+            if (!target.dataset.paginated) {
+                const scrollLeft = target.scrollLeft
+                const itemWidth = target.children[0].clientWidth
+                const page = Math.round(scrollLeft / itemWidth) + 1
+                const carouselElement = target.children[0]
+                const paginationElement = target.parentElement
+                    ?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
+                const currentPage = Number(paginationElement.dataset.currentPage)
+                const diff = Math.abs(currentPage - page)
+
+                let triggerButton = currentPage > page
+                    ? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
+                    : paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
+
+                if (!triggerButton) {
+                    triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
+                }
 
-            for (let i = 0; i < diff; i++) {
-                triggerButton.click()
-            }
+                for (let i = 0; i < diff; i++) {
+                    triggerButton.click()
+                }
 
-            Array.from(carouselElement.children).forEach(li => {
-                (li as HTMLLIElement).removeAttribute('data-active')
-            })
+                Array.from(carouselElement.children).forEach(li => {
+                    (li as HTMLLIElement).removeAttribute('data-active')
+                })
 
-            const activeElement = carouselElement.children[page - 1] as HTMLLIElement
+                const activeElement = carouselElement.children[page - 1] as HTMLLIElement
 
-            activeElement.dataset.active = 'true'
+                activeElement.dataset.active = 'true'
+            }
         }
-    }
 
-    carousels.forEach(carousel => {
-        const carouselElement = carousel as HTMLDivElement
-        const debounceAmount = carouselElement.dataset.debounce
-            ? Number(carouselElement.dataset.debounce)
-            : 20
+        carousels.forEach(carousel => {
+            const carouselElement = carousel as HTMLDivElement
+            const debounceAmount = carouselElement.dataset.debounce
+                ? Number(carouselElement.dataset.debounce)
+                : 20
 
-        carousel.addEventListener('scroll', debounce((event: Event) => {
-            scroll(event)
-        }, debounceAmount))
-    })
+            carousel.addEventListener('scroll', debounce((event: Event) => {
+                scroll(event)
+            }, debounceAmount))
+        })
+    }
 
     listen('paginate', event => {
         const target = event.target
@@ -172,7 +174,7 @@ const style = itemsPerSlide > 1
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
 
         const liElement = carousel.children[pageIndex]
-        const subText = event.target.nextElementSibling
+        const subText = event.target.parentElement.querySelector('span')
 
         Array.from(carousel.children).forEach(li => {
             (li as HTMLLIElement).removeAttribute('data-active')
@@ -204,4 +206,7 @@ const style = itemsPerSlide > 1
             }, 300)
         }
     })
+
+    document.addEventListener('astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Collapsible/Collapsible.astro b/src/components/Collapsible/Collapsible.astro
@@ -45,10 +45,10 @@ const styleVariables = classNames([
 </div>
 
 <script>
-    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+    import { on } from '../../utils/DOMUtils'
 
-    Array.from(collapsibles).forEach(element => {
-        element.addEventListener('click', event => {
+    const addEventListeners = () => {
+        on('[data-id="w-collapsible"]', 'click', (event: Event) => {
             const collapsible = event.currentTarget as HTMLDivElement
             const target = event.target as HTMLDivElement
 
@@ -59,6 +59,9 @@ const styleVariables = classNames([
             if (target.parentElement?.dataset.toggleOff) {
                 collapsible.dataset.toggled = 'false'
             }
-        })
-    })
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>
diff --git a/src/components/Copy/Copy.astro b/src/components/Copy/Copy.astro
@@ -56,19 +56,24 @@ const classes = classNames([
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-copy"]', 'click', (event: Event) => {
-        const copy = event.currentTarget as HTMLButtonElement
-        const copied = copy.nextElementSibling as HTMLSpanElement
-        const badge = copy.parentElement?.parentElement as HTMLElement
+    const addEventListeners = () => {
+        on('[data-id="w-copy"]', 'click', (event: Event) => {
+            const copy = event.currentTarget as HTMLButtonElement
+            const copied = copy.nextElementSibling as HTMLSpanElement
+            const badge = copy.parentElement?.parentElement as HTMLElement
 
-        const text = copy.parentElement?.previousSibling?.textContent?.trim()
+            const text = copy.parentElement?.previousSibling?.textContent?.trim()
 
-        copy.style.opacity = '0'
-        copy.style.pointerEvents = 'none'
+            copy.style.opacity = '0'
+            copy.style.pointerEvents = 'none'
 
-        copied.style.opacity = '1'
-        badge.removeAttribute('data-tooltip')
+            copied.style.opacity = '1'
+            badge.removeAttribute('data-tooltip')
 
-        navigator.clipboard.writeText(text as string)
-    }, true)
+            navigator.clipboard.writeText(text as string)
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>