Sample semantic modal

js/controllers/menu_controller.js

@@ -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();
+    }
 }