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 timesUpStr = "[ TIME'S UP! ] ";
var lastPaused = -1;
var requiredProgress = -1;
var latestUpdate = Date.now();
var currentAnimationId = 0;
// Init audio
var oscillator, audioContext;
@ -84,6 +81,7 @@ playBtn.onclick = function() {
if (playBtn.classList.contains("fa-pause")) {
lastPaused = Date.now();
if (params.type === "timer") progressBar.style.animationPlayState = "paused";
clearTimeout(timeout);
// Change icon
@ -98,6 +96,7 @@ 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":
@ -114,7 +113,6 @@ playBtn.onclick = function() {
}
function initTimer() {
document.getElementById("progress-bg").style.width = "100%";
hours = parseInt(params.h);
minutes = parseInt(params.m);
@ -140,38 +138,24 @@ function initTimer() {
secondsElem.innerText = pad(seconds) + "s";
// Animate progress bar
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);
var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
progressBar.style.animationDuration = totalSeconds + "s";
progressBar.style.animationName = "progress";
}
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() {
@ -195,8 +179,6 @@ 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,9 +41,16 @@ main > span.red {
}
#progress-fg {
background-color: #43A047;
width: 100%;
transform: scaleX(0);
transform-origin: center left;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100vw;
}
}
/* FontAwesome */
i {