Backport popover code from Kiwix PWA

[Jaifroid]

Fixes #719. This backports the new feature from the PWA.

So far, I have ported the mouseover and the focus events, together with the popover code. Focus event provides keyboard support (tabbing into a link).

To do:

• Add touch support (long press)
• Add pointerdown fallback for browsers that don't support touchstart (e.g. Safari on macOS, and Edge legacy)
• Fix hover over popover in Safari for macOS
• Disable the contextmenu event if popovers are enabled
• Enable for Safe mode (without image support, as in the PWA)
• Add the option to disable popover preview in the UI, with translations
• Fix support for dark modes
• Move as many inline styles as possible to stylesheet
• Suppress popover loading if user has clicked the link
• Add e2e test for presence of popover on tab into link (Ray Charles ZIM)
• Make the breakout icon open a new window
• Fix clicking on a link inside the popover
• Add popover support to new windows Open a new issue to add popover support to new tabs/windows: Extend popover support to new tabs or windows #1253
• Clean up code hangovers from the PWA that are not needed here
• Final testing

[audiodude]

[Jaifroid]

Nice one @audiodude! For now, I'm still working through things and fixing stuff, but I'll be very pleased to request a review when it's ready! Still some rough stuff...

[Jaifroid]

@audiodude All done, should be ready now for you to move on to uiUtil.js when/if you have time. I've left a few comments open above for you to review, and I think everything else you suggested is resolved. Thanks once again! It's been a while since I've had the benefits of review (since the previous lead developer left the project). 😊

[audiodude]

Just one comment, about file structure/code location. I don't want to review more until you resolve because it would change where my comments go and I would get the stupid github "outdated" nonsense.

[Jaifroid]

New test deployment as v4.0.9 here:

• (browsers with ES module support) https://kiwix.github.io/kiwix-js/www/index.html
• (bundled but not minified) https://kiwix.github.io/kiwix-js/dist/www/index.html

Ensure it has updated to v4.0.9 (message in Configuration should appear after 15s) and restart or reset if necessary. In Firefox a Reset (Expert Settings) is often needed due to few-hours limit on Service Worker checking.

[audiodude]

Looks good in general. I can see what you mean about the pain of having to deal with Promise and callbacks in the same code base, ick. I've made lots of suggestions about refactoring and extracting local helper functions, I think it will really help readability especially in the aforementioned context.

[Jaifroid]

@audiodude Many thanks for helpful comments once again. It's getting towards Friday evening here, so I'll try to resolve everything this weekend. Have a great weekend when you get there! 😊🍾

[Jaifroid]

So in the next push to the PR, I'm refactoring the code to address the identified issues. Some explanatory comments below. I'll close conversations before pushing, or else it gets hard to close them even using the GitHub UI. Many thanks, I think the code is more accessible now, and unneeded (if harmless) Promise resolving should have been fixed.

[Jaifroid]

New test deployment as v4.0.91 here:

• (browsers with ES module support) https://kiwix.github.io/kiwix-js/www/index.html
• (bundled but not minified) https://kiwix.github.io/kiwix-js/dist/www/index.html

Ensure it has updated to v4.0.91 (message in Configuration should appear after 15s) and restart or reset if necessary. In Firefox a Reset (Expert Settings) is often needed due to few-hours limit on Service Worker checking.

[Jaifroid]

Screenshots in light and dark mode:

[Jaifroid]

@audiodude Are you happy with the resolved issues? OK to merge after final testing?

NB future PRs will certainly not be as massive as this! This was the outcome of work at the Hackathon, hence a major feature. It's rare to do major features! At some point there will be a PR (see #1253) to add these popovers to new tabs / windows controlled by the app's Service Worker, but not for this PR which is feature-complete as far as I can manage for now. Adding to new tabs or windows needs careful thought, as we have to keep track of opened windows, which we currently don't do explicitly (just let the SW do that job, but it knows nothing about the DOM).

[audiodude]

Sorry for the delay. LGTM.

[Jaifroid]

Sorry for the delay. LGTM.

Many thanks for your help @audiodude -- you really helped improve the code! 🙏

[Jaifroid]

Last manual tests:

• Works fine in Firefox 65 (tested on Big Sur). Below Firefox 65, WebP images are not supported by Firefox, so the images will not show. I think it would complicate the code tremendously to try to run the WebP Hero polyfill on popover images for such barely used and obsolete browsers. If user wants to see image, they can open the page and the polyfill will then be run. To be clear, there are only a tiny number of Firefox versions affected: those that don't support WebP and DO support Service Workers, i.e. Firefox 56-64 (our minimum supported Firefox version for ServiceWorker mode is Firefox 56, though in practice SW mode only works reliably on all platforms on non-ESR versions of Firefox 60+).
• Works fine in Safari 14 on macOS
• Works fine in Safari 14 on iPad
• Works fine on Edge 18 on W10
• Works fine (Safe Mode only) in Edge 16 on W10,

Good to merge.