ro-crate previewer

ErykKul · Sep 29, 2023 · 5a077d7 · 5a077d7
1 parent 45be6fb
commit 5a077d7
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 10 deletions.
diff --git a/previewers/betatest/ROCrate.html b/previewers/betatest/ROCrate.html
@@ -5,7 +5,6 @@
     <title class="rocratePreviewText">RO-Crate Preview</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script type="text/javascript" src="js/xss.js"></script>
-    <script type="text/javascript" src="js/ro-crate-dynamic.js"></script>
     <script type="text/javascript" src="js/rocrate.js"></script>
     <script src="lib/jquery.i18n.js"></script>
     <script src="lib/jquery.i18n.messagestore.js"></script>
@@ -17,15 +16,29 @@
     <!-- Optional theme -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
         integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link type="text/css" rel="stylesheet" href="css/preview.css" />
+    <style>
+        table.table {
+          padding-bottom: 300px;
+        }
+    </style>
+
+    <script type="application/ld+json"></script>
 </head>
 
 <body class="container">
     <main><img id='logo' alt='Site Logo'>
         <h1 class="page-title rocratePreviewText">RO-Crate Preview</h1>
         <div class='preview-container'>
             <div class='preview-header'></div>
-            <div class='preview'></div>
+            <div class='preview'>
+                <div class="jumbotron">
+                    <div id="check"></div>
+                </div>
+                <div id="summary"></div>
+            </div>
         </div>
     </main>
 </body>

diff --git a/previewers/betatest/js/ro-crate-dynamic.js b/previewers/betatest/js/ro-crate-dynamic.js
@@ -98,6 +98,49 @@ async function check() {
     document.getElementById("check").innerHTML = `<details><summary>${checker.summarize()}</summary><a href='#___check___'><pre>${checker.report()}</pre></a></details>`;
 };
 
+async function load() {
+    if (!meta) {
+         meta = new ROCrate(
+                 JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML)
+        );
+        preview = await new Preview(meta, config);
+        meta.resolveContext().then(function () {updatePage()}); // This is async
+    }
+    var css = document.createElement('style');
+    css.type = 'text/css';
+    var styles = 'summary { display: list-item; }';
+    css.appendChild(document.createTextNode(styles));
+
+   document.getElementsByTagName("head")[0].appendChild(css);
+
+
+   document.getElementsByTagName("body").append
+   document.getElementById("check").innerHTML = "<button><a href='#___check___'>Check this crate</a></button>";
+    updatePage();
+}
+
+window.onhashchange = function () {
+    load();
+};
+
+window.onload = function () {
+    load();
+};
+
+
+
+async function updatePage() {
+    var hash = location.hash;
+
+    if (hash.startsWith("#___check")) {
+        check();
+    } else if (hash) {
+        await preview.display(unescape(hash.replace("#", "")));
+    } else {
+        await preview.display(preview.root["@id"]);
+    }
+}
+
 },{"./ro-crate-preview":4,"chai":33,"ro-crate":70}],3:[function(require,module,exports){
 /* 
 

diff --git a/previewers/betatest/js/rocrate.js b/previewers/betatest/js/rocrate.js
@@ -9,12 +9,6 @@ function translateBaseHtmlPage() {
 
 async function writeContentAndData(data, fileUrl, file, title, authors) {
     addStandardPreviewHeader(file, title, authors);
-
-    json = JSON.parse(data);
-    const crate = new ROCrate(json);
-    const preview = new Preview(crate);
-    const id = "RO-Crate_preview";
-    const html = await this.renderMetadataForItem();
-
-    $('.preview').append($("<div id=\"" + id +"\"/>").html(html));
+    $('.preview').append($("<script type=\"application/ld+json\"/>").value(data));
+    $('.preview').append($("<script type=\"text/javascript\" src=\"js/ro-crate-dynamic.js\"/>"));
 }