From af42fd3f524dda7f5cd0cc33865e63b6cb35b67a Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <77750390+ethanaobrien@users.noreply.github.com>
Date: Tue, 27 Jun 2023 16:36:57 -0500
Subject: [PATCH] settings menu open/close
---
src/css/main.css | 6 ++++++
src/emulator.js | 27 ++++++++++++++++-----------
2 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/src/css/main.css b/src/css/main.css
index 65d0e8d..54aeb34 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -166,6 +166,12 @@
transform: translateY(100%);
}
+.ejs_svg_rotate {
+ transform: rotate(90deg);
+}
+.ejs_menu_button svg {
+ transition: transform .3s ease;
+}
.ejs_menu_button {
margin-right: 2px;
touch-action: manipulation;
diff --git a/src/emulator.js b/src/emulator.js
index 76990bc..89588d7 100644
--- a/src/emulator.js
+++ b/src/emulator.js
@@ -623,7 +623,7 @@ class EmulatorJS {
this.elements.parent.appendChild(this.elements.menu);
//Now add buttons
- const addButton = (title, image, callback, element) => {
+ const addButton = (title, image, callback, element, both) => {
const button = this.createElement("button");
button.type = "button";
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -645,7 +645,7 @@ class EmulatorJS {
if (callback instanceof Function) {
this.addEventListener(button, 'click', callback);
}
- return button;
+ return both ? [button, svg, text] : button;
}
//todo. Center text on not restart button
@@ -698,9 +698,13 @@ class EmulatorJS {
this.elements.menu.appendChild(spacer);
this.settingParent = this.createElement("div");
- addButton("Settings", '', () => {
- console.log("settings");
- }, this.settingParent);
+ let menuOpen = false;
+ const settingButton = addButton("Settings", '', () => {
+ menuOpen = !menuOpen;
+ settingButton[1].classList.toggle("ejs_svg_rotate", menuOpen);
+ settingButton[2].style.display = menuOpen ? "none" : "";
+ this.settingsMenu.style.display = menuOpen ? "" : "none";
+ }, this.settingParent, true);
this.elements.menu.appendChild(this.settingParent);
@@ -1431,8 +1435,9 @@ class EmulatorJS {
this.Module.setCanvasSize(width, height);
}
setupSettingsMenu() {
- const main = this.createElement("div");
- main.classList.add("ejs_settings_parent");
+ this.settingsMenu = this.createElement("div");
+ this.settingsMenu.style.display = "none";
+ this.settingsMenu.classList.add("ejs_settings_parent");
const home = this.createElement("div");
home.classList.add("ejs_setting_home");
@@ -1453,13 +1458,13 @@ class EmulatorJS {
}
addToMenu("Test", [1, 2, 3]);
- addToMenu("Test2");
- addToMenu("Testertthgfd");
+ addToMenu("Test2", [4, 5, 6]);
+ addToMenu("Testertthgfd", [7, 8, 9]);
- main.appendChild(home);
+ this.settingsMenu.appendChild(home);
- this.settingParent.appendChild(main);
+ this.settingParent.appendChild(this.settingsMenu);
this.settingParent.style.position = "relative";
}
}