Skip to content
Snippets Groups Projects
Commit 3c9dc280 authored by Eric's avatar Eric
Browse files

clean description update I

parent de541340
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
index.html
+ 7
− 2
View file @ 3c9dc280
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head><title>TypeScript Dom Manipulation</title></head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TypeScript Dom Manipulation</title></head>
<body> <body>
<div id="app"></div> <div id="app">
</div>
<!-- Assume index.js is the compiled output of index.ts --> <!-- Assume index.js is the compiled output of index.ts -->
<script src="index.js"></script> <script src="index.js"></script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
......
index.js
+ 21
− 5
View file @ 3c9dc280
// 1. Select the div element using the id property // 1. Select the div element using the id property
const app = document.getElementById("app"); const app = document.getElementById("app");
const viewer = document.createElement("div");
viewer.setAttribute("width", "500px");
viewer.setAttribute("height", "500px");
// 2. Create a new <p></p> element programmatically // 2. Create a new <p></p> element programmatically
const description = document.createElement("p"); const description = document.createElement("ul");
const bucketpath = document.createElement("p"); const bucketpath = document.createElement("p");
...@@ -12,9 +16,22 @@ const userAction = async () => { ...@@ -12,9 +16,22 @@ const userAction = async () => {
const response = await fetch('https://www.fdr.uni-hamburg.de/api/records/863'); const response = await fetch('https://www.fdr.uni-hamburg.de/api/records/863');
const recordjson = await response.json(); const recordjson = await response.json();
// read metadata from json response // read metadata from json response
const metadata = recordjson.metadata; const metadata = recordjson.metadata;
description.textContent = metadata.description;
var jsondescription = metadata.description;
var s = jsondescription.split("<p>");
var list = s[1].split("<br>")
list.forEach(element => {
var listnode = document.createElement("li");
var listtext = document.createTextNode(element.replace(/(<([^>]+)>)/gi, ""));
listnode.appendChild(listtext);
description.appendChild(listnode)
})
// get bucket path from record json // get bucket path from record json
...@@ -27,15 +44,13 @@ const userAction = async () => { ...@@ -27,15 +44,13 @@ const userAction = async () => {
{ {
if(element.key.includes('.glb')) if(element.key.includes('.glb'))
{ {
console.log(element.key);
const filelink = element.links.self; const filelink = element.links.self;
console.log(filelink);
const modelviewer = document.createElement("model-viewer"); const modelviewer = document.createElement("model-viewer");
modelviewer.setAttribute("src", filelink); modelviewer.setAttribute("src", filelink);
modelviewer.setAttribute("auto-rotate", true); modelviewer.setAttribute("auto-rotate", true);
modelviewer.setAttribute("camera-controls", true); modelviewer.setAttribute("camera-controls", true);
app?.appendChild(modelviewer); viewer.appendChild(modelviewer);
} }
}); });
...@@ -45,3 +60,4 @@ const userAction = async () => { ...@@ -45,3 +60,4 @@ const userAction = async () => {
// 4. Append the p element to the div element // 4. Append the p element to the div element
app?.appendChild(description); app?.appendChild(description);
app?.appendChild(viewer);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment