116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
$('document').ready(function() {
|
|
window.addEventListener('message', function(event) {
|
|
switch(event.data.action) {
|
|
case 'progress':
|
|
draw(event.data);
|
|
break;
|
|
case 'cancel':
|
|
cancel();
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
let canvas = document.getElementById("canvas");
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
let W = canvas.width;
|
|
let H = canvas.height;
|
|
let degrees = 0;
|
|
let new_degrees = 0;
|
|
let time = 0;
|
|
let color = "#ffffff";
|
|
let bgcolor = "rgba(0, 0, 0, 0.50)";
|
|
let bgcolor2 = "#eb5757";
|
|
let animation_loop;
|
|
let animation_loop_full;
|
|
let cancel_timeout;
|
|
|
|
function getRandomInt(min, max) {
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
}
|
|
|
|
function init() {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = bgcolor;
|
|
ctx.lineWidth = 15; // Adjust the line thickness as per your preference
|
|
ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false);
|
|
ctx.stroke();
|
|
|
|
let radians = degrees * Math.PI / 180;
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = color;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineWidth = 17; // Adjust the line thickness as per your preference
|
|
ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
|
|
ctx.stroke();
|
|
}
|
|
|
|
let addition = 0;
|
|
function draw(data) {
|
|
color = "#d0d3d6";
|
|
colorr = "#ffffff";
|
|
ctx.clearRect(0, 0, W, H);
|
|
addition = 0;
|
|
degrees = 0;
|
|
$(".label").css("color", colorr);
|
|
if (typeof cancel_timeout !== undefined) clearTimeout(cancel_timeout);
|
|
$(".icon").html(`<i class=\"fa-solid fa-bars-progress\" style=\"color:${color}\"></i>`);
|
|
if (typeof animation_loop !== undefined) clearInterval(animation_loop);
|
|
let duration = data.duration;
|
|
$(".label").text(data.label);
|
|
$(".container").css("opacity", "0");
|
|
if (data.icon !== null && data.icon !== undefined) {
|
|
$(".icon").html(`<i style=\"color:${color}\" class=\"${data.icon}\"></i>`);
|
|
}
|
|
$(".container").animate({
|
|
opacity: 1,
|
|
}, 500);
|
|
degrees = 0;
|
|
duration = duration * 0.25;
|
|
new_degrees = 360;
|
|
addition = 360 / duration;
|
|
animation_loop = setInterval(animate_to, 1);
|
|
}
|
|
|
|
function animate_to() {
|
|
if (degrees >= 360) {
|
|
clearInterval(animation_loop);
|
|
$(".container").animate({
|
|
opacity: 0,
|
|
}, 500, function() {
|
|
$.post('https://progressbar/FinishAction', JSON.stringify({}));
|
|
});
|
|
return;
|
|
}
|
|
init();
|
|
degrees += addition;
|
|
}
|
|
|
|
function cancel() {
|
|
color = bgcolor2;
|
|
clearInterval(animation_loop);
|
|
addition = (new_degrees - degrees) / 50;
|
|
animation_loop_full = setInterval(animate_to_full, 1);
|
|
$(".label").text("");
|
|
$(".label").css("color", bgcolor2);
|
|
$(".icon").html("<i class=\"fa-solid fa-xmark\" style='color: " + color + "'></i>");
|
|
cancel_timeout = setTimeout(function () {
|
|
clearInterval(animation_loop_full);
|
|
$(".container").animate({
|
|
opacity: 0,
|
|
}, 500, function() {
|
|
$.post('https://progressbar/CancelAction', JSON.stringify({}));
|
|
});
|
|
}, 1000);
|
|
}
|
|
|
|
function animate_to_full() {
|
|
init();
|
|
degrees += addition;
|
|
}
|
|
|