Move menu building to Stimulus (WIP)

TODO: cache menu container, build ontology and load templates from external HTML source.
2026-04-21 17:49:40 +02:00
parent 26bea5daae
commit becb0865b9
5 changed files with 101 additions and 113 deletions
--- a/js/controllers/menu_controller.js
+++ b/js/controllers/menu_controller.js
@@ -0,0 +1,78 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+
+const html = String.raw;
+const domParser = new DOMParser;
+
+export default class extends Controller {
+    static targets = ['trigger', 'layers', 'ontology'];
+
+    connect() {
+        console.log('#menu controller connected');
+    }
+    /**
+     * Open settings panel
+     * @param {Event} event 
+     */
+    toggleMenu(event) {
+        ATON.UI.setSidePanelRight();
+        ATON.UI.showSidePanel({header: 'Menu'});
+        this.#buildMenuPanel(ATON.UI.elSidePanel);
+        this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
+    }
+    /**
+     * @param {Event} event 
+     */
+    toggleNode(event) {
+        /**
+         * The node's id
+         * @type {string}
+         */
+        const id = event.params.node;
+        const status = event.target.checked;
+        ATON.getSceneNode(id).toggle(status);
+        AppState.normalizedNodes.find(n => n.id === id).active = status;
+    }
+    /**
+     * Clone a <template> by id
+     * @param {String} id
+     * @returns {DocumentFragment}
+     */
+    #cloneTemplate(id) {
+        return document.getElementById(id).content.cloneNode(true);
+    }
+    /**
+     * Create the left-side settings panel
+     * content
+     * @param {Element} panel 
+     */
+    #buildMenuPanel(panel) {
+        const fragment = this.#cloneTemplate('tmpl-menu-tabs');
+
+        panel.appendChild(fragment);
+    }
+    /**
+     * @todo Don't rebuild it every time, use caching, return a container with checkboxes
+     * @param {Array} nodes The normalized scene nodes (IDs and status)
+     * @param {HTMLElement} tab Tab content element
+     */
+    #buildLayersMenu(nodes, tab) {
+        for(let node of nodes) {
+            const menuItem = html`
+                <div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
+                    <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
+                        title="Mostra / nascondi layer"
+                        data-menu-node-param="${node.id}"
+                        data-action="change->menu#toggleNode">
+                    <label class="form-check-label">${node.id}</label>
+                </div>
+            `;
+
+            // Awful?
+            tab.appendChild(
+                domParser.parseFromString(menuItem, 'text/html').querySelector('div')
+            );
+        }
+    }
+}