Add Wikipedia preview function

[Jaifroid]

Fixes #278.

This is currently specific to Wikimedia ZIMs (i.e. those scraped by mwOffliner) because the HTML has to be parsed based on certain tags provided by mwOffliner.

@kelson42 has suggested that a more generic way could be to snapshot a rendered (but hidden) view of the article and display a png. This would be more generic, although we need to think whether users would expect or even appreciate a generic preview. It's certainly the case that Wikipedia users expect such a feature (and this is the easiest case to cater for).

This feature should be ported upstream to Kiwix JS, but currently the click "infrastructure" is missing there in ServiceWorker mode (or rather, it is done differently), so the code would need to be adapted. See https://github.com/kiwix/kiwix-js/issues/719.

[Jaifroid]

Some to-do items:

• [x] Fix dark theme support (background is currently transparent with dark theme which produces illegible mix of foreground and background
• [x] Fix calculation of base URI: i.e., get absolute ZIM url for images (otherwise they will not load automatically in SW mode if path of current document is not same as path of invoked document fragment)
• [x] Consider supporting Restricted mode, i.e. manually extracting the image from the ZIM
• [x] Add arrow pointer in direction of text (ideally situated at site of mouse pointer)
• [x] Add some options to the box: principally, open in new tab or window
• [x] Make box show with long press (supporting touchscreen)
• [x] Do not display a completely empty balloon (e.g. links on front page of MDWiki ZIMs)
• [x] Add user option to disable
• [x] Rework contextmenu suppression
• [x] Show and position empty popover with "Loading..." message before populating with content (due to slow loading on Android)
• [x] Ensure popover is never wider than screen width
• [x] Arrow should be fixed to div - currently it scrolls if user scrolls screen!

[Jaifroid]

Feature is tested and working on Chromium and Firefox for desktop: mouseover is best method, but long-press also works for touchscreen users, and keyboard (tabbing into links) also evokes the popover. Also tested on UWP app, all working fine with mouseover and touch.

On Android, an installed PWA can use the feature with long-press, and I've included different sizes for portrait and landscape orientation when there is a narrow screen. However, in Firefox for Android long-press seems to be hard-wired to the context menu and is not overridden. However, Firefox for Android cannot load large ZIM archives due to https://bugzilla.mozilla.org/show_bug.cgi?id=1807360, so I doubt anyone uses the PWA in that browser on Android.

I have yet to test Safari / iOS in simulator.

[Jaifroid]

OK, iOS at least on an iPad has its own "hard-wired" preview feature which my code doesn't interfere with, so I think that's acceptable. See screenshot.

EDIT: Same on iPhone.

[Jaifroid]

Feature is working great on Safari desktop on macOS. Both mouseover and keyboard (macOS doesn't have touch).

[Jaifroid]

At least on Android, the icons top right are not consistently attached.

[Jaifroid]

Now working in Firefox for Android (with long-press), but close icons are not registering, despite some tweaks. Needs debugging.

[Jaifroid]

Finally icons are working on Firefox!

[Jaifroid]

All tested and working in Chrome (>=49), Firefox (>=68 - earlier versions work but don't support WebP), UWP (Edge Legacy), Safari on macOS. Ready to merge.