gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Beta2 with lot of debugging fixes, no new featurs

This commit is contained in:
Mauro Mugnaini 2023-08-09 12:39:18 +02:00
parent 33eedd6d48
commit fbd44d3caf
1 changed files with 53 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
storage/d4s-storage.js
View File

@ -15,11 +15,11 @@ class D4SStorageHtmlElement extends HTMLElement {
this.attachShadow({mode: 'open'}) this.attachShadow({mode: 'open'})
} }
static appendBootstrapStylesheets(root) { connectedCallback() {
let linkElem = document.createElement('link'); let linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet'); linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'); linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
root.appendChild(linkElem); this.shadowRoot.appendChild(linkElem);
} }
get srcBaseURL() { get srcBaseURL() {
@ -28,7 +28,7 @@ class D4SStorageHtmlElement extends HTMLElement {
} }
class D4SStorageToolbar extends HTMLElement { class D4SStorageToolbar extends D4SStorageHtmlElement {
static toolbar_event_name = "d4s-toolbar"; static toolbar_event_name = "d4s-toolbar";
@ -43,21 +43,20 @@ class D4SStorageToolbar extends HTMLElement {
constructor() { constructor() {
super() super()
this.attachShadow({mode: 'open'})
} }
connectedCallback() { connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot); super.connectedCallback();
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = /*html*/` div.innerHTML = /*html*/`
<div class="border"> <div class="border">
<span class="px-2" id="refresh"><img src="img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span> <span class="px-2" id="refresh"><img src="${this.srcBaseURL}/img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span>
<span class="px-2" id="create"><img src="img/folder-plus.svg" alt="Create new folder"></img></span> <span class="px-2" id="create"><img src="${this.srcBaseURL}/img/folder-plus.svg" alt="Create new folder"></img></span>
<span class="px-2" id="delete"><img src="img/folder-x.svg" alt="Delete folder"></img></span> <span class="px-2" id="delete"><img src="${this.srcBaseURL}/img/folder-x.svg" alt="Delete folder"></img></span>
<span class="px-2" id="download"><img src="img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span> <span class="px-2" id="download"><img src="${this.srcBaseURL}/img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span>
<span class="px-2" id="upload-file"><img src="img/box-arrow-in-up.svg" alt="Upload file"></img></span> <span class="px-2" id="upload-file"><img src="${this.srcBaseURL}/img/box-arrow-in-up.svg" alt="Upload file"></img></span>
<span class="px-2" id="upload-archive"><img src="img/file-earmark-zip.svg" alt="Upload archive"></img></span> <span class="px-2" id="upload-archive"><img src="${this.srcBaseURL}/img/file-earmark-zip.svg" alt="Upload archive"></img></span>
</div>`; </div>`;
div.querySelector("#refresh").addEventListener('click', (ev) => { div.querySelector("#refresh").addEventListener('click', (ev) => {
ev.stopPropagation(); ev.stopPropagation();
@ -88,7 +87,7 @@ class D4SStorageToolbar extends HTMLElement {
actionPerformed(action) { actionPerformed(action) {
this.#last_action = action; this.#last_action = action;
this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: action})); this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: {action: action}}));
} }
get lastAction() { get lastAction() {
@ -147,15 +146,17 @@ class D4SStorageTree extends D4SStorageHtmlElement {
return this.#currentid; return this.#currentid;
} }
setFolderItems(id, items) { setFolderItems(id, items, fireEvent = true) {
this.#foldersMap[id] = items; this.#foldersMap[id] = items;
if (fireEvent) {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent( new CustomEvent(
D4SStorageTree.folder_data_event_name, D4SStorageTree.folder_data_event_name,
{detail: id} {detail: {id: id}}
) )
); );
} }
}
getFolderItems(id) { getFolderItems(id) {
return this.#foldersMap[id]; return this.#foldersMap[id];
@ -166,7 +167,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
} }
connectedCallback() { connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot) super.connectedCallback();
var div = document.createElement('div') var div = document.createElement('div')
div.innerHTML = /*css*/` div.innerHTML = /*css*/`
@ -197,7 +198,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.parseItemsData(div, data); this.parseItemsData(div, data);
}).catch(err => console.error(err)) }).catch(err => console.error(err))
this.addEventListener(D4SStorageTree.tree_event_name, this.localEventHandler);
this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler); this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler);
if (document.readyState === "loading") { if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", this.registerOtherListeners.bind(this)); document.addEventListener("DOMContentLoaded", this.registerOtherListeners.bind(this));
@ -207,7 +207,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
} }
disconnectedCallback() { disconnectedCallback() {
this.removeEventListener(D4SStorageTree.tree_event_name);
this.removeEventListener(D4SStorageTree.folder_data_event_name); this.removeEventListener(D4SStorageTree.folder_data_event_name);
const toolbar = document.querySelector("d4s-storage-tool"); const toolbar = document.querySelector("d4s-storage-tool");
if (toolbar) toolbar.removeEventListener(D4SStorageToolbar.toolbar_event_name); if (toolbar) toolbar.removeEventListener(D4SStorageToolbar.toolbar_event_name);
@ -222,18 +221,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (folder) folder.addEventListener(D4SStorageFolder.selected_event_name, this.folderEventHandler.bind(this)); if (folder) folder.addEventListener(D4SStorageFolder.selected_event_name, this.folderEventHandler.bind(this));
} }
localEventHandler(event) {
this.select(event.detail);
}
folderDataEventHandler(event) { folderDataEventHandler(event) {
if (event.detail === this.currentId) { if (event.detail.id === this.currentId) {
this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`)) this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`))
} }
} }
toolbarEventHandler(event) { toolbarEventHandler(event) {
switch (event.detail) { switch (event.detail.action) {
case D4SStorageToolbar.refresh_folder: case D4SStorageToolbar.refresh_folder:
if (this.currentId) { if (this.currentId) {
this.refreshFolder(this.currentId); this.refreshFolder(this.currentId);
@ -278,7 +273,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
file.click(); file.click();
break; break;
default: default:
console.error('Unexpected event action: ' + event.action); console.error('Unexpected event action: ' + event.detail.action);
break; break;
} }
} }
@ -314,11 +309,16 @@ class D4SStorageTree extends D4SStorageHtmlElement {
} }
li.classList.add(this.#selectedClass) li.classList.add(this.#selectedClass)
} }
if (li.classList.contains(this.#loadedClass)) { if (!li.classList.contains(this.#loadedClass)) {
return this.fillWithContent(li);
} }
this.fillWithContent(li); this.dispatchEvent(
new CustomEvent(
D4SStorageTree.tree_event_name,
{detail: {id: id}}
)
);
} }
refreshContents(element) { refreshContents(element) {
@ -330,8 +330,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
fillWithContent(element) { fillWithContent(element) {
const id = element.getAttribute(D4SStorageTree.dataid_attr); const id = element.getAttribute(D4SStorageTree.dataid_attr);
if (this.#foldersMap[id]) { const contents = this.getFolderItems(id);
this.parseItemsData(element, this.#foldersMap[id]); if (contents) {
this.parseItemsData(element, contents);
} else { } else {
this.d4sWorkspace.listFolder(id).then(data => { this.d4sWorkspace.listFolder(id).then(data => {
this.setFolderItems(id, data); this.setFolderItems(id, data);
@ -372,13 +373,8 @@ class D4SStorageTree extends D4SStorageHtmlElement {
li.addEventListener('click', (ev) => { li.addEventListener('click', (ev) => {
ev.stopPropagation(); ev.stopPropagation();
this.dispatchEvent( this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
new CustomEvent( });
D4SStorageTree.tree_event_name,
{detail: ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)}
)
);
})
return li; return li;
} }
@ -418,8 +414,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
refreshFolder(id) { refreshFolder(id) {
const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`); const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr)); console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr));
this.setFolderItems(id, null, false);
this.refreshContents(folder); this.refreshContents(folder);
this.select(id); // this.select(id);
} }
createNewFolderIn(id) { createNewFolderIn(id) {
@ -489,7 +486,8 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
} }
connectedCallback() { connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot); super.connectedCallback();
const style = document.createElement('style') const style = document.createElement('style')
style.innerHTML = /*css*/` style.innerHTML = /*css*/`
span { span {
@ -513,37 +511,37 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
disconnectedCallback() { disconnectedCallback() {
const tree = document.querySelector("d4s-storage-tree"); const tree = document.querySelector("d4s-storage-tree");
if (tree) { if (tree) {
tree.removeEventListener(D4SStorageTree.tree_event_name);
tree.removeEventListener(D4SStorageTree.folder_data_event_name); tree.removeEventListener(D4SStorageTree.folder_data_event_name);
tree.removeEventListener(D4SStorageTree.tree_event_name);
} }
} }
registerOtherListeners(event) { registerOtherListeners(event) {
const tree = document.querySelector("d4s-storage-tree"); const tree = document.querySelector("d4s-storage-tree");
if (tree) { if (tree) {
tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
tree.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler.bind(this)); tree.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler.bind(this));
} tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
}
treeEventHandler(event) {
const folderItems = event.target.getFolderItems(event.detail);
if (folderItems) {
// It's first time folder is selected, data is stil not loaded,
// they will be loaded by the folderDataEventHandler() function when available
this.parseItemsData(folderItems);
} }
} }
folderDataEventHandler(event) { folderDataEventHandler(event) {
if (event.detail === event.target.currentId) { if (event.detail.id === event.target.currentId) {
const folderItems = event.target.getFolderItems(event.detail); const folderItems = event.target.getFolderItems(event.detail.id);
if (folderItems) { if (folderItems) {
this.parseItemsData(folderItems); this.parseItemsData(folderItems);
} }
} }
} }
treeEventHandler(event) {
const folderItems = event.target.getFolderItems(event.detail.id);
if (folderItems) {
// It's first time folder is selected, data is stil not loaded,
// they will be loaded by the folderDataEventHandler() function when available
this.parseItemsData(folderItems);
}
}
createContainer() { createContainer() {
var div = document.createElement('div') var div = document.createElement('div')
div.classList.add('d4s-folder') div.classList.add('d4s-folder')