readium / playground

🛝 Play with the capabilities of Readium Web & Readium CSS
https://playground.readium.org
BSD 3-Clause "New" or "Revised" License
2 stars 0 forks source link

Pagination Controls Jump to Chapter Beginnings #21

Open bluefirepatrick opened 1 day ago

bluefirepatrick commented 1 day ago

Environments Tested: MacOS - Safari and Chrome

Steps to Reproduce: Build/run the scroll-paginated branch Choose Moby Dick Use Right Arrow/Page Forward button to go to Chapter 3 Switch to Scrollable via the Actions Menu Scroll to end of page and Choose Next Switch back to Paginated via the Actions Menu Choose Left Arrow/Go Backwards

Expected Result: Left arrow would take you to the last page of Chapter 3.

Actual Result: Left arrow takes you to the start of Chapter 3 and subsequent paging is stuck in 'next resource' mode.

Notes: At one point I saw a runtime error (included) but I do not have steps to reproduce that error yet.

Screenshot 2024-11-06 at 9 32 09 AM
JayPanoz commented 13 hours ago

Thanks for logging these issues as it will help keep track of side effects and serve as a reminder to double-check if they are solved or need more work after migrating.

So there are two side-effects here, from these missing pieces in TS-toolkit:

  1. Preferences API;
  2. Scroll event.

At first sight it should explain the entire issue, probably also the error message, although I’ll take a look as I already fixed others similar to this one.

To clarify what’s happening:

  1. progression is not tracked nor saved in scroll at the moment so it will always be 0 as it’s saved on positionChanged when scroll is applied using internal methods, which explains it goes back at the start of the resource when changing the layout option;
  2. at the moment settings are applied after the frame has loaded or when changing the setting, but they don’t trigger a recalc for the scrollWidth. There are already issues with auto-columns as navigator may occasionally skip the last “page” of a chapter when it has a single column. That should hopefully be fixed with a Preference API since it should take care of that. Obviously this issue is new with ReadiumCSS 2 since it removes the responsive layout that was implemented in CSS, and not by applying custom properties dynamically.

@HadrienGardeur What is your opinion on scroll event? Do you want me to temporarily implement this in Playground or add it directly into ts-toolkit, or wait as Preferences API may have an impact? If it’s added into ts-toolkit I’m not sure it will not create conflicts in the DM Reader, which is why I’m not sure what’s the best option is.