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

Compare commits

base: pieter:master
Branches Tags
pieter:master
Reimar:master
..
compare: Reimar:master
Branches Tags
Reimar:master
pieter:master

No commits in common. "master" and "master" have entirely different histories.
master ... master

2 changed files with 22 additions and 33 deletions
Show Stats Expand all files Collapse all files

36
popup/script.js
View File

@ -12,9 +12,6 @@ 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;
@ -84,6 +81,7 @@ 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
@ -98,6 +96,7 @@ 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":
@ -114,7 +113,6 @@ 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);
@ -140,38 +138,24 @@ function initTimer() {
secondsElem.innerText = pad(seconds) + "s"; secondsElem.innerText = pad(seconds) + "s";
// Animate progress bar // Animate progress bar
requiredProgress = (hours * 60 * 60) + (minutes * 60) + seconds; var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
++currentAnimationId; progressBar.style.animationDuration = totalSeconds + "s";
var runId = currentAnimationId; progressBar.style.animationName = "progress";
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() {
@ -195,8 +179,6 @@ 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,9 +41,16 @@ main > span.red {
} }
#progress-fg { #progress-fg {
background-color: #43A047; background-color: #43A047;
width: 100%; animation-timing-function: linear;
transform: scaleX(0); animation-fill-mode: forwards;
transform-origin: center left; }
@keyframes progress {
from {
width: 0;
}
to {
width: 100vw;
}
} }
/* FontAwesome */ /* FontAwesome */
i { i {