Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix issue #14, issue #20 #21

Merged
merged 2 commits into from
Oct 18, 2020
Merged

fix issue #14, issue #20 #21

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98b7ffb
issue #14, issue #20
yuanLeeMidori Oct 7, 2020
a88d8f9
Remove debugger
yuanLeeMidori Oct 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions src/core/clearUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const timerDiv = document.getElementById("countdownTimer");

// Remove timer from the page if it exists
if (timerDiv !== null) {
document.body.removeChild(timerDiv);
if (document.getElementById("countdownTimer") !== null) {
document.body.removeChild(document.getElementById("countdownTimer"));
}
38 changes: 37 additions & 1 deletion src/core/timer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
let timerHandler;
let memorySeconds;
let memoryMinutes;
let memoryHours;

chrome.runtime.onMessage.addListener(
function(request) {
Expand All @@ -11,6 +14,12 @@ chrome.runtime.onMessage.addListener(
if (request.action == "stop") {
stopTimer();
}
if (request.action == "pause"){
pauseTimer();
}
if (request.action == "resume"){
resumeTimer();
}
},
);

Expand All @@ -22,6 +31,7 @@ chrome.runtime.onMessage.addListener(
* @param {Number} seconds - seconds for which timer should run
*/
function startTimer(hours, minutes, seconds) {
debugger;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove debugger statement

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for checking my code. Sorry about leaving the debugger. I've removed it and pushed the change.

chrome.tabs.insertCSS({
file: "core/timer.css",
});
Expand All @@ -32,7 +42,7 @@ function startTimer(hours, minutes, seconds) {

/**
* Stop the timer
* This clears the timerHandler so that timer can be reset
* This clears the timerHandler remove the UI so that timer can be reset and the UI will be removed
*/
function stopTimer() {
// Clear the timeout calls and timer from UI
Expand All @@ -42,6 +52,29 @@ function stopTimer() {
}
}

/**
* Pause the timer
* This stop the SetTimeout and keep the timerHandler for resuming
*/
function pauseTimer(){
if(timerHandler != undefined) {
clearTimeout(timerHandler);
resume = false;
}
}

/**
* Resume the timer
* This resume the timer from what it left from pausing
*/
var resume = new Boolean(false);
function resumeTimer(){
if (resume == false){
timerHandler = setTimeout(updateTimer, 1000, memoryHours, memoryMinutes, memorySeconds);
resume = true;
}
}

/**
* Update the display timer each second
* Timer is displayed in the format hh:mm:ss
Expand All @@ -53,6 +86,9 @@ function updateTimer(hours, minutes, seconds) {
let displayHours = hours.toString();
let displayMinutes = minutes.toString();
let displaySeconds = seconds.toString();
memorySeconds = seconds;
memoryMinutes = minutes;
memoryHours = hours;

if (displayHours.length < 2) {
displayHours = "0" + displayHours;
Expand Down
7 changes: 7 additions & 0 deletions src/core/updateUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,15 @@ if (document.getElementById("countdownTimer") === null) {
timerDiv.id = "countdownTimer";
timerDiv.innerText = currentTime;
timerDiv.style.backgroundColor = color;
if (color == "yellow"){
timerDiv.style.color = "black";
}
document.body.appendChild(timerDiv);
} else {
document.getElementById("countdownTimer").innerText = currentTime;
document.getElementById("countdownTimer").style.backgroundColor = color;
if (color == "yellow"){
document.getElementById("countdownTimer").style.color = "black";
}

}
70 changes: 64 additions & 6 deletions src/popout/popout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
body {
width: 134px;
height: 100px;
width: 140px;
height: 105px;
}

p {
Expand All @@ -10,7 +10,7 @@ p {

#startButton {
text-align: center;
width: 70px;
width: 65px;
padding: 5px;
font: 'Fira Sans';
background-color: #6881FF;
Expand All @@ -23,7 +23,7 @@ p {
}
#startButton:active {
text-align: center;
width: 70px;
width: 65px;
padding: 5px;
font: 'Fira Sans';
background-color: #4961cc;
Expand All @@ -37,7 +37,7 @@ p {

#stopButton {
text-align: center;
width: 70px;
width: 65px;
padding: 6px;
font: 'Fira Sans';
background-color: #fff;
Expand All @@ -50,7 +50,65 @@ p {
}
#stopButton:active {
text-align: center;
width: 70px;
width: 65px;
padding: 6px;
font: 'Fira Sans';
background-color: #f2f2f2;
color: #6881FF;
border: solid #6881FF;
border-width: 2px;
border-radius: 5px;
outline: none;
margin: 10px 0px 10px 2px;
}


#pauseButton {
text-align: center;
width: 65px;
padding: 5px;
font: 'Fira Sans';
background-color: #6881FF;
color: #fff;
border-width: 2px;
border: solid #6881FF;
border-radius: 5px;
margin: 10px 2px 10px 0px;
outline: none;
}
#pauseButton:active {
text-align: center;
width: 65px;
padding: 5px;
font: 'Fira Sans';
background-color: #4961cc;
color: #fff;
border-width: 2px;
border: solid #4961cc;
border-radius: 5px;
margin: 10px 2px 10px 0px;
outline: none;
}


#resumeButton {
display: block;
text-align: center;
width: 65px;
padding: 6px;
font: 'Fira Sans';
background-color: #fff;
color: #6881FF;
border: solid #6881FF;
border-width: 2px;
border-radius: 5px;
outline: none;
margin: 10px 0px 10px 2px;
}
#resumeButton:active {
display: block;
text-align: center;
width: 65px;
padding: 6px;
font: 'Fira Sans';
background-color: #f2f2f2;
Expand Down
10 changes: 8 additions & 2 deletions src/popout/popout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,14 @@
<p>Enter timer duration:</p>
<input type="time" id="clock"/>
<div id="buttons">
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
<div>
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
</div>
<div>
<button id="stopButton">Stop</button>
<button id="resumeButton">Resume</button>
</div>
</div>
</body>
</html>
16 changes: 16 additions & 0 deletions src/popout/popout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ document.addEventListener("DOMContentLoaded", function() {
const link = document.getElementById("startButton");
link.addEventListener("click", startTimer);
document.getElementById("stopButton").addEventListener("click", stopTimer);
document.getElementById("pauseButton").addEventListener("click", pauseTimer);
document.getElementById("resumeButton").addEventListener("click", resumeTimer);
});

/**
Expand All @@ -27,3 +29,17 @@ function startTimer() {
function stopTimer() {
chrome.runtime.sendMessage({action: "stop"});
}

/**
* Function to pause timer on screen
*/
function pauseTimer(){
chrome.runtime.sendMessage({action: "pause"});
}

/**
* Function to resume timer on screen
*/
function resumeTimer(){
chrome.runtime.sendMessage({action: "resume"});
}