added optional support for drag and drop
This commit is contained in:
parent
7b2040c629
commit
e577298d78
|
@ -113,6 +113,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
#baseurl = 'https://api.d4science.org/workspace'
|
#baseurl = 'https://api.d4science.org/workspace'
|
||||||
#filedownloadenabled = false;
|
#filedownloadenabled = false;
|
||||||
#showfiles = true;
|
#showfiles = true;
|
||||||
|
#allowdrag = false;
|
||||||
#d4sworkspace = null;
|
#d4sworkspace = null;
|
||||||
#foldersMap = {};
|
#foldersMap = {};
|
||||||
#currentid = null;
|
#currentid = null;
|
||||||
|
@ -140,6 +141,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
this.#showfiles = value
|
this.#showfiles = value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get allowDrag() {
|
||||||
|
return this.#allowdrag;
|
||||||
|
}
|
||||||
|
|
||||||
|
set allowDrag(value){
|
||||||
|
this.#allowdrag = value
|
||||||
|
}
|
||||||
|
|
||||||
set baseUrl(url) {
|
set baseUrl(url) {
|
||||||
this.#baseurl = url;
|
this.#baseurl = url;
|
||||||
// this.setAttribute("baseurl", url)
|
// this.setAttribute("baseurl", url)
|
||||||
|
@ -188,7 +197,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
static get observedAttributes() {
|
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) {
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
|
@ -203,6 +212,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
case "show-files":
|
case "show-files":
|
||||||
this.showFiles = (newValue.toLowerCase() === 'true');
|
this.showFiles = (newValue.toLowerCase() === 'true');
|
||||||
break;
|
break;
|
||||||
|
case "allow-drag":
|
||||||
|
this.allowDrag = (newValue.toLowerCase() === 'true');
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
console.warn("Unexpected attribute changed: " + name);
|
console.warn("Unexpected attribute changed: " + name);
|
||||||
}
|
}
|
||||||
|
@ -215,7 +227,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
const div = document.createElement('div')
|
const div = document.createElement('div')
|
||||||
div.innerHTML = /*css*/`
|
div.innerHTML = /*css*/`
|
||||||
<style>
|
<style>
|
||||||
.selected > *:first-child {
|
.selected > span {
|
||||||
background-color: ${this.#selectedbgcolor};
|
background-color: ${this.#selectedbgcolor};
|
||||||
}
|
}
|
||||||
ul.root {
|
ul.root {
|
||||||
|
@ -419,18 +431,38 @@ class D4SStorageTree extends D4SStorageHtmlElement {
|
||||||
const li = document.createElement('li');
|
const li = document.createElement('li');
|
||||||
li.setAttribute(D4SStorageTree.dataname_attr, label);
|
li.setAttribute(D4SStorageTree.dataname_attr, label);
|
||||||
li.setAttribute(D4SStorageTree.dataid_attr, id);
|
li.setAttribute(D4SStorageTree.dataid_attr, id);
|
||||||
|
li.style.userSelect = "none"
|
||||||
if (parentId) {
|
if (parentId) {
|
||||||
li.setAttribute(D4SStorageTree.parentid_attr, parentId);
|
li.setAttribute(D4SStorageTree.parentid_attr, parentId);
|
||||||
}
|
}
|
||||||
const child = document.createElement('span');
|
|
||||||
const icon = type.includes('FolderItem') ? "folder.svg" : "file-earmark.svg"
|
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.innerHTML = `
|
||||||
li.appendChild(child)
|
<img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
|
||||||
|
<span>${label}</span>
|
||||||
|
`
|
||||||
|
|
||||||
li.addEventListener('click', (ev) => {
|
li.addEventListener('click', (ev) => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
|
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 =>{
|
// li.addEventListener("dragenter", dee =>{
|
||||||
// dee.stopPropagation();
|
// dee.stopPropagation();
|
||||||
// dee.preventDefault();
|
// dee.preventDefault();
|
||||||
|
@ -716,6 +748,14 @@ class D4SWorkspace {
|
||||||
this.#d4sboot = d4sboot;
|
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.
|
* 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>.
|
* 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
|
* @throws the error as string, if occurred
|
||||||
*/
|
*/
|
||||||
getPublicURL(itemId, version, extraHeaders) {
|
getPublicURL(itemId, version, extraHeaders) {
|
||||||
let uri = "/workspace/items/" + itemId + "/publiclink";
|
let uri = "/items/" + itemId + "/publiclink";
|
||||||
if (version) {
|
if (version) {
|
||||||
uri += "version=" + version;
|
uri += "version=" + version;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,13 +21,43 @@
|
||||||
<d4s-storage-tree
|
<d4s-storage-tree
|
||||||
base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"
|
base-url="https://workspace-repository.dev.d4science.org/storagehub/workspace"
|
||||||
file-download-enabled="true"
|
file-download-enabled="true"
|
||||||
show-files="false"/>
|
show-files="true"
|
||||||
|
allow-drag="true"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col w-100 border overflow-auto mh-100">
|
<div class="col w-100 overflow-auto mh-100">
|
||||||
<d4s-storage-folder></d4s-storage-folder>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue