Füge Baugruppen hinzu

assets/controllers/elements/toggle_visibility_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+
+    static values = {
+        classes: Array
+    };
+
+    connect() {
+        this.displayCheckbox = this.element.querySelector("#display");
+        this.displaySelect = this.element.querySelector("select#display");
+
+        if (this.displayCheckbox) {
+            this.toggleContainers(this.displayCheckbox.checked);
+
+            this.displayCheckbox.addEventListener("change", (event) => {
+                this.toggleContainers(event.target.checked);
+            });
+        }
+
+        if (this.displaySelect) {
+            this.toggleContainers(this.hasDisplaySelectValue());
+
+            this.displaySelect.addEventListener("change", () => {
+                this.toggleContainers(this.hasDisplaySelectValue());
+            });
+        }
+
+    }
+
+    /**
+     * Check whether a value was selected in the selectbox
+     * @returns {boolean} True when a value has not been selected that is not empty
+     */
+    hasDisplaySelectValue() {
+        return this.displaySelect && this.displaySelect.value !== "";
+    }
+
+    /**
+     * Hides specified containers if the state is active (checkbox checked or select with value).
+     *
+     * @param {boolean} isActive - True when the checkbox is activated or the selectbox has a value.
+     */
+    toggleContainers(isActive) {
+        if (!Array.isArray(this.classesValue) || this.classesValue.length === 0) {
+            return;
+        }
+
+        this.classesValue.forEach((cssClass) => {
+            const elements = document.querySelectorAll(`.${cssClass}`);
+
+            if (!elements.length) {
+                return;
+            }
+
+            elements.forEach((element) => {
+                element.style.display = isActive ? "none" : "";
+            });
+        });
+    }
+
+}