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

Add modal controller

Browse Source
This commit is contained in:
Nicolò P.
2026-05-21 09:36:17 +02:00
parent 4dccd58bf3
commit c837a6e55f
4 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
js/controllers/menu_controller.js
View File

@@ -249,36 +249,4 @@ export default class extends Controller {
domainList.innerHTML += domainItem; 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();
}
} }

39
js/controllers/modal_controller.js Normal file
View File

@@ -0,0 +1,39 @@
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ['modal'];
connect() {
console.log('#modal controller connected');
}
/**
*
* @param {Event} event
*/
showSemanticModal(event) {
const modal = this.modalTarget;
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();
}
}

2
js/utils/stimulus.js
View File

@@ -3,6 +3,7 @@ import SettingController from '../controllers/settings_controller.js';
import ToolbarController from '../controllers/toolbar_controller.js'; import ToolbarController from '../controllers/toolbar_controller.js';
import ClipperController from '../controllers/clipper_controller.js'; import ClipperController from '../controllers/clipper_controller.js';
import MenuController from '../controllers/menu_controller.js'; import MenuController from '../controllers/menu_controller.js';
import ModalController from '../controllers/modal_controller.js';
/** /**
* Initialize Stimulus controllers * Initialize Stimulus controllers
@@ -13,4 +14,5 @@ export function initStimulus() {
Stimulus.register("toolbar", ToolbarController); Stimulus.register("toolbar", ToolbarController);
Stimulus.register("clipper", ClipperController); Stimulus.register("clipper", ClipperController);
Stimulus.register("menu", MenuController); Stimulus.register("menu", MenuController);
Stimulus.register("modal", ModalController);
} }

4
scenes/ssgp/index.html
View File

@@ -58,7 +58,7 @@
<script type="module" src="./index.js"></script> <script type="module" src="./index.js"></script>
</head> </head>
<body data-bs-theme="light" data-controller="menu" data-action="semantic-modal-show@document->menu#showSemanticModal"> <body data-bs-theme="light" data-controller="menu modal" data-action="semantic-modal-show@document->modal#showSemanticModal">
<div id="toolbar" class="aton-toolbar-top w-100" <div id="toolbar" class="aton-toolbar-top w-100"
data-controller="toolbar clipper" data-clipper-enabled-value="false"> 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"> <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
@@ -158,7 +158,7 @@
</template> </template>
<!-- TODO Make it a template --> <!-- TODO Make it a template -->
<div class="modal" id="semanticModal" tabindex="-1"> <div class="modal" id="semanticModal" tabindex="-1" data-modal-target="modal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">