Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion website/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,10 @@ function bindAnchorSelection() {

function handleAnchorSelection(event) {
const { anchorId } = event.detail
getAnchorModalModule().then(({ showAnchorDetails }) => showAnchorDetails(anchorId))
// Navigate to the anchor route instead of opening the modal directly: the
// URL then reflects the open anchor (deep-linkable, Back closes it), and the
// router records it as a pageview so we can see which anchors are opened.
navigate(`/anchor/${anchorId}`)
}

function initCardGridVisualization() {
Expand Down
14 changes: 14 additions & 0 deletions website/src/utils/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,16 @@ function trackPageview() {
}
}

// Close the anchor modal if it is open. Called when a non-anchor route is
// resolved so the modal doesn't linger over the page after Back/forward or
// in-app navigation. On a non-anchor route closeModal() does not touch the URL.
function closeOpenAnchorModal() {
const modal = typeof document !== 'undefined' ? document.getElementById('anchor-modal') : null
if (modal && !modal.classList.contains('hidden')) {
import('../components/anchor-modal.js').then(({ closeModal }) => closeModal())
}
}

function handleRoute() {
let path = getCurrentRoute()

Expand Down Expand Up @@ -202,6 +212,10 @@ function handleRoute() {
return
}

// Leaving an anchor route: close any open anchor modal so Back/forward and
// in-app navigation don't leave it stranded as an overlay over the page.
closeOpenAnchorModal()

const handler = routes.get(path)

if (typeof handler === 'function') {
Expand Down
Loading