2017-08-10 19:02:13 +02:00
|
|
|
import { bytes, percent } from './utils';
|
2017-08-06 03:06:43 +02:00
|
|
|
|
2017-08-13 20:02:27 +02:00
|
|
|
let percentText = null;
|
|
|
|
let text = null;
|
2017-08-09 04:46:15 +02:00
|
|
|
let title = null;
|
2017-08-13 20:02:27 +02:00
|
|
|
let bar = null;
|
2017-08-09 04:46:15 +02:00
|
|
|
let updateTitle = false;
|
2017-08-06 03:06:43 +02:00
|
|
|
|
2017-08-13 20:02:27 +02:00
|
|
|
const radius = 73;
|
|
|
|
const circumference = 2 * Math.PI * radius;
|
|
|
|
|
2017-08-06 03:06:43 +02:00
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
2017-08-13 20:02:27 +02:00
|
|
|
percentText = document.querySelector('.percent-number');
|
|
|
|
text = document.querySelector('.progress-text');
|
|
|
|
bar = document.getElementById('bar');
|
2017-08-09 04:46:15 +02:00
|
|
|
title = document.querySelector('title');
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('blur', function() {
|
|
|
|
updateTitle = true;
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('focus', function() {
|
|
|
|
updateTitle = false;
|
|
|
|
return title && (title.textContent = 'Firefox Send');
|
2017-08-06 03:06:43 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
function setProgress(params) {
|
2017-08-09 04:46:15 +02:00
|
|
|
const ratio = params.complete / params.total;
|
2017-08-13 20:02:27 +02:00
|
|
|
bar.setAttribute('stroke-dashoffset', (1 - ratio) * circumference);
|
|
|
|
percentText.textContent = Math.floor(ratio * 100);
|
2017-08-09 04:46:15 +02:00
|
|
|
if (updateTitle) {
|
|
|
|
title.textContent = percent(ratio);
|
|
|
|
}
|
2017-08-06 03:06:43 +02:00
|
|
|
document.l10n
|
|
|
|
.formatValue('fileSizeProgress', {
|
|
|
|
partialSize: bytes(params.complete),
|
|
|
|
totalSize: bytes(params.total)
|
|
|
|
})
|
|
|
|
.then(setText);
|
|
|
|
}
|
|
|
|
|
|
|
|
function setText(str) {
|
2017-08-13 20:02:27 +02:00
|
|
|
text.textContent = str;
|
2017-08-06 03:06:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-10 19:02:13 +02:00
|
|
|
export { setProgress, setText };
|