ethanaobrien/EmulatorJS
1
0
Fork 0
mirror of https://github.com/EmulatorJS/EmulatorJS.git synced 2024-09-20 02:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

settings menu open/close

Browse source
This commit is contained in:
Ethan O'Brien 2023-06-27 16:36:57 -05:00
parent 5b2bd40087
commit af42fd3f52
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/css/main.css
View file

@ -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;

27
src/emulator.js
View file

@ -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", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg>', () => {
console.log("settings");
}, this.settingParent);
let menuOpen = false;
const settingButton = addButton("Settings", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg>', () => {
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";
}
}