Tentative instance attachment

scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json

@@ -2857,7 +2857,7 @@
             "en": "Dublin Core Terms: identifier"
           },
           "value": {
-            "value": "Rilievo Bezzi Gio e paolo.jpg"
+            "value": "Rilievo Bezzi Gio e paolo.jpeg"
           }
         },
         {

scenes/ssgp/index.html

@@ -180,12 +180,10 @@
             <h1 class="fs-4 py-2 text-center"></h1>
         </div>
         <div class="row h-100">
-            <div class="col-5 border-end border-secondary-subtle h-100">
-                <ul id="properties"></ul>
-            </div>
-            <div class="col-7">
-                <p class="text-center fs-4 pt-4 mt-4">Sono inesorabilmente vuoto...</p>
+            <div class="border-end border-secondary-subtle h-100" id="properties-panel">
+                <ul id="properties-list"></ul>
             </div>
+            <div class="d-none" id="attachment-panel"></div>
         </div>
     </div>
 

src/controllers/node_controller.js

@@ -5,6 +5,7 @@ import { createSemanticNode } from "../scene.js";
 import { Ontology } from "../ontology.js";
 
 const html = String.raw;
+const assetsBase = "/a/scaenae/assets";
 /**
  * Handle events for the clipper toolbar,
  * related to the clipping module
@@ -25,6 +26,9 @@ export default class extends Controller {
      * open the instance panel
      */
     open({ params: {id} }) {
+        // First disable transparent envelope node, if active
+        ATON.getSceneNode(AppState.mainNodeId).toggle(false);
+
         const node = ATON.getSceneNode(id);
         const normNode = AppState.normalizedNodes.find(n => n.id === id);
 
@@ -65,14 +69,23 @@ export default class extends Controller {
          * @type {HTMLDivElement}
          */
         const panel = this.panelTarget;
-        const list = panel.querySelector('#properties');
+        const propPanel = panel.querySelector('#properties-panel');
+        const attachmentPanel = panel.querySelector('#attachment-panel');
+        const list = panel.querySelector('#properties-list');
         list.innerHTML = '';
 
         panel.querySelector('h1').textContent = instance.label.it;
 
+        let attachment = '';
+
+        // Reset attachment panel if previously activated...
+        attachmentPanel.classList.add('d-none');
+        attachmentPanel.classList.remove('col-7');
+        propPanel.classList.remove('col-5');
+
         for (const prop of properties) {
             // Include only DC properties (OK?)
-            const schema = prop.property.split(':')[0];
+            const [schema, term] = prop.property.split(':');
             if (schema === 'dcterms' && Object.keys(prop.propertyLabel).length !== 0) {
                 const item = document.createElement('li');
                 item.className = 'py-2';
@@ -84,6 +97,27 @@ export default class extends Controller {
                 `;
 
                 list.appendChild(item);
+
+                // This will spawn bugs!!
+                if (term === 'identifier'
+                    && (prop.value.value.includes('.jpeg') || prop.value.value.includes('.pdf'))) {
+                        attachment = prop.value.value;
+                }
+            }
+
+            if (term === 'format') {
+                propPanel.classList.add('col-5');
+                attachmentPanel.classList.add('col-7');
+                attachmentPanel.classList.remove('d-none');
+
+                const attachmentType = prop.value.value;
+                // Idiotic!!
+                const folder = attachmentType.includes('image') ? assetsBase + '/img/' : assetsBase + '/pdf/';
+                const attachmentItem = document.createElement('img');
+                attachmentItem.className = 'img-fluid mt-3';
+                attachmentItem.src = folder + attachment;
+
+                attachmentPanel.appendChild(attachmentItem);
             }
         }