Continue working on frontend.

assets/applet.js

@@ -1,91 +1,172 @@
 import { dom_manager, type_manager } from "./functions.js";
 
 class applet_builder {
+    #minimalise;
+    #maximalise;
     #target;
-    #show;
-    #hide;
-    #change;
-    #init;
     #animation;
-    
+
     constructor() {
+        this.#minimalise = undefined;
+        this.#maximalise = undefined;
         this.#target = undefined;
-        this.#show = undefined;
-        this.#hide = undefined;
-        this.#change = undefined;
-        this.#init = undefined;
         this.#animation = undefined;
     }
 
-    set_target(target) {
+    set minimalise(target) {
         if (!dom_manager.is_element(target)) {
-            throw "Target is not HTML element.";
+            throw "Minimalise button must be HTML element.";
         }
 
-        this.#target = target;
+        this.#minimalise = target;
     }
 
-    #is_dualbutton() {
-        return this.#show !== undefined || this.#hide !== undefined;
-    }
+    set maximalise(target) {
+        if (!dom_manager.is_element(target)) {
+            throw "Maximalise button must be HTML element.";
+        }
 
-    #is_singlebutton() {
-        return this.#change !== undefined;
+        this.#maximalise = target;
     }
 
-    set_show(target) {
+    set target(target) {
         if (!dom_manager.is_element(target)) {
-            throw "Show button must be HTML element.";
+            throw "Target must be HTML element.";
         }
 
-        if (this.#is_singlebutton()) {
-            throw "This is single button applet.";
+        this.#target = target;
+    }
+
+    set animation(target) {
+        if (!type_manager.is_function(target)) {
+            throw "Animation must be an function.";
         }
 
-        this.#show = target;
+        this.#animation = animation;
     }
 
-    set_hide(target) {
-        if (!dom_manager.is_element(target)) {
-            throw "Hide button must be HTML element.";
+    get is_valid() {
+        if (this.#minimalise === undefined) {
+            return false;
         }
 
-        if (this.#is_singlebutton()) {
-            throw "This is single button applet.";
+        if (this.#maximalise === undefined) {
+            return false;
         }
 
-        this.#hide = hide;
+        if (this.#target === undefined) {
+            return false;
+        }
+
+        return true;
     }
 
-    set_change(target) {
-        if (!dom_manager.is_element(target)) {
-            throw "Change button must be HTML element.";
+    get #is_swapable() {
+        return this.#minimalise === this.#maximalise;
+    }
+
+    #build_swapable() {
+        return new swapable_applet(
+            this.#target, 
+            this.#minimalise,
+            this.#animation
+        );
+    }
+
+    build() {
+        if (!this.is_valid) {
+            throw "Builder is not valid yes.";
         }
 
-        if (this.#is_dualbutton()) {
-            throw "This is dual button applet.";
+        if (this.#is_swapable) {
+            return this.#build_swapable();
         }
+    }
+}
 
-        this.#change = target;
+class applet {
+    _target;
+    _animation;
+    _state;
+
+    get _has_animation() {
+        return this._animation !== undefined;
     }
 
-    default_visible() {
-        this.#init = true;
+    _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;
     }
 
-    default_hidden() {
-        this.#init = false;
+    show() {
+        this._state = true;
+        this._target.style.display = "";
+        
+        if (this._has_animation) {
+            this._run_animation();
+        }
     }
 
-    set_animation(target) {
-        if (!type_manager.is_function(target)) {
-            throw "Animation must be an function.";
+    hide(now) {
+        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());
     }
 }
 
-class applet {
+class swapable_applet extends applet {
+    #swaper;
+
+    constructor(target, swaper, animation) {
+        super();
+
+        if (!dom_manager.is_element(target)) {
+            throw "Target must be HTML element.";
+        }
 
+        if (!dom_manager.is_element(swaper)) {
+            throw "Swaper must be HTML element.";
+        }
+
+        if (animation !== undefined && !type_manager.is_function(animation)) {
+            throw "Animation must be undefined (disabled), or function.";
+        }
+
+        this._target = target;
+        this.#swaper = swaper;
+        this._animation = animation;
+        this._state = false;
+
+        this.hide();
+        this.#listen();
+    }
+
+    #listen() {
+        this.#swaper.addEventListener("click", () => { this.swap(); });
+    }
+
+    swap() {
+        if (this._state) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
 }
 
-export { applet };
+export { applet_builder };

assets/core.js

@@ -1,5 +1,14 @@
-import { applet } from "./applet.js";
+import { applet_builder } 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;
+
+    const suvmissions_applet = submissions_applet_builder.build();
 });

assets/functions.js

@@ -5,7 +5,7 @@ class dom_manager {
 
     static validate_element(target) {
         if (!self.is_element(target)) {
-            throw "Parameter must be HTMLElement.";
+            throw "Parameter must be HTML Element.";
         }
     }
 }