pieter/popup-timer
1
0
Fork 0
forked from Reimar/popup-timer
Code Pull Requests Activity

fix progress bar not resizing

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2026-04-03 16:23:35 +02:00
parent 382992661e
commit 6f697436c7
2 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
popup/script.js
View File

@ -12,6 +12,9 @@ var progressBar = document.getElementById("progress-fg");
var timeout;
var timesUpStr = "[ TIME'S UP! ] ";
var lastPaused = -1;
var requiredProgress = -1;
var latestUpdate = Date.now();
var currentAnimationId = 0;
// Init audio
var oscillator, audioContext;
@ -81,7 +84,6 @@ playBtn.onclick = function() {
if (playBtn.classList.contains("fa-pause")) {
lastPaused = Date.now();
if (params.type === "timer") progressBar.style.animationPlayState = "paused";
clearTimeout(timeout);
// Change icon
@ -96,13 +98,12 @@ playBtn.onclick = function() {
switch (params.type) {
case "timer":
if (hours === 0 && minutes == 0 && seconds === 0) return;
progressBar.style.animationPlayState = "running";
startTimer(startOffset);
break;
case "stopwatch":
startStopwatch(startOffset);
break;
}
}
// Change icon
playBtn.classList.remove("fa-play");
@ -113,6 +114,7 @@ playBtn.onclick = function() {
}
function initTimer() {
document.getElementById("progress-bg").style.width = "100%";
hours = parseInt(params.h);
minutes = parseInt(params.m);
@ -138,24 +140,38 @@ function initTimer() {
secondsElem.innerText = pad(seconds) + "s";
// Animate progress bar
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
progressBar.style.animationDuration = totalSeconds + "s";
progressBar.style.animationName = "progress";
requiredProgress = (hours * 60 * 60) + (minutes * 60) + seconds;
++currentAnimationId;
var runId = currentAnimationId;
var animate;
animate = function () {
var paused = playBtn.classList.contains("fa-play");
if (currentAnimationId !== runId || paused) {
return;
}
var milliProgress = (Date.now() - latestUpdate) / 1000;
var progress = (hours * 60 * 60) + (minutes * 60) + seconds -
milliProgress;
var percentage = 1 - (progress /
requiredProgress);
document.getElementById("progress-fg").style.transform =
`scaleX(${percentage})`;
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
}
function startTimer(startOffset) {
if (hours === 0 && minutes == 0 && seconds === 0) return;
latestUpdate = Date.now();
playBtn.classList.remove("fa-play");
playBtn.classList.add("fa-pause");
// Wait the starting offset
timeout = setTimeout(updateTimer, startOffset);
document.getElementById("progress-fg").style.animationPlayState = "running";
}
function updateTimer() {
@ -179,6 +195,8 @@ function updateTimer() {
}
secondsElem.innerText = pad(seconds) + "s";
latestUpdate = Date.now();
if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
else timeout = setTimeout(updateTimer, 1000);

17
popup/style.css
View File

@ -21,13 +21,13 @@ main {
main > span {
font-size: 15vw; /* Browsers that don't support min() */
font-size: min(15vw, 50vh);
color: #9E9E9E;
color: #9e9e9e;
}
main > span.highlighted {
color: #424242;
}
main > span.red {
color: #F4511E;
color: #f4511e;
}
.progress {
position: absolute;
@ -41,16 +41,9 @@ main > span.red {
}
#progress-fg {
background-color: #43A047;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100vw;
}
width: 100%;
transform: scaleX(0);
transform-origin: center left;
}
/* FontAwesome */
i {