Continue work on applets.

assets/applet.js

@@ -1,5 +1,31 @@
 import { dom_manager, type_manager } from "./functions.js";
 
+class applet_animations {
+    static display(state, target) {
+        if (state) {
+            target.style.display = "block";
+        } else {
+            target.style.display = "none";
+        }
+    }
+
+    static hide_left(state, target) {
+        if (state) {
+            target.style.left = "0";
+        } else {
+            target.style.left = -target.offsetWidth + "px";
+        }
+    }
+
+    static hide_right(state, target) {
+        if (state) {
+            target.style.right = "0";
+        } else {
+            target.style.right = -target.offsetWidth + "px";
+        }
+    }
+}
+
 class applet_builder {
     #minimalise;
     #maximalise;
@@ -10,7 +36,7 @@ class applet_builder {
         this.#minimalise = undefined;
         this.#maximalise = undefined;
         this.#target = undefined;
-        this.#animation = undefined;
+        this.#animation = applet_animations.display;
     }
 
     set minimalise(target) {
@@ -42,7 +68,7 @@ class applet_builder {
             throw "Animation must be an function.";
         }
 
-        this.#animation = animation;
+        this.#animation = target;
     }
 
     get is_valid() {
@@ -58,6 +84,10 @@ class applet_builder {
             return false;
         }
 
+        if (this.#animation === undefined) {
+            return false;
+        }
+
         return true;
     }
 
@@ -94,38 +124,17 @@ class applet {
     }
 
     _run_animation() {
-        const time = this._animation(this._state, this._target);
-
-        if (!isInteger(time)) {
-            throw "Animation must return time which it cost in ms.";
-        }   
-
-        return time;
+        this._animation(this._state, this._target);
     }
 
     show() {
         this._state = true;
-        this._target.style.display = "";
-        
-        if (this._has_animation) {
-            this._run_animation();
-        }
+        this._run_animation();
     }
 
-    hide(now) {
+    hide() {
         this._state = false;
-
-        if (now) {
-            this._target.style.display = "none";
-            return;
-        }
-        
-        if (!this._has_animation) {
-            this.hide(true);
-            return;
-        }
-
-        setTimeout(() => { this.hide(true); }, this._run_animation());
+        this._run_animation();
     }
 }
 
@@ -169,4 +178,4 @@ class swapable_applet extends applet {
     }
 }
 
-export { applet_builder };
+export { applet_builder, applet_animations };

assets/core.js

@@ -1,14 +1,25 @@
-import { applet_builder } from "./applet.js";
+import { applet_builder, applet_animations } from "./applet.js";
 
 document.addEventListener("DOMContentLoaded", () => {
     const submissions_panel = document.querySelector(".left-bar");  
-    const submissions_panel_target = submissions_panel.querySelector(".items-list");
     const submissions_panel_swap = submissions_panel.querySelector(".open-it");
     
     const submissions_applet_builder = new applet_builder();
     submissions_applet_builder.minimalise = submissions_panel_swap;
     submissions_applet_builder.maximalise = submissions_panel_swap;
-    submissions_applet_builder.target = submissions_panel_target;
+    submissions_applet_builder.target = submissions_panel;
+    submissions_applet_builder.animation = applet_animations.hide_left;
 
-    const suvmissions_applet = submissions_applet_builder.build();
+    const submissions_applet = submissions_applet_builder.build();
+
+    const elements_panel = document.querySelector(".elements-bar");
+    const elements_panel_swap = elements_panel.querySelector(".open-it");
+
+    const elements_panel_builder = new applet_builder();
+    elements_panel_builder.minimalise = elements_panel_swap;
+    elements_panel_builder.maximalise = elements_panel_swap;
+    elements_panel_builder.target = elements_panel;
+    elements_panel_builder.animation = applet_animations.hide_right;
+
+    const elements_applet = elements_panel_builder.build();
 });

theme/elements_bar.css

@@ -11,7 +11,7 @@
     padding: var(--padding);
     color: var(--font-color);
     min-height: calc(var(--padding) * 6.5);
-    transition: transform 0.5s;
+    transition: transform 0.5s, right 0.5s;
 }
 
 .elements-bar .control-button button {

theme/left_bar.css

@@ -11,7 +11,7 @@
     padding: var(--padding);
     color: var(--font-color);
     min-height: calc(var(--padding) * 6.5);
-    transition: transform 0.5s;
+    transition: transform 0.5s, left 0.5s;
 }
 
 .left-bar .control-button button {