mirror of
https://github.com/EmulatorJS/EmulatorJS.git
synced 2024-09-20 02:46:23 +00:00
Settings menu transitions!
This commit is contained in:
parent
395b008922
commit
6e1e42618f
3 changed files with 81 additions and 13 deletions
|
@ -12,6 +12,20 @@ class EJS_GameManager {
|
||||||
toggleMainLoop: this.Module.cwrap('toggleMainLoop', 'null', ['number']),
|
toggleMainLoop: this.Module.cwrap('toggleMainLoop', 'null', ['number']),
|
||||||
getCoreOptions: this.Module.cwrap('get_core_options', 'string', [])
|
getCoreOptions: this.Module.cwrap('get_core_options', 'string', [])
|
||||||
}
|
}
|
||||||
|
this.mkdir("/home");
|
||||||
|
this.mkdir("/home/web_user");
|
||||||
|
this.mkdir("/home/web_user/retroarch");
|
||||||
|
this.mkdir("/home/web_user/retroarch/userdata");
|
||||||
|
|
||||||
|
this.FS.writeFile("/home/web_user/retroarch/userdata/retroarch.cfg", this.getRetroArchCfg());
|
||||||
|
}
|
||||||
|
mkdir(path) {
|
||||||
|
try {
|
||||||
|
this.FS.mkdir(path);
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
getRetroArchCfg() {
|
||||||
|
return "\naudio_latency: 256\n";
|
||||||
}
|
}
|
||||||
restart() {
|
restart() {
|
||||||
this.functions.restart();
|
this.functions.restart();
|
||||||
|
|
|
@ -475,7 +475,19 @@
|
||||||
border-top-color:#fff
|
border-top-color:#fff
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes ejs_settings_parent_animation{
|
||||||
|
0%{
|
||||||
|
opacity:0.5;
|
||||||
|
transform:translateY(10px)
|
||||||
|
}
|
||||||
|
to{
|
||||||
|
opacity:1;
|
||||||
|
transform:translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ejs_settings_parent {
|
.ejs_settings_parent {
|
||||||
|
animation: ejs_settings_parent_animation .2s ease;
|
||||||
background: rgba(16,16,16,0.9);
|
background: rgba(16,16,16,0.9);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
|
@ -499,7 +511,7 @@
|
||||||
top: 100%;
|
top: 100%;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
.ejs_settings_parent>div {
|
.ejs_settings_transition {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: height .35s cubic-bezier(0.4,0,0.2,1),width .35s cubic-bezier(0.4,0,0.2,1);
|
transition: height .35s cubic-bezier(0.4,0,0.2,1),width .35s cubic-bezier(0.4,0,0.2,1);
|
||||||
}
|
}
|
||||||
|
@ -635,11 +647,6 @@
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
.ejs_option_row::after {
|
.ejs_option_row::after {
|
||||||
/*
|
|
||||||
once selected
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-50%) scale(1);
|
|
||||||
*/
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
|
@ -653,6 +660,13 @@
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
.ejs_option_row_selected::before {
|
||||||
|
background: rgba(var(--ejs-primary-color),1);
|
||||||
|
}
|
||||||
|
.ejs_option_row_selected::after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-50%) scale(1);
|
||||||
|
}
|
||||||
.ejs_option_row>span {
|
.ejs_option_row>span {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -4,9 +4,18 @@ class EmulatorJS {
|
||||||
}
|
}
|
||||||
addEventListener(element, listener, callback) {
|
addEventListener(element, listener, callback) {
|
||||||
const listeners = listener.split(" ");
|
const listeners = listener.split(" ");
|
||||||
|
let rv = [];
|
||||||
for (let i=0; i<listeners.length; i++) {
|
for (let i=0; i<listeners.length; i++) {
|
||||||
element.addEventListener(listeners[i], callback);
|
element.addEventListener(listeners[i], callback);
|
||||||
this.listeners.push({cb:callback, elem:element, listener:listeners[i]});
|
const data = {cb:callback, elem:element, listener:listeners[i]};
|
||||||
|
rv.push(data);
|
||||||
|
this.listeners.push(data);
|
||||||
|
}
|
||||||
|
return rv;
|
||||||
|
}
|
||||||
|
removeEventListener(data) {
|
||||||
|
for (let i=0; i<data.length; i++) {
|
||||||
|
data[i].elem.removeEventListener(data[i].listener, data[i].cb);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
downloadFile(path, cb, progressCB, notWithPath, opts) {
|
downloadFile(path, cb, progressCB, notWithPath, opts) {
|
||||||
|
@ -1434,11 +1443,25 @@ class EmulatorJS {
|
||||||
const height = (positionInfo.height * dpr);
|
const height = (positionInfo.height * dpr);
|
||||||
this.Module.setCanvasSize(width, height);
|
this.Module.setCanvasSize(width, height);
|
||||||
}
|
}
|
||||||
|
getElementSize(element) {
|
||||||
|
let elem = element.cloneNode(true);
|
||||||
|
elem.style.position = 'absolute';
|
||||||
|
elem.style.opacity = 0;
|
||||||
|
elem.removeAttribute('hidden');
|
||||||
|
element.parentNode.appendChild(elem);
|
||||||
|
let width = elem.scrollWidth,
|
||||||
|
height = elem.scrollHeight;
|
||||||
|
elem.remove();
|
||||||
|
return {
|
||||||
|
'width': width,
|
||||||
|
'height': height
|
||||||
|
};
|
||||||
|
}
|
||||||
setupSettingsMenu() {
|
setupSettingsMenu() {
|
||||||
this.settingsMenu = this.createElement("div");
|
this.settingsMenu = this.createElement("div");
|
||||||
this.settingsMenu.style.display = "none";
|
|
||||||
this.settingsMenu.classList.add("ejs_settings_parent");
|
this.settingsMenu.classList.add("ejs_settings_parent");
|
||||||
const nested = this.createElement("div");
|
const nested = this.createElement("div");
|
||||||
|
nested.classList.add("ejs_settings_transition");
|
||||||
this.settings = {};
|
this.settings = {};
|
||||||
|
|
||||||
const home = this.createElement("div");
|
const home = this.createElement("div");
|
||||||
|
@ -1461,18 +1484,23 @@ class EmulatorJS {
|
||||||
menuOption.appendChild(span);
|
menuOption.appendChild(span);
|
||||||
home.appendChild(menuOption);
|
home.appendChild(menuOption);
|
||||||
|
|
||||||
|
|
||||||
const menu = this.createElement("div");
|
const menu = this.createElement("div");
|
||||||
menu.setAttribute("hidden", "");
|
menu.setAttribute("hidden", "");
|
||||||
const button = this.createElement("button");
|
const button = this.createElement("button");
|
||||||
|
|
||||||
this.addEventListener(menuOption, "click", (e) => {
|
this.addEventListener(menuOption, "click", (e) => {
|
||||||
menu.removeAttribute("hidden", "");
|
const targetSize = this.getElementSize(menu);
|
||||||
|
nested.style.width = targetSize.width + "px";
|
||||||
|
nested.style.height = targetSize.height + "px";
|
||||||
|
menu.removeAttribute("hidden");
|
||||||
home.setAttribute("hidden", "");
|
home.setAttribute("hidden", "");
|
||||||
})
|
})
|
||||||
this.addEventListener(button, "click", (e) => {
|
this.addEventListener(button, "click", (e) => {
|
||||||
|
const homeSize = this.getElementSize(home);
|
||||||
|
|
||||||
|
nested.style.width = homeSize.width + "px";
|
||||||
|
nested.style.height = homeSize.height + "px";
|
||||||
menu.setAttribute("hidden", "");
|
menu.setAttribute("hidden", "");
|
||||||
home.removeAttribute("hidden", "");
|
home.removeAttribute("hidden");
|
||||||
})
|
})
|
||||||
|
|
||||||
button.type = "button";
|
button.type = "button";
|
||||||
|
@ -1488,8 +1516,10 @@ class EmulatorJS {
|
||||||
optionsMenu.style["max-height"] = "385px";
|
optionsMenu.style["max-height"] = "385px";
|
||||||
optionsMenu.style.overflow = "auto";
|
optionsMenu.style.overflow = "auto";
|
||||||
|
|
||||||
|
let buttons = [];
|
||||||
for (let i=0; i<options.length; i++) {
|
for (let i=0; i<options.length; i++) {
|
||||||
const optionButton = this.createElement("button");
|
const optionButton = this.createElement("button");
|
||||||
|
buttons.push(optionButton);
|
||||||
optionButton.type = "button";
|
optionButton.type = "button";
|
||||||
optionButton.value = options[i];
|
optionButton.value = options[i];
|
||||||
optionButton.classList.add("ejs_option_row");
|
optionButton.classList.add("ejs_option_row");
|
||||||
|
@ -1497,7 +1527,10 @@ class EmulatorJS {
|
||||||
|
|
||||||
this.addEventListener(optionButton, "click", (e) => {
|
this.addEventListener(optionButton, "click", (e) => {
|
||||||
this.settings[title] = options[i];
|
this.settings[title] = options[i];
|
||||||
|
for (let j=0; j<buttons.length; j++) {
|
||||||
|
buttons[j].classList.remove("ejs_option_row_selected");
|
||||||
|
}
|
||||||
|
optionButton.classList.add("ejs_option_row_selected");
|
||||||
//todo, change color
|
//todo, change color
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -1523,5 +1556,12 @@ class EmulatorJS {
|
||||||
|
|
||||||
this.settingParent.appendChild(this.settingsMenu);
|
this.settingParent.appendChild(this.settingsMenu);
|
||||||
this.settingParent.style.position = "relative";
|
this.settingParent.style.position = "relative";
|
||||||
|
|
||||||
|
|
||||||
|
const homeSize = this.getElementSize(home);
|
||||||
|
nested.style.width = homeSize.width + "px";
|
||||||
|
nested.style.height = homeSize.height + "px";
|
||||||
|
|
||||||
|
this.settingsMenu.style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue