Added images, thumbnails and audio player to HTML

compiled/crate.js

@@ -452,7 +452,9 @@ class Preview {
         }
         var name = item.name ? item.name : id;
         $(".item_name").html(this.helper.value_as_array(item["@type"]).join(", ") + ": " ).append(name);
+        var itemHtml = $("<div/>");
         var metaTable = $("<table class='table metadata'><tbody></table>").attr("id", id);
+        itemHtml.append(metaTable);
         var meta = metaTable.find("tbody");            
         for (let prop of this.sortKeys(Object.keys(item))) {
             if (prop === "@reverse") {
@@ -471,8 +473,20 @@ class Preview {
             }
             
         }
+        if (item.path){
+            var path = this.helper.value_as_array(item.path)[0];
+            console.log(item.path)
+            if (path.match(/(\.txt)|(\.html?)|(\.md)$/i)){
+                itemHtml.append($(`<iframe src='${path}' width='100%' height='500'></iframe>`));
+            } else if (path.match(/(\.mp3)|(\.ogg?)|(\.wav)$/i)){
+               itemHtml.append($(`<audio controls><source src='${path}'/></audio>`));
+            } else if (path.match(/(\.jpe?g)|(\.png)|(\.tiff?)$/i)){
+                itemHtml.append($(`<img width='100%' style='object-fit: contain' src='${path}'/>`));
+             }
+        }
         const done =  await this.addGloss();
-        return metaTable;
+        return itemHtml;
+
     }
     // Add labels to properties that link back to definitions (mostly)
@@ -538,6 +552,16 @@ class Preview {
             }
       ) 
     }
+    else if (prop === 'thumbnail') {
+        var helper = this.helper;
+        row.find("td a").each(
+            function() {
+                var path = $(this).text();
+                var target = helper.item_by_url[path];
+                $(this).html($("<img>").attr('src', target.path));
+            }
+        )
+    }
     target.append(row)
   }
@@ -601,7 +625,10 @@ class Preview {
         if (target) {
             var name = target.name
             if (!name) {
-                name = "-->";
+                var name = target.path;
+                if (!name) {
+                    name = val['@id'];
+                }
             }
             return $("<a href='#" + target["@id"] + "'> </a>").html(name).attr("onclick", "preview.display('" + target["@id"] + "')" );
         }

lib/collection.js

@@ -22,8 +22,7 @@ var program = require('commander');
 var defaults = require('./defaults');
 var XLSX = require('xlsx');
 var path = require('path');
-const ignore= /^\./;
-const querystring = require('querystring')
+
 
 const Property = require("./property.js");
 const Item = require("./item.js");
@@ -32,8 +31,7 @@ const shell = require("shelljs");
 
 var fs = require('fs');
 //const metadata_template = require("../defaults/metadata_template.html");
-const builder = require('xmlbuilder');
-const Index = require('./index_html.js');
+
 const Datacite = require('./datacite.js')
 
 // Copy of default context
@@ -199,7 +197,6 @@ module.exports = function() {
         // Keep track of whether to add this to the graph
         var exists = true;
 
-        //console.log("THINGS", item.id, item.5, item.name)
         if (item.is_file) {
           if (shell.test("-e", path.join(this.root_dir, item.id))) {
             if (!collection_json["hasPart"]) {

lib/index_html.js

@@ -19,7 +19,6 @@ const defaults = require("./defaults");
 const Preview = require("./ro-crate-preview-wrapper")
 var ejs = require("ejs");
 const fs = require("fs-extra");
-//context = require("../defaults/context.json");
 
 const jsonld_helper = require("./jsonldhelper");
 
@@ -35,7 +34,7 @@ module.exports = function () {
       }
       this.helper = new jsonld_helper();
       this.helper.init(crate_data);
-      this.helper.add_back_links();
+      //this.helper.add_back_links();
       // A container for our page
     },
    
@@ -48,7 +47,7 @@ module.exports = function () {
       if (zip_path) {
         zip_path = `<a href='${zip_path}'>Download this Dataset</a>`;
            }
-      const preview = new Preview(json);
+      const preview = new Preview(this.helper.json_ld);
       const summary = await preview.summarizeDataset();
       var date = new Date(); 
       var timestamp = date.getTime(); 

lib/ro-crate-preview.js

@@ -121,7 +121,9 @@ class Preview {
         }
         var name = item.name ? item.name : id;
         $(".item_name").html(this.helper.value_as_array(item["@type"]).join(", ") + ": " ).append(name);
+        var itemHtml = $("<div/>");
         var metaTable = $("<table class='table metadata'><tbody></table>").attr("id", id);
+        itemHtml.append(metaTable);
         var meta = metaTable.find("tbody");            
         for (let prop of this.sortKeys(Object.keys(item))) {
             if (prop === "@reverse") {
@@ -140,8 +142,20 @@ class Preview {
             }
             
         }
+        if (item.path){
+            var path = this.helper.value_as_array(item.path)[0];
+            console.log(item.path)
+            if (path.match(/(\.txt)|(\.html?)|(\.md)$/i)){
+                itemHtml.append($(`<iframe src='${path}' width='100%' height='500'></iframe>`));
+            } else if (path.match(/(\.mp3)|(\.ogg?)|(\.wav)$/i)){
+               itemHtml.append($(`<audio controls><source src='${path}'/></audio>`));
+            } else if (path.match(/(\.jpe?g)|(\.png)|(\.tiff?)$/i)){
+                itemHtml.append($(`<img width='100%' style='object-fit: contain' src='${path}'/>`));
+             }
+        }
         const done =  await this.addGloss();
-        return metaTable;
+        return itemHtml;
+
     }
 
     // Add labels to properties that link back to definitions (mostly)
@@ -207,6 +221,16 @@ class Preview {
             }
       ) 
     }
+    else if (prop === 'thumbnail') {
+        var helper = this.helper;
+        row.find("td a").each(
+            function() {
+                var path = $(this).text();
+                var target = helper.item_by_url[path];
+                $(this).html($("<img>").attr('src', target.path));
+            }
+        )
+    }
     target.append(row)
   }
 
@@ -270,7 +294,10 @@ class Preview {
         if (target) {
             var name = target.name
             if (!name) {
-                name = "-->";
+                var name = target.path;
+                if (!name) {
+                    name = val['@id'];
+                }
             }
             return $("<a href='#" + target["@id"] + "'> </a>").html(name).attr("onclick", "preview.display('" + target["@id"] + "')" );
         }