Redo settings menu scrolling

This commit is contained in:
Ethan O'Brien 2025-06-03 23:10:53 -05:00
parent f8b09feb9f
commit c22e5ff14c
No known key found for this signature in database
GPG Key ID: 7A6E7CCD3BD93AB1
2 changed files with 30 additions and 13 deletions

View File

@ -952,6 +952,15 @@
.ejs_setting_menu {
padding: 7px;
overflow-x: hidden;
overflow-y: auto;
}
.ejs_parent_option_div {
display: flex;
flex-direction: column;
max-height: 100%;
overflow: hidden;
}
.ejs_back_button {

View File

@ -4305,8 +4305,8 @@ class EmulatorJS {
const menu = this.createElement("div");
menus.push(menu);
menu.style.overflow = "auto";
menu.setAttribute("hidden", "");
menu.classList.add("ejs_parent_option_div");
const button = this.createElement("button");
const goToHome = () => {
const homeSize = this.getElementSize(home);
@ -4445,7 +4445,6 @@ class EmulatorJS {
const createSettingParent = (child, title, parentElement) => {
const rv = this.createElement("div");
rv.style.overflow = "auto";
rv.classList.add("ejs_setting_menu");
if (child) {
@ -4458,10 +4457,11 @@ class EmulatorJS {
parentElement.appendChild(menuOption);
const menu = this.createElement("div");
const menuChild = this.createElement("div");
menus.push(menu);
parentMenuCt++;
menu.style.overflow = "auto";
menu.setAttribute("hidden", "");
menuChild.classList.add("ejs_parent_option_div");
const button = this.createElement("button");
const goToHome = () => {
const homeSize = this.getElementSize(parentElement);
@ -4475,6 +4475,7 @@ class EmulatorJS {
nested.style.width = (targetSize.width + 20) + "px";
nested.style.height = targetSize.height + "px";
menu.removeAttribute("hidden");
rv.scrollTo(0, 0);
parentElement.setAttribute("hidden", "");
})
const observer = new MutationObserver((list) => {
@ -4499,7 +4500,7 @@ class EmulatorJS {
button.type = "button";
button.classList.add("ejs_back_button");
menu.appendChild(button);
menuChild.appendChild(button);
const pageTitle = this.createElement("span");
pageTitle.innerText = title;
pageTitle.classList.add("ejs_menu_text_a");
@ -4509,7 +4510,8 @@ class EmulatorJS {
// optionsMenu.classList.add("ejs_setting_menu");
// menu.appendChild(optionsMenu);
menu.appendChild(rv);
menuChild.appendChild(rv);
menu.appendChild(menuChild);
nested.appendChild(menu);
observer.observe(nested, {
childList: true,
@ -4572,7 +4574,7 @@ class EmulatorJS {
return;
}
parentElement = parentElement || home;
const transitionElement = useParentParent ? parentElement.parentElement : parentElement;
const transitionElement = useParentParent ? parentElement.parentElement.parentElement : parentElement.parentElement;
const menuOption = this.createElement("div");
menuOption.classList.add("ejs_settings_main_bar");
const span = this.createElement("span");
@ -4588,14 +4590,20 @@ class EmulatorJS {
const menu = this.createElement("div");
menus.push(menu);
menu.style.overflow = "auto";
const menuChild = this.createElement("div");
menu.setAttribute("hidden", "");
menuChild.classList.add("ejs_parent_option_div");
const optionsMenu = this.createElement("div");
optionsMenu.classList.add("ejs_setting_menu");
const button = this.createElement("button");
const goToHome = () => {
parentElement.parentElement.parentElement.removeAttribute("hidden");
menu.setAttribute("hidden", "");
const homeSize = this.getElementSize(transitionElement);
nested.style.width = (homeSize.width + 20) + "px";
nested.style.height = homeSize.height + "px";
menu.setAttribute("hidden", "");
transitionElement.removeAttribute("hidden");
}
this.addEventListener(menuOption, "click", (e) => {
@ -4603,21 +4611,20 @@ class EmulatorJS {
nested.style.width = (targetSize.width + 20) + "px";
nested.style.height = targetSize.height + "px";
menu.removeAttribute("hidden");
optionsMenu.scrollTo(0, 0);
parentElement.parentElement.parentElement.setAttribute("hidden", "");
transitionElement.setAttribute("hidden", "");
})
this.addEventListener(button, "click", goToHome);
button.type = "button";
button.classList.add("ejs_back_button");
menu.appendChild(button);
menuChild.appendChild(button);
const pageTitle = this.createElement("span");
pageTitle.innerText = title;
pageTitle.classList.add("ejs_menu_text_a");
button.appendChild(pageTitle);
const optionsMenu = this.createElement("div");
optionsMenu.classList.add("ejs_setting_menu");
let buttons = [];
let opts = options;
if (Array.isArray(options)) {
@ -4669,8 +4676,9 @@ class EmulatorJS {
optionsMenu.appendChild(optionButton);
}
menu.appendChild(optionsMenu);
menuChild.appendChild(optionsMenu);
menu.appendChild(menuChild);
nested.appendChild(menu);
}
const cores = this.getCores();