web-components/storage/index.html

64 lines
2.5 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="d4s-storage.js"></script>
<script src="../common/js/keycloak.js" type="text/javascript"></script>
<script src="../boot/d4s-boot.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-4">
<d4s-boot-2 context="%2Fgcube%2Fdevsec%2FdevVRE"
gateway="next.d4science.org"
redirect-url="https://cdn.dev.d4science.org/storage/"
url="https://accounts.dev.d4science.org/auth">
<!-- redirect-url="http://localhost:8080/storage/" -->
<div class="row h-100">
<div class="col-3 border">
<div class="row">
<d4s-storage-tool></d4s-storage-tool>
<d4s-storage-tree
base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"
file-download-enabled="true"
show-files="true"
allow-drag="true"/>
</div>
</div>
<div class="col w-100 overflow-auto mh-100">
<div id="dropzone" class="border border-secondary p-3 my-2">
<em class="text-muted">Drop here to test drag and drop</em>
<p name="dropout"></p>
</div>
<div class="border">
<d4s-storage-folder></d4s-storage-folder>
</div>
</div>
</div>
</body>
<script>
const dropzone = document.querySelector("#dropzone")
const dropout = dropzone.querySelector("p")
dropzone.addEventListener("dragenter", ev=>{
dropzone.classList.toggle("border-info")
ev.preventDefault()
})
dropzone.addEventListener("dragleave", ev=>{
dropzone.classList.toggle("border-info")
ev.preventDefault()
})
dropzone.addEventListener("dragover", ev=>{
ev.preventDefault()
})
dropzone.addEventListener("drop", ev=>{
if(ev.dataTransfer){
const plink = ev.dataTransfer.getData('text/plain+publiclink') || "none"
const dlink = ev.dataTransfer.getData('text/plain+downloadlink') || "none"
dropout.innerHTML = `Public link is ${plink}. Download link is ${dlink}`
ev.preventDefault()
ev.stopPropagation()
}
})
</script>
</html>