nicolo/scaenae
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Sample semantic modal

Browse Source
This commit is contained in:
Nicolò P.
2026-05-20 20:34:46 +02:00
parent 55f10e62d9
commit 9a0d769e0f
5 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/rilievo_ssgp_bezzi.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1009 KiB

2
config.js
View File

@@ -115,6 +115,8 @@ export const config = {
// TEMP
content: {
type: 'img',
imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.jpg',
title: 'Disegno della pianta del teatro',
description: `
Tommaso Bezzi: Disegno della pianta del teatro di S. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
`

32
js/controllers/menu_controller.js
View File

@@ -249,4 +249,36 @@ export default class extends Controller {
domainList.innerHTML += domainItem;
}
}
/**
*
* @param {Event} event
*/
showSemanticModal(event) {
console.debug('I have been triggered...');
const modal = document.querySelector('#semanticModal');
const title = modal.querySelector('.modal-title');
// Clear any existing content first
title.innerHTML = '';
title.innerHTML = event.content?.title;
const body = modal.querySelector('.modal-body');
body.innerHTML = '';
const contentType = event.content?.type;
const content = document.createElement(contentType);
if (contentType === 'img') {
content.src = event.content?.imgSrc;
content.classList.add('img-fluid');
}
const description = document.createElement('p');
description.textContent = event.content?.description;
description.classList.add('py-3', 'my-2', 'fst-italic');
body.appendChild(content);
body.appendChild(description);
bootstrap.Modal.getOrCreateInstance(modal).show();
}
}

21
scenes/ssgp/index.html
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>

2
scenes/ssgp/index.js
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);
}
});