Commit 609db04e authored by PTSEFTON's avatar PTSEFTON
Browse files

Added images, thumbnails and audio player to HTML

parent c3e589b5
......@@ -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"] + "')" );
}
......
......@@ -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"]) {
......
......@@ -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();
......
......@@ -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"] + "')" );
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment