DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Refactor upload progress bar

Browse source
This commit is contained in:
Paul Chavard 2019-02-12 17:56:06 +01:00
parent 235310bcf6
commit 1e8bc3e14c
1 changed files with 38 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
app/javascript/shared/activestorage/progress.js
View file

@ -1,49 +1,64 @@
addEventListener('direct-upload:initialize', event => { addEventListener('direct-upload:initialize', event => {
const target = event.target, const {
detail = event.detail, target,
id = detail.id, detail: {
file = detail.file; id,
file: { name: filename }
}
} = event;
target.insertAdjacentHTML( const errorElements = target.parentElement.querySelectorAll(
'beforebegin', '.direct-upload--error'
'\n<div id="direct-upload-' +
id +
'" class="direct-upload direct-upload--pending">\n<div id="direct-upload-progress-' +
id +
'" class="direct-upload__progress" style="width: 0%"></div>\n<span class="direct-upload__filename">' +
file.name +
'</span>\n</div>\n'
); );
for (let element of errorElements) {
element.remove();
}
target.insertAdjacentHTML('beforebegin', template(id, filename));
}); });
addEventListener('direct-upload:start', event => { addEventListener('direct-upload:start', event => {
const id = event.detail.id, const id = event.detail.id,
element = document.getElementById('direct-upload-' + id); element = getDirectUploadElement(id);
element.classList.remove('direct-upload--pending'); element.classList.remove('direct-upload--pending');
return false;
}); });
addEventListener('direct-upload:progress', event => { addEventListener('direct-upload:progress', event => {
const id = event.detail.id, const { id, progress } = event.detail,
progress = event.detail.progress, progressElement = getDirectUploadProgressElement(id);
progressElement = document.getElementById('direct-upload-progress-' + id);
progressElement.style.width = `${progress}%`; progressElement.style.width = `${progress}%`;
}); });
addEventListener('direct-upload:error', event => { addEventListener('direct-upload:error', event => {
event.preventDefault(); const { id, error } = event.detail,
const id = event.detail.id, element = getDirectUploadElement(id);
error = event.detail.error,
element = document.getElementById('direct-upload-' + id);
element.classList.add('direct-upload--error'); element.classList.add('direct-upload--error');
element.setAttribute('title', error); element.setAttribute('title', error);
}); });
addEventListener('direct-upload:end', event => { addEventListener('direct-upload:end', event => {
const id = event.detail.id, const { id } = event.detail,
element = document.getElementById('direct-upload-' + id); element = getDirectUploadElement(id);
element.classList.add('direct-upload--complete'); element.classList.add('direct-upload--complete');
}); });
function template(id, filename) {
return `<div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
<div class="direct-upload__progress" style="width: 0%"></div>
<span class="direct-upload__filename">${filename}</span>
</div>`;
}
function getDirectUploadElement(id) {
return document.getElementById(`direct-upload-${id}`);
}
function getDirectUploadProgressElement(id) {
return document.querySelector(
`#direct-upload-${id} .direct-upload__progress`
);
}