diff --git a/src/public/web-components.js b/src/public/web-components.js
index 4f880285..64c7c7ea 100644
--- a/src/public/web-components.js
+++ b/src/public/web-components.js
@@ -294,27 +294,30 @@ class ResourcesComponent extends HTMLElement {
this.resourcesFileContent = '';
this.gistId = '';
this.onSelectResource = evt => {
- const selectedItem = evt.target.value;
this.selectedResources = Object.values(evt.target.selectedOptions).map(
- item => item.id
+ (item, index) => ({id:item.id, index, src: item.dataset.src})
);
- if (selectedItem.startsWith('data:image')) {
- shadowRoot.getElementById('selected-resource-preview').innerHTML = `
-
- `;
- } else {
- shadowRoot.getElementById('selected-resource-preview').innerHTML = ``;
- }
+ shadowRoot.getElementById('selected-resource-preview').innerHTML = this.selectedResources.map(resource => {
+ const selectedItem = resource.src;
+ if (selectedItem.startsWith('data:image')) {
+ return `
+
+ `;
+ } else {
+ return ``;
+ }
+ }).join('');
};
this.onRemoveResource = () => {
+ this.isBusy('Removing files...');
const fileData = JSON.parse(this.resourcesFileContent);
this.selectedResources.forEach(selectedResource => {
- console.log({selectedResource})
- if (selectedResource in fileData) delete fileData[selectedResource];
+ if (selectedResource.id in fileData) delete fileData[selectedResource.id];
});
const newContent = JSON.stringify(fileData, null, 2);
this.onCommitResourceFiles(newContent);
+ this.isBusy('');
};
const toBase64 = file => {
return new Promise((resolve, reject) => {
@@ -330,13 +333,15 @@ class ResourcesComponent extends HTMLElement {
newResFiles.forEach(file => {
filePathsPromises.push(toBase64(file));
});
+ this.isBusy('Updating file list with files...');
Promise.all(filePathsPromises).then(filePaths => {
const fileData = JSON.parse(this.resourcesFileContent);
filePaths.forEach(file => {
fileData[file.name] = { src: file.src, added: new Date() };
});
+ this.isBusy('');
const newContent = JSON.stringify(fileData, null, 2);
- this.onCommitResourceFiles(newContent);
+ this.onCommitResourceFiles(newContent);
});
};
this.onSelectScroll = () => {
@@ -349,7 +354,7 @@ class ResourcesComponent extends HTMLElement {
const item = target[i];
const itemPos = item.offsetTop;
if (itemPos > startPos && itemPos < endPos) {
- item.style['background-image'] = `url(${item.value})`;
+ item.style['background-image'] = `url(${item.dataset.src})`;
} else {
item.style['background-image'] = '';
}
@@ -366,19 +371,13 @@ class ResourcesComponent extends HTMLElement {
const options = objectKeys.map(fileKey => {
const fileData = resourcesData[fileKey];
const isCommitted = 'committed' in fileData; //add this field when saving
- return ``;
});
- shadowRoot.getElementById(
- 'resource-list-label'
- ).innerHTML = `${objectKeys.length} files`;
- shadowRoot.getElementById('resources-editor-select').innerHTML = options.join(
- ''
- );
+ shadowRoot.getElementById('resource-list-label').innerHTML = `${objectKeys.length} files`;
+ shadowRoot.getElementById('resources-editor-select').innerHTML = options.join('');
this.onSelectScroll({
target: shadowRoot.getElementById('resources-editor-select'),
});