Sample semantic modal

This commit is contained in:
2026-05-20 20:34:46 +02:00
parent 55f10e62d9
commit 9a0d769e0f
5 changed files with 54 additions and 5 deletions

View File

@@ -58,7 +58,7 @@
<script type="module" src="./index.js"></script>
</head>
<body data-bs-theme="light" data-controller="menu">
<body data-bs-theme="light" data-controller="menu" data-action="semantic-modal-show@document->menu#showSemanticModal">
<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">
@@ -81,7 +81,7 @@
mt-4 text-dark text-center"
id="clipper-bar"
data-clipper-target="clipper">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<span class="pt-5 pb-2 d-block fw-bold">Sezione</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
@@ -157,8 +157,21 @@
</div>
</template>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
<!-- TODO Make it a template -->
<div class="modal" id="semanticModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>

View File

@@ -41,6 +41,8 @@ ATON.on("Tap", (e) => {
const event = new Event('semantic-modal-show');
event.content = content;
console.log(event);
document.dispatchEvent(event);
}
});
});