web: Add fullscreen context menu item
TODO: Retain focus on fullscreen enter/exit.
This commit is contained in:
parent
3cc9ad73a1
commit
b987db010b
|
@ -242,29 +242,62 @@ exports.RufflePlayer = class RufflePlayer extends HTMLElement {
|
|||
}
|
||||
|
||||
open_right_click_menu(e) {
|
||||
const rect = this.getBoundingClientRect();
|
||||
e.preventDefault();
|
||||
|
||||
const rect = this.getBoundingClientRect();
|
||||
this.right_click_menu.style.display = "block";
|
||||
this.right_click_menu.style.left = Math.ceil(e.clientX - rect.x) + "px";
|
||||
this.right_click_menu.style.top = Math.ceil(e.clientY - rect.y) + "px";
|
||||
e.preventDefault();
|
||||
while (this.right_click_menu.firstChild) {
|
||||
this.right_click_menu.removeChild(this.right_click_menu.lastChild);
|
||||
}
|
||||
|
||||
this.right_click_menu.innerHTML = "";
|
||||
|
||||
// TODO: Loop through each item and create an appropriate element with appropriate callback here
|
||||
|
||||
const element = document.createElement("li");
|
||||
element.className = "menu_item active";
|
||||
const version =
|
||||
const items = [];
|
||||
if (document.fullscreenEnabled) {
|
||||
if (document.fullscreenElement) {
|
||||
items.push({
|
||||
text: "Exit fullscreen",
|
||||
onClick: () => {
|
||||
document.exitFullscreen();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
text: "Enter fullscreen",
|
||||
onClick: () => {
|
||||
this.requestFullscreen();
|
||||
this.focus();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
items.push({
|
||||
text: `Ruffle ${
|
||||
__CHANNEL__ === "nightly"
|
||||
? `nightly ${__COMMIT_DATE__}`
|
||||
: window.RufflePlayer.version;
|
||||
element.innerText = `Ruffle ${version}`;
|
||||
element.addEventListener("click", () => {
|
||||
: window.RufflePlayer.version
|
||||
}`,
|
||||
onClick() {
|
||||
window.open("https://ruffle.rs", "_blank");
|
||||
},
|
||||
});
|
||||
|
||||
for (const [i, { text, onClick }] of items.entries()) {
|
||||
const element = document.createElement("li");
|
||||
element.className = "menu_item active";
|
||||
if (i === 0) {
|
||||
element.style.borderTopRightRadius = "5px";
|
||||
element.style.borderTopLeftRadius = "5px";
|
||||
}
|
||||
if (i === items.length - 1) {
|
||||
element.style.borderBottomRightRadius = "5px";
|
||||
element.style.borderBottomLeftRadius = "5px";
|
||||
}
|
||||
element.textContent = text;
|
||||
element.addEventListener("click", onClick);
|
||||
this.right_click_menu.appendChild(element);
|
||||
}
|
||||
}
|
||||
|
||||
hide_right_click_menu() {
|
||||
this.right_click_menu.style.display = "none";
|
||||
|
|
Loading…
Reference in New Issue