Attach read more to descriptions (draft)

js/ds.js

@@ -36,6 +36,12 @@ DataSpace.CONTEXT_ORDER = {
     "Context Traces of extraction tools" : null,
     "Context Amount of debris (cm3)" : null,
     "Context Presence of unfinished materials" : null,
+    "Context Collections for the lifting machine" : null,
+    "Context Current status" : null,
+    "Context Streets of contention" : null,
+    "Context Project" : null,
+    "Context Compiler" : null,
+    "Context Bibliography" : null,
 };
 const OBJECT_REPORT = new Map();
 OBJECT_REPORT.set(
@@ -78,9 +84,13 @@ CONTEXT_REPORT.set(
         "Context Surface" : null,
         "Context Square meters" : null,
         "Context Quality of the marble used/extracted" : null,
+        "Context Quantity of extracted material (cm3)" : null,
         "Context Traces of extraction tools" : null,
         "Context Amount of debris (cm3)" : null,
         "Context Presence of unfinished materials" : null,
+        "Context Collections for the lifting machine" : null,
+        "Context Current status" : null,
+        "Context Streets of contention" : null
     }
 );
 CONTEXT_REPORT.set(
@@ -92,6 +102,10 @@ CONTEXT_REPORT.set(
 CONTEXT_REPORT.set(
     'after-gallery-2-col',
     {
+        
+        "Context Project" : null,
+        "Context Compiler" : null,
+        "Context Bibliography" : null,
     }
 );
 DataSpace.OBJECT_REPORT = OBJECT_REPORT;
@@ -252,7 +266,7 @@ DataSpace.getCenterCoordinates = function (geoJSON)
     
     let centerCoords = [coordinates[1], coordinates[0]];
 
-    if (! geometry.includes('Point')) {
+    if (!geometry.includes('Point')) {
         let avX = coordinates[0]
             .map(el => el[0])
             .reduce((p, c) => p + c) / coordinates[0].length;
@@ -300,7 +314,7 @@ DataSpace.createMap = function (geoJSON, htmlId = 'map') {
     };
     const map = L.map(htmlId, {
         center: centerCoords,
-        zoom: 18,
+        zoom: 17,
         layers: [streets, satellite]
     });
 
@@ -321,7 +335,8 @@ DataSpace.createMap = function (geoJSON, htmlId = 'map') {
  *
  * @return {string[]}
  */
-DataSpace.getImagesSrc = function (resource) {
+DataSpace.getImagesSrc = function (resource)
+{
     // TODO don't filter this array, populate another one
     let arr = resource.tiles
         .filter(tile => { 
@@ -345,6 +360,38 @@ DataSpace.getImagesSrc = function (resource) {
 
     return fileNames;
 }
+/**
+ * @param {string} cssClass
+ *
+ * @returns {void}
+ */
+DataSpace.attachReadMore = function (cssClass)
+{
+    const elements = document.querySelectorAll(`.${cssClass}`);
+
+    for (const element of elements) {
+        let contentElement = element.nextElementSibling; 
+        let text = contentElement.textContent;
+        const isLongText = text.split(' ').length > 100;
+
+        if (isLongText) {
+            const more = document.createElement('span');
+            more.textContent = 'Read more';
+            more.className = 'text-primary c-hand';
+            more.onclick = function () {
+                this.parentElement.textContent = text;
+            }
+
+            contentElement.textContent = text.split(' ').splice(0, 100).reduce(
+                (p, v) => `${p} ${v}`
+            );
+
+            contentElement.textContent += '... ';
+
+            contentElement.appendChild(more);
+        }
+    }
+}
 
 /**
  * @todo The order of elements in the tiles array
@@ -423,7 +470,10 @@ function _createReportTable(resType, shape, resource)
 
         row.innerHTML = `
             <td class="text-bold key">${key.replace(resType, '')}</td>
-            <td>${value}</td>
+            <td>
+                ${value.replace(/^False$/,'No')
+                    .replace(/^True$/, 'Yes')}
+            </td>
         `;
 
         if (!key.includes('Images') && !key.includes('Photos')) {
@@ -442,7 +492,7 @@ function _createReportTail(resType, shape, resource)
 
         col.className = 'column col-12';
         col.innerHTML = `
-            <p class="text-bold">${key.replace(resType, '')}</p>
+            <p class="read-more text-bold">${key.replace(resType, '')}</p>
             <p>${resource[key]}</p>
         `;
 

js/views/report.js

@@ -20,4 +20,6 @@ document.addEventListener('readystatechange', async () => {
 
     // Create report HTML
     DataSpace.renderReport(report, images);
+
+    DataSpace.attachReadMore('read-more');
 });