From 09f30e847351419edb1743d9c033a106d9987b62 Mon Sep 17 00:00:00 2001
From: Daan Breur <git@daanbreur.systems>
Date: Sat, 20 Nov 2021 16:29:58 +0100
Subject: [PATCH] feat(FormElement): New element FormElementDetails This
 implements a wrapper for FormElements that allows you to contain them in the
 <details> HTMLElement

---
 src/css/ingame_hud/dialogs.scss   | 19 +++++++++++++
 src/js/core/modal_dialog_forms.js | 45 +++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss
index cc742d42..131147b6 100644
--- a/src/css/ingame_hud/dialogs.scss
+++ b/src/css/ingame_hud/dialogs.scss
@@ -214,6 +214,25 @@
                     }
                 }
             }
+
+            > .detailsFormElem {
+                > .object {
+                    pointer-events: all;
+
+                    > summary {
+                        transition: opacity 0.1s ease-in-out;
+                        cursor: pointer;
+                        pointer-events: all;
+                        &:hover {
+                            opacity: 0.8;
+                        }
+                    }
+                    > div {
+                        @include S(margin-left, 4px);
+                        cursor: pointer;
+                    }
+                }
+            }
         }
 
         > .buttons {
diff --git a/src/js/core/modal_dialog_forms.js b/src/js/core/modal_dialog_forms.js
index ccf9bfb2..864d13ab 100644
--- a/src/js/core/modal_dialog_forms.js
+++ b/src/js/core/modal_dialog_forms.js
@@ -47,6 +47,51 @@ export class FormElement {
     }
 }
 
+export class FormElementDetails extends FormElement {
+    /**
+     *
+     * @param {object} param0
+     * @param {string} param0.id
+     * @param {string} param0.label
+     * @param {Array<FormElement>} param0.formElements
+     */
+    constructor({ id, label, formElements }) {
+        super(id, label);
+        this.formElements = formElements;
+
+        this.element = null;
+    }
+
+    getHtml() {
+        return `<div class="formElement detailsFormElem"><details class='object'>
+            ${this.label ? `<summary>${this.label}</summary>` : ""}
+            <div>
+                ${this.formElements.map(e => e.getHtml()).join("")}
+            </div></details></div>`;
+    }
+
+    bindEvents(parent, clickTrackers) {
+        this.element = this.getFormElement(parent);
+
+        for (let i = 0; i < this.formElements.length; ++i) {
+            const elem = this.formElements[i];
+            elem.bindEvents(parent, clickTrackers);
+            elem.valueChosen.add(this.valueChosen.dispatch, this.valueChosen);
+        }
+    }
+
+    getValue() {
+        let formElementValues = {};
+        for (let i = 0; i < this.formElements.length; ++i) {
+            const elem = this.formElements[i];
+            formElementValues[elem.id] = elem.getValue();
+        }
+        return formElementValues;
+    }
+
+    focus(parent) {}
+}
+
 export class FormElementInput extends FormElement {
     constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
         super(id, label);