web: Re-enable context menu on mobile, with option to disable (#5000)

* Re-enable context menu on mobile, with option to disable

* Review refactors

Co-authored-by: Adrian Wielgosik <adrian.wielgosik@gmail.com>
This commit is contained in:
Daniel Jacobs 2021-08-19 14:28:40 -04:00 committed by GitHub
parent 58c907e985
commit 985a97d599
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions

View File

@ -122,6 +122,8 @@ export class RufflePlayer extends HTMLElement {
// so avoid shadowing it.
private contextMenuElement: HTMLElement;
private hasContextMenu = false;
// Allows the user to permanently disable the context menu.
private contextMenuForceDisabled = false;
// Whether this device is a touch device.
// Set to true when a touch event is encountered.
@ -656,7 +658,7 @@ export class RufflePlayer extends HTMLElement {
}
private pointerDown(event: PointerEvent): void {
// Disable context menu when touch support is being used
// Give option to disable context menu when touch support is being used
// to avoid a long press triggering the context menu. (#1972)
if (event.pointerType === "touch" || event.pointerType === "pen") {
this.isTouch = true;
@ -706,13 +708,20 @@ export class RufflePlayer extends HTMLElement {
window.open(RUFFLE_ORIGIN, "_blank");
},
});
if (this.isTouch) {
items.push(null);
items.push({
text: "Hide this menu",
onClick: () => (this.contextMenuForceDisabled = true),
});
}
return items;
}
private showContextMenu(e: MouseEvent): void {
e.preventDefault();
if (!this.hasContextMenu || this.isTouch) {
if (!this.hasContextMenu || this.contextMenuForceDisabled) {
return;
}