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