Fix mismatch with ToC

[IshavSohal]

Related Item(s)

ramp4-pcar4/storylines-editor#437

Changes

• Set top position for the scroll behavior of slides such that the slides corresponding ToC icon is highlighted (rather than the subsequent icon)

Testing

Steps:

1. Open a product with a vertical ToC
2. Scroll through the slides, and ensure that the correct ToC icon is highlighted
3. Click on the ToC icons and ensure that they are highlighted (rather than the subsequent icon)
4. Decrease the screen width and repeat steps 2-3

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/toc-mismatch/#/en/00000000-0000-0000-0000-000000000000

[RyanCoulsonCA]

Reviewable status: 0 of 1 files reviewed, 1 unresolved discussion (waiting on @IshavSohal)

---

src/router/index.ts line 28 at r1 (raw file):

                el: decodeURIComponent(to.hash),
                behavior: 'smooth',
                top: window.innerHeight / 6

This seems to fix the issue, but I'm wondering if there's maybe a way to fix this problem by adjusting the activeChapterIndex logic instead? There are some fancy calculations being done here, which is what we use to determine which chapter is currently active (and therefore which ToC entry is highlighted). Maybe playing around with this logic may also fix the problem?

EDIT: The scrollama component in the same file also supports a threshold property that may be useful to play around with as well.

The previous top value calculation was just added about a month ago to fix an issue where clicking on a ToC entry wouldn't take the user to the top of a slide, which this new calculation re-introduces.

[IshavSohal]

Reviewable status: 0 of 2 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

---

src/router/index.ts line 28 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

This seems to fix the issue, but I'm wondering if there's maybe a way to fix this problem by adjusting the activeChapterIndex logic instead? There are some fancy calculations being done here, which is what we use to determine which chapter is currently active (and therefore which ToC entry is highlighted). Maybe playing around with this logic may also fix the problem?

The previous top value calculation was just added about a month ago to fix an issue where clicking on a ToC entry wouldn't take the user to the top of a slide, which this new calculation re-introduces.

Donethanks. I decided to set the offset property (which has default value of 0.5) to 0.1. This causes a slide change to be detected when the top border of a slide crosses the 10% mark of the screen.

[yileifeng]

Testing against both the horizontal ToC (https://ramp4-pcar4.github.io/story-ramp/toc-mismatch/#/en/00000000-0000-0000-0000-000000000000) and vertical ToC (https://ramp4-pcar4.github.io/story-ramp/toc-mismatch/#/fr/00000000-0000-0000-0000-000000000000), clicking on a ToC item scrolls to the correct section but highlights the wrong item.

Reviewable status: 0 of 2 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[IshavSohal]

Donethanks, set the offset to 0.2 now, it seems to be working on my end but let me know if there's still issues

Reviewable status: 0 of 2 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[yileifeng]

Reviewed 1 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

[RyanCoulsonCA]

Reviewed 1 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @IshavSohal)

[RyanCoulsonCA]

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @IshavSohal)