60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
|
App.FileUploadProgress = {
|
||
|
|
// Creates a new progress bar element
|
||
|
|
createProgressBar: id => {
|
||
|
|
// <div class="progress">
|
||
|
|
const progress = document.createElement("div")
|
||
|
|
progress.setAttribute("id", `progress_bar_${id}`)
|
||
|
|
progress.setAttribute("hidden", "hidden")
|
||
|
|
progress.classList.add("mt-2")
|
||
|
|
progress.classList.add("progress")
|
||
|
|
|
||
|
|
// <div class="progress-bar">
|
||
|
|
const progressBar = document.createElement("div")
|
||
|
|
progressBar.setAttribute("role", "progressbar")
|
||
|
|
progressBar.setAttribute("aria-valuenow", "0")
|
||
|
|
progressBar.setAttribute("aria-valuemin", "0")
|
||
|
|
progressBar.setAttribute("aria-valuemax", "100")
|
||
|
|
progressBar.classList.add("progress-bar")
|
||
|
|
|
||
|
|
progress.appendChild(progressBar)
|
||
|
|
|
||
|
|
return progress
|
||
|
|
},
|
||
|
|
|
||
|
|
// Unhides an existing progress bar
|
||
|
|
showProgressBar: id => {
|
||
|
|
const progressBar = App.FileUploadProgress._findProgressBar(id)
|
||
|
|
progressBar.removeAttribute("hidden")
|
||
|
|
progressBar.firstChild.setAttribute("style", "width: 0%")
|
||
|
|
},
|
||
|
|
|
||
|
|
// Updates the progress of an existing progress bar
|
||
|
|
updateProgressBar: (id, progress) => {
|
||
|
|
const progressBar = App.FileUploadProgress._findProgressBar(id)
|
||
|
|
progressBar.firstChild.setAttribute("style", `width: ${progress}%`)
|
||
|
|
progressBar.firstChild.setAttribute("aria-valuenow", progress)
|
||
|
|
},
|
||
|
|
|
||
|
|
// Shows an error message
|
||
|
|
showError: (id, error) => {
|
||
|
|
// <div class="text-danger>...</div>
|
||
|
|
const errorMsg = document.createElement("div")
|
||
|
|
errorMsg.classList.add("text-danger")
|
||
|
|
errorMsg.appendChild( document.createTextNode(error) )
|
||
|
|
|
||
|
|
const progressBar = App.FileUploadProgress._findProgressBar(id)
|
||
|
|
progressBar.parentNode.replaceChild(errorMsg, progressBar)
|
||
|
|
},
|
||
|
|
|
||
|
|
// Removes a progress bar element from the document
|
||
|
|
removeProgressBar: id => {
|
||
|
|
const progressBar = App.FileUploadProgress._findProgressBar(id)
|
||
|
|
progressBar.parentNode.removeChild(progressBar)
|
||
|
|
},
|
||
|
|
|
||
|
|
// Finds a progress bar element by the given ID
|
||
|
|
_findProgressBar: id => {
|
||
|
|
return document.getElementById(`progress_bar_${id}`)
|
||
|
|
}
|
||
|
|
}
|