Add scroll to Event ID for links to Events #2541
Conversation
…change before scrolling if event id is not on the current page
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Alex-Tideman
requested review from
stevekinney,
rossedfort and
a team
as code owners
| const scrollToHashEvent = async () => { | ||
| store.jumpToHashPage(hash); | ||
| await tick(); | ||
| let id = hash.slice(1); | ||
| const row = document?.querySelector(`[data-eventid="${id}"]`); | ||
| if (row) { | ||
| setTimeout(() => { | ||
| row?.scrollIntoView({ behavior: 'smooth' }); | ||
| }, 500); | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
I'm not sure how I feel about this logic being in a holocene component and enabled by default. Was there a reason you didn't add this to the parent wherever it was needed?
There was a problem hiding this comment.
Yeah I was on the fence about that too. I could expose jumpToHash to the slot but then you would need to run the scrollToHashEvent function on every row, which doesn't work if the row isn't rendered (i.e. on the same page you are looking at).
I do think we'll want this eventually for other paginated tables but agreed that this isn't ideal in that it's for events only. I added a hashField prop so that it only runs if that's provided and then you can pass whatever data-{hashField} attribute you want to scroll
Description & motivation 💭
Allow users to navigate to the history page with a specific event
.../history#138- and scroll to it. It will not open the row by default, just scroll to it.Also add full event group on specific event page /history/event/138.
Screenshots (if applicable) 📸
ScrollToId.mov
Design Considerations 🎨
Testing 🧪
How was this tested 👻
Steps for others to test: 🚶🏽♂️🚶🏽♀️
Checklists
Draft Checklist
Merge Checklist
Issue(s) closed
Docs
Any docs updates needed?