diff --git a/web/packages/core/src/ruffle-player.ts b/web/packages/core/src/ruffle-player.ts index a65a67809..210e7c7a7 100644 --- a/web/packages/core/src/ruffle-player.ts +++ b/web/packages/core/src/ruffle-player.ts @@ -59,6 +59,13 @@ interface ContextMenuItem { * @param event The mouse event that triggered the click */ onClick: (event: MouseEvent) => void; + + /** + * Whether to add a separator right after the item + * + * @default true + */ + separator?: boolean; } /** @@ -604,17 +611,12 @@ export class RufflePlayer extends HTMLElement { }); } } - items.push({ - text: "SEPARATOR", - onClick() { - // do nothing. - }, - }); items.push({ text: `About Ruffle (%VERSION_NAME%)`, onClick() { window.open(RUFFLE_ORIGIN, "_blank"); }, + separator: false, }); return items; } @@ -634,19 +636,19 @@ export class RufflePlayer extends HTMLElement { } // Populate context menu items. - for (const { text, onClick } of this.contextMenuItems()) { - if (text == "SEPARATOR") { - const element = document.createElement("li"); - element.className = "menu_separator"; + for (const { text, onClick, separator } of this.contextMenuItems()) { + const menuItem = document.createElement("li"); + menuItem.className = "menu_item active"; + menuItem.textContent = text; + menuItem.addEventListener("click", onClick); + this.contextMenuElement.appendChild(menuItem); + + if (separator !== false) { + const menuSeparator = document.createElement("li"); + menuSeparator.className = "menu_separator"; const hr = document.createElement("hr"); - element.appendChild(hr); - this.contextMenuElement.appendChild(element); - } else { - const element = document.createElement("li"); - element.className = "menu_item active"; - element.textContent = text; - element.addEventListener("click", onClick); - this.contextMenuElement.appendChild(element); + menuSeparator.appendChild(hr); + this.contextMenuElement.appendChild(menuSeparator); } } @@ -1017,14 +1019,14 @@ export class RufflePlayer extends HTMLElement {

Flash Player has been removed from browsers in 2021.

This content is not yet supported by the Ruffle emulator and will likely not run as intended.

- More info + More info
`; this.container.prepend(div); const button = div.querySelector("#run-anyway-btn"); button.onclick = () => { - div.remove(); + div.parentNode!.removeChild(div); }; } @@ -1042,7 +1044,7 @@ export class RufflePlayer extends HTMLElement { (( this.container.querySelector("#continue-btn") )).onclick = () => { - div.remove(); + div.parentNode!.removeChild(div); }; } diff --git a/web/packages/core/src/shadow-template.ts b/web/packages/core/src/shadow-template.ts index 51a37d7b2..af38e1c5a 100644 --- a/web/packages/core/src/shadow-template.ts +++ b/web/packages/core/src/shadow-template.ts @@ -171,6 +171,7 @@ ruffleShadowTemplate.innerHTML = ` } #context-menu { + display: none; color: black; background-color: #FAFAFA; border: 1px solid gray; @@ -187,7 +188,6 @@ ruffleShadowTemplate.innerHTML = ` padding: 5px 10px; } - #context-menu .active { cursor: pointer; color: black;