kiwix-js icon indicating copy to clipboard operation
kiwix-js copied to clipboard

Use a custom context menu for extra features

Open Jaifroid opened this issue 5 years ago • 1 comments

While thinking about how to implement #173 without adding an extra user button to the interface, I thought that maybe a custom context menu on right-click or long-press could be a solution. It could also work for #350 and #166. We would need to make users aware of the option, perhaps by providing the ability to turn each extra feature on or off in Config.

Regarding the coding of this, it looks fairly simple. The nicest version I could find (on an admittedly quick search) was: https://stackoverflow.com/a/35730445/9727685 and the accompanying JS Fiddle: http://jsfiddle.net/sstanisic/ny01yuLa/3/ . In the fiddle, right-click or long-press anywhere in the bottom right document. Also note that the provided JS in that fiddle contains workarounds for <=IE9 (the two "attachEvent" code sections), so it is even less code than appears.

The other advantage is that the right-click is not attached to specific DOM elements, but to the entire document: document.addEventListener('contextmenu', function(e) ..., so it would be suitable for SW mode as well as jQuery mode, at least on the face of it. We would probably want to attach it to the contentDocument of the iframe.

@mossroy, could this be a good solution for displaying all images instead of a UI button, as per #173?

Jaifroid avatar Jun 17 '19 12:06 Jaifroid

I'm not sure. This kind of feature might be a good solution to provide some additional features without wasting screen space. The disadvantage is that the context menu looks hard to discover. I'm afraid most users would not see it. We would really need a UX specialist to help us on that topic.

Additionally, I don't think we should attach a context menu to the iframe document, as it might break some features of the ZIM file itself, like the right click on a link or image (to download it, copy its address, get some info on it etc. It's the case in the jsfiddle you mentioned), or some user interaction on PheT.

Based on the UI of kiwix-js-windows (which is already improved compared to the current one, and might be backported), we might add a "sandwich menu" (that could be opened with a single click or simple press) that would propose additional and non-essential features (random article, print, switch images on/off, text-to-speech etc). It could be put instead of the current print and random buttons A sandwich menu is a very well-known icon to see additional parameters or features, and looks much more ergonomic to me. It's done in a similar way in the Android Kiwix client. Implementations like the one of bootstrap can also adapt to the screen size : the menu items can be displayed in the top bar if there is enough space (with a large screen), and put behind the sandwich icon (with a small screen). It's how the 3 sections are handled on kiwix-js (you can try by adjusting the screen size on https://kiwix.github.io/kiwix-js).

In any case, it should be investigated in a separate branch of #173.

mossroy avatar Jun 22 '19 08:06 mossroy

I think this issue is unlikely to be implemented, and is probably undesirable.

Jaifroid avatar Nov 06 '22 13:11 Jaifroid