added optional support for drag and drop

This commit is contained in:
dcore94 2023-10-06 10:24:24 +02:00
parent 7b2040c629
commit e577298d78
2 changed files with 80 additions and 10 deletions

View File

@ -113,6 +113,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
#baseurl = 'https://api.d4science.org/workspace'
#filedownloadenabled = false;
#showfiles = true;
#allowdrag = false;
#d4sworkspace = null;
#foldersMap = {};
#currentid = null;
@ -140,6 +141,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.#showfiles = value
}
get allowDrag() {
return this.#allowdrag;
}
set allowDrag(value){
this.#allowdrag = value
}
set baseUrl(url) {
this.#baseurl = url;
// this.setAttribute("baseurl", url)
@ -188,7 +197,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
}
static get observedAttributes() {
return ["base-url", "file-download-enabled", "show-files"];
return ["base-url", "file-download-enabled", "show-files", "allow-drag"];
}
attributeChangedCallback(name, oldValue, newValue) {
@ -203,6 +212,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
case "show-files":
this.showFiles = (newValue.toLowerCase() === 'true');
break;
case "allow-drag":
this.allowDrag = (newValue.toLowerCase() === 'true');
break;
default:
console.warn("Unexpected attribute changed: " + name);
}
@ -215,7 +227,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
const div = document.createElement('div')
div.innerHTML = /*css*/`
<style>
.selected > *:first-child {
.selected > span {
background-color: ${this.#selectedbgcolor};
}
ul.root {
@ -419,18 +431,38 @@ class D4SStorageTree extends D4SStorageHtmlElement {
const li = document.createElement('li');
li.setAttribute(D4SStorageTree.dataname_attr, label);
li.setAttribute(D4SStorageTree.dataid_attr, id);
li.style.userSelect = "none"
if (parentId) {
li.setAttribute(D4SStorageTree.parentid_attr, parentId);
}
const child = document.createElement('span');
const icon = type.includes('FolderItem') ? "folder.svg" : "file-earmark.svg"
child.innerHTML = /*html*/`<span class="px-2"><img src="${this.srcBaseURL}/img/${icon}"></img></span>` + label;
li.appendChild(child)
li.innerHTML = `
<img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
<span>${label}</span>
`
li.addEventListener('click', (ev) => {
ev.stopPropagation();
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
});
if(this.allowDrag){
li.setAttribute("draggable", true)
li.addEventListener("dragstart", ev=>{
const id = ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)
ev.dataTransfer.effectAllowed = 'copy'
ev.dataTransfer.setData('text/html', ev.currentTarget.querySelector("span").innerHTML)
ev.dataTransfer.setData('text/plain+publiclink', this.#d4sworkspace.getPublicLink(id))
ev.dataTransfer.setData('text/plain+downloadlink', this.#d4sworkspace.getDownloadLink(id))
ev.stopPropagation()
})
li.addEventListener("dragend", ev=>{
ev.preventDefault()
ev.stopPropagation()
})
}
// li.addEventListener("dragenter", dee =>{
// dee.stopPropagation();
// dee.preventDefault();
@ -716,6 +748,14 @@ class D4SWorkspace {
this.#d4sboot = d4sboot;
}
getPublicLink(itemId){
return this.#workspaceURL + "/items/" + itemId + "/publiclink"
}
getDownloadLink(itemId){
return this.#workspaceURL + "/items/" + itemId + "/download"
}
/**
* Calls with a secure fetch the workspace with provided data.
* To upload data by using a <code>FormData</code> object you have to leave the <code>mime</code> attribute as <code>null</code>.
@ -1015,7 +1055,7 @@ class D4SWorkspace {
* @throws the error as string, if occurred
*/
getPublicURL(itemId, version, extraHeaders) {
let uri = "/workspace/items/" + itemId + "/publiclink";
let uri = "/items/" + itemId + "/publiclink";
if (version) {
uri += "version=" + version;
}

View File

@ -21,13 +21,43 @@
<d4s-storage-tree
base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"
file-download-enabled="true"
show-files="false"/>
show-files="true"
allow-drag="true"/>
</div>
</div>
<div class="col w-100 border overflow-auto mh-100">
<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>