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

17
popup/style.css
View File

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