Move menu building to Stimulus (WIP)

TODO: cache menu container, build ontology and load templates from external HTML source.
This commit is contained in:
2026-04-21 17:49:40 +02:00
parent 26bea5daae
commit becb0865b9
5 changed files with 101 additions and 113 deletions

View File

@@ -58,7 +58,7 @@
<script type="module" src="./index.js"></script>
</head>
<body data-bs-theme="light">
<body data-bs-theme="light" data-controller="menu">
<div id="toolbar" class="aton-toolbar-top w-100"
data-controller="toolbar clipper" data-clipper-enabled-value="false">
<a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
@@ -89,7 +89,8 @@
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu"
data-menu-target="trigger" data-action="menu#toggleMenu">
<i class="bi bi-list"></i>
</a>
</div>
@@ -118,8 +119,24 @@
</template>
<template id="tmpl-menu-tabs">
<ul class="nav nav-pills" id="content-tabs">...</ul>
<div class="tab-content ...">...</div>
<!-- Nav tabs -->
<ul class="nav nav-pills" id="content-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
<i class="bi bi-boxes me-1"></i> Elementi 3D
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
<i class="bi bi-diagram-3 me-1"></i> Contenuti
</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content ps-4 ms-3 overflow-y-auto">
<div class="tab-pane active p-3 ms-2" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
<div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
</div>
</template>
<!-- TODO CSS-only popover -->

View File

@@ -2,7 +2,6 @@ import { openScene } from "../../js/scene.js";
import { config } from "../../config.js";
import AppState from "../../js/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js";
import { initUI } from "../../js/ui.js";
import { initStimulus } from "../../js/utils/stimulus.js";
initStimulus();
@@ -12,4 +11,3 @@ const marker = config.markers.find(m => m.id === 'ssgp');
AppState.normalizedNodes = normalizeNodes(marker.nodes);
openScene(marker, AppState.normalizedNodes);
initUI(location.pathname + '/ontology.json');