clear file picker button

This commit is contained in:
dragonwocky 2021-05-05 21:25:47 +10:00
parent cb4aad5ba0
commit f6d8f222a6
5 changed files with 49 additions and 13 deletions

View File

@ -74,14 +74,24 @@ storage.get = (namespace, key = undefined, fallback = undefined) =>
* @param {string} key - the key associated with the value
* @param {*} value - the data to save
*/
storage._queue = [];
storage.set = (namespace, key, value) => {
return new Promise(async (res, rej) => {
const values = await storage.get(namespace, undefined, {});
storage._onChangeListeners.forEach((listener) =>
listener({ type: 'set', namespace, key, new: value, old: values[key] })
);
chrome.storage.sync.set({ [namespace]: { ...values, [key]: value } }, res);
});
const precursor = storage._queue[storage._queue.length - 1] || undefined,
interaction = new Promise(async (res, rej) => {
if (precursor !== undefined) {
await precursor;
storage._queue.shift();
}
const values = await storage.get(namespace, undefined, {});
if (values.hasOwnProperty(key)) delete values[key];
storage._onChangeListeners.forEach((listener) =>
listener({ type: 'set', namespace, key, new: value, old: values[key] })
);
console.log(namespace, key, value, { ...values, [key]: value });
chrome.storage.sync.set({ [namespace]: { ...values, [key]: value } }, res);
});
storage._queue.push(interaction);
return interaction;
};
/**
* clear data from an enhancer store

View File

@ -1,2 +1,2 @@
<!-- https://fontawesome.com/icons/long-arrow-alt-right?style=solid -->
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>

Before

Width:  |  Height:  |  Size: 410 B

After

Width:  |  Height:  |  Size: 404 B

View File

@ -0,0 +1,2 @@
<!-- https://fontawesome.com/icons/minus?style=solid -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>

After

Width:  |  Height:  |  Size: 279 B

View File

@ -386,6 +386,18 @@ label [data-icon='fa/question-circle'] {
border: none;
background: none;
}
.library--file_label .library--file_title {
display: flex;
}
.library--file_title .library--file_remove {
margin-top: auto;
padding-top: 0.2em;
margin-left: auto;
}
.library--file_title .library--file_remove svg {
cursor: pointer;
width: 0.8em;
}
.library--title,
.library--title h2 {
margin: 0;

View File

@ -240,8 +240,9 @@ components.options = {
: ''
)}
/>
<p><span data-tooltip>${web.escapeHtml(label)}
<i data-icon="fa/question-circle"></i></span></p>
<p class="library--file_title"><span data-tooltip>${web.escapeHtml(label)}
<i data-icon="fa/question-circle"></i></span>
<span class="library--file_remove"><i data-icon="fa/minus"></i></span></p>
<p class="library--file">
<span><i data-icon="fa/file"></i></span>
<span class="library--file_path">${web.escapeHtml(state || 'choose file...')}</span>
@ -250,13 +251,24 @@ components.options = {
opt.addEventListener('change', (event) => {
const file = event.target.files[0],
reader = new FileReader();
opt.querySelector('.library--file_path').innerText = file.name;
storage.set(id, key, file.name);
reader.onload = (progress) => {
opt.querySelector('.library--file_path').innerText = file.name;
reader.onload = (progress) => {
storage.set(id, key, file.name);
storage.set(id, `_file.${key}`, progress.currentTarget.result);
};
reader.readAsText(file);
});
opt.querySelector('.library--file_remove').addEventListener(
'click',
(event) => {
event.preventDefault();
opt.querySelector('input').value = '';
opt.querySelector('.library--file_path').innerText = 'choose file...';
storage.set(id, key, undefined);
storage.set(id, `_file.${key}`, undefined);
},
false
);
opt.addEventListener('click', (event) => {
document.documentElement.scrollTop = 0;
});