dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use svg for progress

Browse source
This commit is contained in:
Danny Coates 2017-08-13 11:02:27 -07:00
parent 43fa551a64
commit eada94b262
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
9 changed files with 36 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/progress.js
View file

@ -1,24 +1,18 @@
import { bytes, percent } from './utils';
import $ from 'jquery';
import 'jquery-circle-progress';
let $progress = null;
let $percent = null;
let $text = null;
let percentText = null;
let text = null;
let title = null;
let bar = null;
let updateTitle = false;
const radius = 73;
const circumference = 2 * Math.PI * radius;
document.addEventListener('DOMContentLoaded', function() {
$percent = $('.percent-number');
$text = $('.progress-text');
$progress = $('.progress-bar');
$progress.circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158,
animation: { duration: 300 }
});
percentText = document.querySelector('.percent-number');
text = document.querySelector('.progress-text');
bar = document.getElementById('bar');
title = document.querySelector('title');
});
@ -33,8 +27,8 @@ document.addEventListener('focus', function() {
function setProgress(params) {
const ratio = params.complete / params.total;
$progress.circleProgress('value', ratio);
$percent.text(Math.floor(ratio * 100));
bar.setAttribute('stroke-dashoffset', (1 - ratio) * circumference);
percentText.textContent = Math.floor(ratio * 100);
if (updateTitle) {
title.textContent = percent(ratio);
}
@ -47,7 +41,7 @@ function setProgress(params) {
}
function setText(str) {
$text.text(str);
text.textContent = str;
}
export { setProgress, setText };