Skip to content

Commit 090fedf

Browse files
FrontendlandFrontendland
committed
🐛 Fix interactive components not working with Astro's ViewTransition API
1 parent 1603a0d commit 090fedf

32 files changed

+785
-661
lines changed

‎src/blocks/Deployments/Deployments.astro

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,21 @@ import styles from './deployments.module.scss'
2323
</Modal>
2424

2525
<script>
26-
import { closeModal, modal } from 'webcoreui'
26+
import { closeModal, modal, on } from 'webcoreui'
2727

28-
const closeButton = document.querySelectorAll('.close-modal')
28+
const addModal = () => {
29+
const closeButton = document.querySelectorAll('.close-modal')
2930

30-
modal({
31-
trigger: '#connect',
32-
modal: '.modal'
33-
})
31+
modal({
32+
trigger: '#connect',
33+
modal: '.modal'
34+
})
3435

35-
Array.from(closeButton).forEach(button => {
36-
button?.addEventListener('click', () => closeModal('.modal'))
37-
})
36+
Array.from(closeButton).forEach(button => {
37+
button?.addEventListener('click', () => closeModal('.modal'))
38+
})
39+
}
40+
41+
on(document, 'astro:after-swap', addModal)
42+
addModal()
3843
</script>

‎src/blocks/Settings/Settings.astro

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,21 @@ const radioItems = [
3636
</Toast>
3737

3838
<script>
39-
import { toast } from 'webcoreui'
39+
import { on, toast } from 'webcoreui'
4040

41-
const marketing = document.querySelector('.marketing input')
41+
const addToast = () => {
42+
const marketing = document.querySelector('.marketing input')
4243

43-
marketing?.addEventListener('change', (e: any) => {
44-
toast({
45-
element: '.marketing-toast',
46-
content: e.target.checked
47-
? 'Marketing emails enabled'
48-
: 'Marketing emails disabled'
44+
marketing?.addEventListener('change', (e: any) => {
45+
toast({
46+
element: '.marketing-toast',
47+
content: e.target.checked
48+
? 'Marketing emails enabled'
49+
: 'Marketing emails disabled'
50+
})
4951
})
50-
})
52+
}
53+
54+
on(document, 'astro:after-swap', addToast)
55+
addToast()
5156
</script>

‎src/blocks/SignUp/SignUp.astro

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,10 @@ const {
6262
<script>
6363
import { on } from '@utils/DOMUtils'
6464

65-
on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
65+
const addEventListener = () => {
66+
on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
67+
}
68+
69+
on(document, 'astro:after-swap', addEventListener)
70+
addEventListener()
6671
</script>

‎src/components/Accordion/Accordion.astro

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,18 @@ const classes = [
4545
<script>
4646
import { on } from '../../utils/DOMUtils'
4747

48-
on('[data-id="w-accordion"]', 'click', (event: Event) => {
49-
const target = event.target as HTMLDivElement
50-
51-
if (target.dataset.toggle) {
52-
target.dataset.open = target.dataset.open === 'true'
53-
? 'false'
54-
: 'true'
55-
}
56-
}, true)
48+
const addEventListeners = () => {
49+
on('[data-id="w-accordion"]', 'click', (event: Event) => {
50+
const target = event.target as HTMLDivElement
51+
52+
if (target.dataset.toggle) {
53+
target.dataset.open = target.dataset.open === 'true'
54+
? 'false'
55+
: 'true'
56+
}
57+
}, true)
58+
}
59+
60+
on(document, 'astro:after-swap', addEventListeners)
61+
addEventListeners()
5762
</script>

‎src/components/Banner/Banner.astro

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,14 @@ const style = top
4848
<script>
4949
import { on } from '../../utils/DOMUtils'
5050

51-
on('[data-id="w-banner-close"]', 'click', (event: Event) => {
52-
const target = event.currentTarget as HTMLDivElement
51+
const addEventListeners = () => {
52+
on('[data-id="w-banner-close"]', 'click', (event: Event) => {
53+
const target = event.currentTarget as HTMLDivElement
5354

54-
target.parentElement?.remove()
55-
}, true)
55+
target.parentElement?.remove()
56+
}, true)
57+
}
58+
59+
on(document, 'astro:after-swap', addEventListeners)
60+
addEventListeners()
5661
</script>

‎src/components/Carousel/Carousel.astro

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -102,53 +102,55 @@ const style = itemsPerSlide > 1
102102
import { debounce } from '../../utils/debounce'
103103
import { listen } from '../../utils/event'
104104

105-
const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
106-
107-
const scroll = (event: Event) => {
108-
const target = event.target as HTMLDivElement
109-
110-
if (!target.dataset.paginated) {
111-
const scrollLeft = target.scrollLeft
112-
const itemWidth = target.children[0].clientWidth
113-
const page = Math.round(scrollLeft / itemWidth) + 1
114-
const carouselElement = target.children[0]
115-
const paginationElement = target.parentElement
116-
?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
117-
const currentPage = Number(paginationElement.dataset.currentPage)
118-
const diff = Math.abs(currentPage - page)
119-
120-
let triggerButton = currentPage > page
121-
? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
122-
: paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
123-
124-
if (!triggerButton) {
125-
triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
126-
}
105+
const addEventListeners = () => {
106+
const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
107+
108+
const scroll = (event: Event) => {
109+
const target = event.target as HTMLDivElement
110+
111+
if (!target.dataset.paginated) {
112+
const scrollLeft = target.scrollLeft
113+
const itemWidth = target.children[0].clientWidth
114+
const page = Math.round(scrollLeft / itemWidth) + 1
115+
const carouselElement = target.children[0]
116+
const paginationElement = target.parentElement
117+
?.querySelector('[data-id="w-pagination"]') as HTMLUListElement
118+
const currentPage = Number(paginationElement.dataset.currentPage)
119+
const diff = Math.abs(currentPage - page)
120+
121+
let triggerButton = currentPage > page
122+
? paginationElement.querySelector('[data-page="prev"]') as HTMLButtonElement
123+
: paginationElement.querySelector('[data-page="next"]') as HTMLButtonElement
124+
125+
if (!triggerButton) {
126+
triggerButton = paginationElement.querySelector(`[data-page="${page}"]`) as HTMLButtonElement
127+
}
127128

128-
for (let i = 0; i < diff; i++) {
129-
triggerButton.click()
130-
}
129+
for (let i = 0; i < diff; i++) {
130+
triggerButton.click()
131+
}
131132

132-
Array.from(carouselElement.children).forEach(li => {
133-
(li as HTMLLIElement).removeAttribute('data-active')
134-
})
133+
Array.from(carouselElement.children).forEach(li => {
134+
(li as HTMLLIElement).removeAttribute('data-active')
135+
})
135136

136-
const activeElement = carouselElement.children[page - 1] as HTMLLIElement
137+
const activeElement = carouselElement.children[page - 1] as HTMLLIElement
137138

138-
activeElement.dataset.active = 'true'
139+
activeElement.dataset.active = 'true'
140+
}
139141
}
140-
}
141142

142-
carousels.forEach(carousel => {
143-
const carouselElement = carousel as HTMLDivElement
144-
const debounceAmount = carouselElement.dataset.debounce
145-
? Number(carouselElement.dataset.debounce)
146-
: 20
143+
carousels.forEach(carousel => {
144+
const carouselElement = carousel as HTMLDivElement
145+
const debounceAmount = carouselElement.dataset.debounce
146+
? Number(carouselElement.dataset.debounce)
147+
: 20
147148

148-
carousel.addEventListener('scroll', debounce((event: Event) => {
149-
scroll(event)
150-
}, debounceAmount))
151-
})
149+
carousel.addEventListener('scroll', debounce((event: Event) => {
150+
scroll(event)
151+
}, debounceAmount))
152+
})
153+
}
152154

153155
listen('paginate', event => {
154156
const target = event.target
@@ -172,7 +174,7 @@ const style = itemsPerSlide > 1
172174
: indexes[event.page - 1][indexes[event.page - 1].length - 1]
173175

174176
const liElement = carousel.children[pageIndex]
175-
const subText = event.target.nextElementSibling
177+
const subText = event.target.parentElement.querySelector('span')
176178

177179
Array.from(carousel.children).forEach(li => {
178180
(li as HTMLLIElement).removeAttribute('data-active')
@@ -204,4 +206,7 @@ const style = itemsPerSlide > 1
204206
}, 300)
205207
}
206208
})
209+
210+
document.addEventListener('astro:after-swap', addEventListeners)
211+
addEventListeners()
207212
</script>

‎src/components/Collapsible/Collapsible.astro

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ const styleVariables = classNames([
4545
</div>
4646

4747
<script>
48-
const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
48+
import { on } from '../../utils/DOMUtils'
4949

50-
Array.from(collapsibles).forEach(element => {
51-
element.addEventListener('click', event => {
50+
const addEventListeners = () => {
51+
on('[data-id="w-collapsible"]', 'click', (event: Event) => {
5252
const collapsible = event.currentTarget as HTMLDivElement
5353
const target = event.target as HTMLDivElement
5454

@@ -59,6 +59,9 @@ const styleVariables = classNames([
5959
if (target.parentElement?.dataset.toggleOff) {
6060
collapsible.dataset.toggled = 'false'
6161
}
62-
})
63-
})
62+
}, true)
63+
}
64+
65+
on(document, 'astro:after-swap', addEventListeners)
66+
addEventListeners()
6467
</script>

‎src/components/Copy/Copy.astro

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,24 @@ const classes = classNames([
5656
<script>
5757
import { on } from '../../utils/DOMUtils'
5858

59-
on('[data-id="w-copy"]', 'click', (event: Event) => {
60-
const copy = event.currentTarget as HTMLButtonElement
61-
const copied = copy.nextElementSibling as HTMLSpanElement
62-
const badge = copy.parentElement?.parentElement as HTMLElement
59+
const addEventListeners = () => {
60+
on('[data-id="w-copy"]', 'click', (event: Event) => {
61+
const copy = event.currentTarget as HTMLButtonElement
62+
const copied = copy.nextElementSibling as HTMLSpanElement
63+
const badge = copy.parentElement?.parentElement as HTMLElement
6364

64-
const text = copy.parentElement?.previousSibling?.textContent?.trim()
65+
const text = copy.parentElement?.previousSibling?.textContent?.trim()
6566

66-
copy.style.opacity = '0'
67-
copy.style.pointerEvents = 'none'
67+
copy.style.opacity = '0'
68+
copy.style.pointerEvents = 'none'
6869

69-
copied.style.opacity = '1'
70-
badge.removeAttribute('data-tooltip')
70+
copied.style.opacity = '1'
71+
badge.removeAttribute('data-tooltip')
7172

72-
navigator.clipboard.writeText(text as string)
73-
}, true)
73+
navigator.clipboard.writeText(text as string)
74+
}, true)
75+
}
76+
77+
on(document, 'astro:after-swap', addEventListeners)
78+
addEventListeners()
7479
</script>

0 commit comments

Comments
 (0)