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']),
|
||||
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() {
|
||||
this.functions.restart();
|
||||
|
|
|
@ -475,7 +475,19 @@
|
|||
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 {
|
||||
animation: ejs_settings_parent_animation .2s ease;
|
||||
background: rgba(16,16,16,0.9);
|
||||
border-radius: 4px;
|
||||
bottom: 100%;
|
||||
|
@ -499,7 +511,7 @@
|
|||
top: 100%;
|
||||
width: 0;
|
||||
}
|
||||
.ejs_settings_parent>div {
|
||||
.ejs_settings_transition {
|
||||
overflow: hidden;
|
||||
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%;
|
||||
}
|
||||
.ejs_option_row::after {
|
||||
/*
|
||||
once selected
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
*/
|
||||
background: #fff;
|
||||
border: 0;
|
||||
height: 6px;
|
||||
|
@ -653,6 +660,13 @@
|
|||
content: '';
|
||||
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 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
|
@ -4,9 +4,18 @@ class EmulatorJS {
|
|||
}
|
||||
addEventListener(element, listener, callback) {
|
||||
const listeners = listener.split(" ");
|
||||
let rv = [];
|
||||
for (let i=0; i<listeners.length; i++) {
|
||||
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) {
|
||||
|
@ -1434,11 +1443,25 @@ class EmulatorJS {
|
|||
const height = (positionInfo.height * dpr);
|
||||
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() {
|
||||
this.settingsMenu = this.createElement("div");
|
||||
this.settingsMenu.style.display = "none";
|
||||
this.settingsMenu.classList.add("ejs_settings_parent");
|
||||
const nested = this.createElement("div");
|
||||
nested.classList.add("ejs_settings_transition");
|
||||
this.settings = {};
|
||||
|
||||
const home = this.createElement("div");
|
||||
|
@ -1461,18 +1484,23 @@ class EmulatorJS {
|
|||
menuOption.appendChild(span);
|
||||
home.appendChild(menuOption);
|
||||
|
||||
|
||||
const menu = this.createElement("div");
|
||||
menu.setAttribute("hidden", "");
|
||||
const button = this.createElement("button");
|
||||
|
||||
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", "");
|
||||
})
|
||||
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", "");
|
||||
home.removeAttribute("hidden", "");
|
||||
home.removeAttribute("hidden");
|
||||
})
|
||||
|
||||
button.type = "button";
|
||||
|
@ -1488,8 +1516,10 @@ class EmulatorJS {
|
|||
optionsMenu.style["max-height"] = "385px";
|
||||
optionsMenu.style.overflow = "auto";
|
||||
|
||||
let buttons = [];
|
||||
for (let i=0; i<options.length; i++) {
|
||||
const optionButton = this.createElement("button");
|
||||
buttons.push(optionButton);
|
||||
optionButton.type = "button";
|
||||
optionButton.value = options[i];
|
||||
optionButton.classList.add("ejs_option_row");
|
||||
|
@ -1497,7 +1527,10 @@ class EmulatorJS {
|
|||
|
||||
this.addEventListener(optionButton, "click", (e) => {
|
||||
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
|
||||
})
|
||||
|
||||
|
@ -1523,5 +1556,12 @@ class EmulatorJS {
|
|||
|
||||
this.settingParent.appendChild(this.settingsMenu);
|
||||
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