added optional support for drag and drop

storage/d4s-storage.js

@@ -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;
     }

storage/index.html

@@ -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>