From b939da256c469a8d69eed646548d8605d23fb02d Mon Sep 17 00:00:00 2001 From: Mauro Mugnaini Date: Wed, 9 Aug 2023 18:25:25 +0200 Subject: [PATCH] Beta3: fixed multiple requestes for rapid click in folders with pending requests, fixed double rendering of already received data, added attribute to enable the download of a file selected in folder browser (disabled by default) --- storage/d4s-storage.js | 121 ++++++++++++++++++++++++++++++----------- storage/index.html | 4 +- 2 files changed, 91 insertions(+), 34 deletions(-) diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js index a384523..46e6369 100644 --- a/storage/d4s-storage.js +++ b/storage/d4s-storage.js @@ -111,9 +111,11 @@ class D4SStorageTree extends D4SStorageHtmlElement { #boot = null #baseurl = 'https://api.d4science.org/workspace' + #filedownloadenabled = false; #d4sworkspace = null; #foldersMap = {}; #currentid = null; + #pendingIdRequests = new Set(); constructor() { super() @@ -124,6 +126,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { get boot() { return this.#boot; } + get baseUrl() { return this.#baseurl; } @@ -134,6 +137,14 @@ class D4SStorageTree extends D4SStorageHtmlElement { this.#d4sworkspace = new D4SWorkspace(this.#baseurl, this.#boot); } + set fileDownloadEnabled(value) { + this.#filedownloadenabled = value; + } + + get fileDownloadEnabled() { + return this.#filedownloadenabled; + } + get d4sWorkspace() { return this.#d4sworkspace; } @@ -148,6 +159,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { setFolderItems(id, items, fireEvent = true) { this.#foldersMap[id] = items; + this.#pendingIdRequests.delete(id); if (fireEvent) { this.dispatchEvent( new CustomEvent( @@ -166,10 +178,29 @@ class D4SStorageTree extends D4SStorageHtmlElement { this.getFolderItems(this.currentId); } + static get observedAttributes() { + return ["base-url", "file-download-enabled"]; + } + + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + switch (name) { + case "base-url": + this.baseUrl = newValue; + break; + case "file-download-enabled": + this.fileDownloadEnabled = (newValue.toLowerCase() === 'true'); + break; + default: + console.warn("Unexpected attribute changed: " + name); + } + } + } + connectedCallback() { super.connectedCallback(); - var div = document.createElement('div') + const div = document.createElement('div') div.innerHTML = /*css*/` `; this.shadowRoot.appendChild(div); + const workspaceDIV = document.createElement('div'); + const vreFolderDIV = document.createElement('div'); + div.appendChild(workspaceDIV); + div.appendChild(vreFolderDIV); this.d4sWorkspace.getWorkspace().then(data => { - this.parseItemsData(div, data); + this.parseItemsData(workspaceDIV, data); }).catch(err => console.error(err)); this.d4sWorkspace.getVREFolder().then(data => { - this.parseItemsData(div, data); + this.parseItemsData(vreFolderDIV, data); }).catch(err => console.error(err)) this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler); @@ -222,9 +260,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { } folderDataEventHandler(event) { - if (event.detail.id === this.currentId) { - this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`)) - } + this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${event.detail.id}']`)) } toolbarEventHandler(event) { @@ -281,8 +317,12 @@ class D4SStorageTree extends D4SStorageHtmlElement { folderEventHandler(event) { switch (event.detail.itemtype) { case D4SStorageFolder.file_selected_detail_itemtype: - console.info("Download of file: " + event.detail.name + " [" + event.detail.id + "]"); - this.d4sWorkspace.download(event.detail.id, event.detail.name).catch(err => {alert(err)}); + if (this.fileDownloadEnabled) { + console.info("Download of file: " + event.detail.name + " [" + event.detail.id + "]"); + this.d4sWorkspace.download(event.detail.id, event.detail.name).catch(err => {alert(err)}); + } else { + console.log("File download is disabled"); + } break; case D4SStorageFolder.folder_selected_detail_itemtype: this.select(event.detail.id); @@ -295,7 +335,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { select(id) { this.currentId = id; - var li = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); + const li = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); this.displayPath(li); if (li.classList.contains(this.#selectedClass)) { @@ -334,16 +374,19 @@ class D4SStorageTree extends D4SStorageHtmlElement { if (contents) { this.parseItemsData(element, contents); } else { - this.d4sWorkspace.listFolder(id).then(data => { - this.setFolderItems(id, data); - }).catch(err => console.error(err)); + if (!this.#pendingIdRequests.has(id)) { + this.#pendingIdRequests.add(id); + this.d4sWorkspace.listFolder(id).then(data => { + this.setFolderItems(id, data); + }).catch(err => console.error(err)); + } } } parseItemsData(parentElement, data) { parentElement.classList.add(this.#loadedClass); const parentId = parentElement.getAttribute(D4SStorageTree.dataid_attr); - var ul = document.createElement('ul'); + const ul = document.createElement('ul'); ul.classList.add('nested'); if (!parentId) { ul.classList.add('root'); @@ -367,7 +410,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { if (parentId) { li.setAttribute(D4SStorageTree.parentid_attr, parentId); } - var child = document.createElement('span'); + const child = document.createElement('span'); child.innerHTML = /*html*/`` + label; li.appendChild(child) @@ -375,11 +418,38 @@ class D4SStorageTree extends D4SStorageHtmlElement { ev.stopPropagation(); this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)); }); + // li.addEventListener("dragenter", dee =>{ + // dee.stopPropagation(); + // dee.preventDefault(); + // if (li == dee.target) { + // dee.target.classList.add("dragover"); + // } + // }, false); + // li.addEventListener("dragleave", dle =>{ + // dle.stopPropagation(); + // dle.preventDefault(); + // if (li == dle.target) { + // dle.target.classList.remove("dragover"); + // } + // }, false); + // li.addEventListener("dragover", doe => { + // doe.stopPropagation(); + // doe.preventDefault(); + // }, false); + // li.addEventListener("drop", de => { + // de.stopPropagation(); + // de.preventDefault(); + + // const dt = de.dataTransfer; + // const files = dt.files; + + // console.log(files); + // }, false); return li; } displayPath(li) { - var curr = li + let curr = li while (curr.parentElement != null) { if (curr.parentElement.tagName == 'UL') { curr.parentElement.style.display = 'block' @@ -395,22 +465,6 @@ class D4SStorageTree extends D4SStorageHtmlElement { } } - static get observedAttributes() { - return ["base-url"]; - } - - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - switch (name) { - case "base-url": - this.baseUrl = newValue - break - default: - console.warn("Unexpected attribute changed: " + name); - } - } - } - refreshFolder(id) { const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr)); @@ -480,7 +534,7 @@ class D4SStorageFolder extends D4SStorageHtmlElement { static file_selected_detail_itemtype = "file_selected"; #selectedbgcolor = 'lightgray' - + constructor() { super() } @@ -997,7 +1051,8 @@ window.customElements.define('d4s-storage-tool', D4SStorageToolbar); /** * Builds storagehub VRE folder or Workspace root tree, linked to toolbar and foldr list by events *
- +