Settings menu transitions!

src/GameManager.js

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

src/css/main.css

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

src/emulator.js

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