From 91d6e6abc65aecc1a336ac935a4727e0c5145d63 Mon Sep 17 00:00:00 2001 From: Vincenzo Cestone Date: Wed, 27 Apr 2022 19:40:27 +0200 Subject: [PATCH] Reformatting code. Refactor extended classes. Download method in d4s-storage-folder. --- storage/d4s-storage.js | 462 ++++++++++++++++++++++------------------- 1 file changed, 250 insertions(+), 212 deletions(-) diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js index e0987bd..c66af1a 100644 --- a/storage/d4s-storage.js +++ b/storage/d4s-storage.js @@ -3,34 +3,45 @@ */ class D4SStorageHtmlElement extends HTMLElement { - - #d4smissmsg = 'Required d4s-boot-2 component not found' - #baseurl = 'https://api.d4science.org/workspace' - //#baseurl = 'https://workspace-repository.dev.d4science.org/storagehub/workspace' + #d4smissmsg = 'Required d4s-boot-2 component not found' + #baseurl = 'https://api.d4science.org/workspace' + //#baseurl = 'https://workspace-repository.dev.d4science.org/storagehub/workspace' + #boot = null - constructor() { - super() - } + constructor() { + super() + this.#boot = document.querySelector('d4s-boot-2') + } - appendStylesheets(root) { - const linkElem1 = document.createElement('link') - linkElem1.setAttribute('rel', 'stylesheet') - linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css') - root.appendChild(linkElem1) + get boot() { + if (this.#boot == null) { + this.#boot = document.querySelector('d4s-boot-2') + if (!this.#boot) { + throw this.#d4smissmsg + } } + return this.#boot + } - buildListUrl(id) { - return this.#baseurl + '/items/' + id + '/children' - } + appendStylesheets(root) { + const linkElem1 = document.createElement('link') + linkElem1.setAttribute('rel', 'stylesheet') + linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css') + root.appendChild(linkElem1) + } - get baseUrl() { - return this.#baseurl - } + buildListUrl(id) { + return this.#baseurl + '/items/' + id + '/children' + } - set baseUrl(url) { - this.#baseurl = url - this.setAttribute("baseurl", url) - } + get baseUrl() { + return this.#baseurl + } + + set baseUrl(url) { + this.#baseurl = url + this.setAttribute("baseurl", url) + } } @@ -42,178 +53,183 @@ class D4SStorageHtmlElement extends HTMLElement { */ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlElement { - #storageFilelistId = null + #storageFilelistId = null - #loadedClass = 'loaded' - #selectedClass = 'selected' - #selectedbgcolor = 'lightgray' - #shadowRoot - #boot = null - - constructor() { - super() - this.#boot = document.querySelector('d4s-boot-2') - this.#shadowRoot = this.attachShadow({mode: 'open'}) - } + #loadedClass = 'loaded' + #selectedClass = 'selected' + #selectedbgcolor = 'lightgray' + #shadowRoot - /* - Notes: - API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API - Preprod: https://accounts.pre.d4science.org - Sample context: %2Fpred4s%2Fpreprod%2FpreVRE - User workspace: https://storagehub.pre.d4science.net/storagehub/workspace - vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder - -> and if "id": "e0cd15d2-0071-43ca-bc42-aef8d80660fe", - the tree dir of vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/items/e0cd15d2-0071-43ca-bc42-aef8d80660fe/children - download of a file (domenica.jpg): https://storagehub.pre.d4science.net/storagehub/workspace/items/a5086811-59d1-4230-99fa-98431e820cf1/download - */ - connectedCallback() { - this.appendStylesheets(this.#shadowRoot) + constructor() { + super() + this.#shadowRoot = this.attachShadow({mode: 'open'}) + } - var div = document.createElement('div') - const style = ` - - ` - div.innerHTML = style + /* + Notes: + API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API + Preprod: https://accounts.pre.d4science.org + Sample context: %2Fpred4s%2Fpreprod%2FpreVRE + User workspace: https://storagehub.pre.d4science.net/storagehub/workspace + vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder + -> and if "id": "e0cd15d2-0071-43ca-bc42-aef8d80660fe", + the tree dir of vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/items/e0cd15d2-0071-43ca-bc42-aef8d80660fe/children + download of a file (domenica.jpg): https://storagehub.pre.d4science.net/storagehub/workspace/items/a5086811-59d1-4230-99fa-98431e820cf1/download + */ + connectedCallback() { + this.appendStylesheets(this.#shadowRoot) - - this.#boot.secureFetch(this.baseUrl + '/vrefolder').then( - (reply)=>{ - if(reply.status !== 200) throw "Unable to load folder"; - return reply.json() - } - ).then(data => { - this.parseResponse(div, data) - this.#shadowRoot.appendChild(div) - }).catch(err=>alert(err)) - } - - parseResponse(parentElement, jresp) { - parentElement.classList.add(this.#loadedClass) - var ul = document.createElement('ul') - ul.classList.add('nested') - if (jresp.item) { - const itemname = jresp.item.displayName - const itemid = jresp.item.id - const path = this.buildListUrl(itemid) - ul.appendChild(this.createListItem(itemname, itemid)) - parentElement.appendChild(ul) - - } else if (jresp.itemlist) { - jresp - .itemlist - .filter(item => item['@class'].includes('FolderItem')) - .forEach(item => { - const itemname = item.name - const itemid = item.id - const path = this.buildListUrl(itemid) - ul.appendChild(this.createListItem(itemname, itemid)) - }) - parentElement.appendChild(ul) - } else { - console.error(jresp) + var div = document.createElement('div') + const style = ` + + ` + div.innerHTML = style - createListItem(label, id) { - var li = document.createElement('li') - li.setAttribute('data-id', id) - var child = document.createElement('span') - child.innerHTML = label - li.appendChild(child) + this.boot.secureFetch(this.baseUrl + '/vrefolder').then((reply) => { + if (reply.status !== 200) { + throw "Unable to load folder" + } + return reply.json() - li.addEventListener('click', (ev) => { - ev.stopPropagation() - this.select(ev.currentTarget.getAttribute('data-id')) + }).then(data => { + this.parseResponse(div, data) + this.#shadowRoot.appendChild(div) + + }).catch(err => console.error(err)) + } + + parseResponse(parentElement, jresp) { + parentElement.classList.add(this.#loadedClass) + var ul = document.createElement('ul') + ul.classList.add('nested') + if (jresp.item) { + const itemname = jresp.item.displayName + const itemid = jresp.item.id + const path = this.buildListUrl(itemid) + ul.appendChild(this.createListItem(itemname, itemid)) + parentElement.appendChild(ul) + + } else if (jresp.itemlist) { + jresp + .itemlist + .filter(item => item['@class'].includes('FolderItem')) + .forEach(item => { + const itemname = item.name + const itemid = item.id + const path = this.buildListUrl(itemid) + ul.appendChild(this.createListItem(itemname, itemid)) }) - return li + parentElement.appendChild(ul) + + } else { + console.error(jresp) + } + } + + createListItem(label, id) { + var li = document.createElement('li') + li.setAttribute('data-id', id) + var child = document.createElement('span') + child.innerHTML = label + li.appendChild(child) + + li.addEventListener('click', (ev) => { + ev.stopPropagation() + this.select(ev.currentTarget.getAttribute('data-id')) + }) + return li + } + + select(id) { + var li = this.shadowRoot.querySelector(`*[data-id='${id}']`) + this.displayPath(li) + + // if it was already selected then do nothing + if (li.classList.contains(this.#selectedClass)) { + this.toggleULDisplay(li) + return + } + // switch selected and lists folder contents + if (!li.classList.contains(this.#selectedClass)) { + const selected = this.shadowRoot.querySelector('.' + this.#selectedClass) + if (selected) { + selected.classList.remove(this.#selectedClass) + } + li.classList.add(this.#selectedClass) + if (this.#storageFilelistId) { + var folder = document.getElementById(this.#storageFilelistId) + folder.join(this) + folder.list(id) + } + } + if (li.classList.contains(this.#loadedClass)) { + return } - select(id) { - var li = this.shadowRoot.querySelector(`*[data-id='${id}']`) - this.displayPath(li) + this.boot.secureFetch(this.buildListUrl(id)).then(reply => { + if (reply.status !== 200) { + throw "Unable to load folder" + } + return reply.json() - // if it was already selected then do nothing - if (li.classList.contains(this.#selectedClass)) { - this.toggleULDisplay(li) - return - } - // switch selected and lists folder contents - if (!li.classList.contains(this.#selectedClass)) { - const selected = this.shadowRoot.querySelector('.' + this.#selectedClass) - if (selected) { - selected.classList.remove(this.#selectedClass) - } - li.classList.add(this.#selectedClass) - if (this.#storageFilelistId) { - var folder = document.getElementById(this.#storageFilelistId) - folder.join(this) - folder.list(id) - } - } - if (li.classList.contains(this.#loadedClass)) { - return - } - this.#boot.secureFetch(this.buildListUrl(id)).then(reply=>{ - if(reply.status !== 200) throw "Unable to load folder"; - return reply.json() - }).then(data=>{ - this.parseResponse(li, data) - }).catch(err=>alert(err)) - } + }).then(data => { + this.parseResponse(li, data) - displayPath(li) { - var curr = li - while (curr.parentElement != null) { - if (curr.parentElement.tagName == 'UL') { - curr.parentElement.style.display = 'block' - } - curr = curr.parentElement - } - } + }).catch(err => console.error(err)) + } - toggleULDisplay(li) { - const ul = li.querySelector('ul') - if (ul) { - ul.style.display = (ul.style.display === 'none') ? 'block' : 'none' - } + displayPath(li) { + var curr = li + while (curr.parentElement != null) { + if (curr.parentElement.tagName == 'UL') { + curr.parentElement.style.display = 'block' + } + curr = curr.parentElement } + } - static get observedAttributes() { - return ["base-url", "filelist-id"]; + toggleULDisplay(li) { + const ul = li.querySelector('ul') + if (ul) { + ul.style.display = (ul.style.display === 'none') ? 'block' : 'none' } + } - attributeChangedCallback(name, oldValue, newValue) { - if (oldValue !== newValue) { - switch (name) { - case "filelist-id": - this.#storageFilelistId = newValue - break - case "base-url": - this.baseUrl = newValue - break - } - } - } + static get observedAttributes() { + return ["base-url", "filelist-id"] + } - get filelistId() { - return this.#storageFilelistId + attributeChangedCallback(name, oldValue, newValue) { + if (oldValue !== newValue) { + switch (name) { + case "filelist-id": + this.#storageFilelistId = newValue + break + case "base-url": + this.baseUrl = newValue + break + } } + } - set filelistId(id) { - this.#storageFilelistId = id - this.setAttribute("filelist-id", id) - } + get filelistId() { + return this.#storageFilelistId + } + + set filelistId(id) { + this.#storageFilelistId = id + this.setAttribute("filelist-id", id) + } }) /** @@ -227,11 +243,9 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE #d4sstorageTree = null #selectedbgcolor = 'lightgray' - #boot = null; constructor() { super() - this.#boot = document.querySelector('d4s-boot-2') } connectedCallback() { @@ -240,13 +254,13 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE const style = document.createElement('style') style.innerHTML = ` - span { - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - } + span { + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + } ` shadowRoot.appendChild(style) this.createContainer() @@ -257,7 +271,7 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE div.classList.add('d4s-folder') var child = this.shadowRoot.querySelector('.d4s-folder') if (child) { - this.shadowRoot.removeChild(child) + this.shadowRoot.removeChild(child) } this.shadowRoot.appendChild(div) return div @@ -265,25 +279,29 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE join(tree) { if (this.#d4sstorageTree == null) { - this.#d4sstorageTree = tree + this.#d4sstorageTree = tree } } list(folderId) { - this.#boot.secureFetch(this.buildListUrl(folderId)).then(reply=>{ - if(reply.status !== 200) throw "Unable to build list url"; - return reply.json() - }).then(data=>{ + this.boot.secureFetch(this.buildListUrl(folderId)).then(reply => { + if (reply.status !== 200) { + throw "Unable to build list url" + } + return reply.json() + + }).then(data => { this.parseResponse(data) - }).catch(err=>alert(err)) + + }).catch(err => console.error(err)) } parseResponse(jresp) { const root = this.createContainer() if (jresp.itemlist) { - jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item))) + jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item))) } else { - console.error(jresp) + console.error(jresp) } } @@ -296,19 +314,19 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE filename.innerHTML = this.iconTag(item) + name const isFolder = item['@class'].includes('FolderItem') filename.addEventListener('click', (ev) => { - ev.stopPropagation() - if (isFolder) { - const span = ev.currentTarget.querySelector(':nth-child(2)') - if (span) { - span.style = 'background-color: ' + this.#selectedbgcolor - } - if (this.#d4sstorageTree != null) { - this.#d4sstorageTree.select(item.id) - } - } else { - console.info("Download of " + item.id) - this.#boot.download(this.buildDownloadUrl(item.id), item.name) + ev.stopPropagation() + if (isFolder) { + const span = ev.currentTarget.querySelector(':nth-child(2)') + if (span) { + span.style = 'background-color: ' + this.#selectedbgcolor } + if (this.#d4sstorageTree != null) { + this.#d4sstorageTree.select(item.id) + } + } else { + console.info("Download of " + item.id) + this.download(this.buildDownloadUrl(item.id), item.name) + } }) div.appendChild(filename) @@ -318,11 +336,11 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE iconTag(item) { var i = `` if (item['@class'].includes('FolderItem')) { - i = `` + i = `` } else if (item['@class'].includes('ImageFile')) { - i = `` + i = `` } else if (item['@class'].includes('PDFFileItem')) { - i = `` + i = `` } return '' + i + '' } @@ -331,17 +349,37 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE return this.baseUrl+ '/items/' + id + '/download' } + download(url, name) { + this.boot.secureFetch(url).then(reply => { + if (reply.status !== 200) { + throw "Unable to download" + } + return reply.blob() + + }).then(blob => { + const objectURL = URL.createObjectURL(blob) + var tmplnk = document.createElement("a") + tmplnk.download = name + tmplnk.href = objectURL + //tmplnk.target="_blank" + document.body.appendChild(tmplnk) + tmplnk.click() + document.body.removeChild(tmplnk) + + }).catch(err => console.error(err)) + } + static get observedAttributes() { return ["base-url"]; } attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) { - switch (name) { - case "base-url": - this.baseUrl = newValue - break - } + switch (name) { + case "base-url": + this.baseUrl = newValue + break + } } }