Skip to content

Commit

Permalink
Merge pull request #3 from obayomi96/ft-new-features
Browse files Browse the repository at this point in the history
[Feature]: Update version with additional features & fixes
  • Loading branch information
obayomi96 committed Oct 16, 2023
2 parents 0f715bd + e3e1b5c commit 1c1244e
Show file tree
Hide file tree
Showing 9 changed files with 167 additions and 135 deletions.
12 changes: 12 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
## What does this PR do?


## How can this PR (Update) be manually tested?


## Other Information / Background Context


## Issue Information

- Summary of Issue (In your own words):
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## BLINKALERT CHROME EXTENSION (Version 3.0.0)
## BLINKALERT CHROME EXTENSION (Version 3.0.3)

###### DESCRIPTION

Expand All @@ -14,6 +14,8 @@
###### FEATURES

* Reminder at 20 minutes interval to, rest and take the 20-20-20 exercise.
* You can select between 3 options of duration interval.
* Displays a visual timer on the extension popup for time left till next break.
* Leads you through the exercise procedures in a new tab.

###### AUTHOR
Expand Down
40 changes: 17 additions & 23 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ h3.title {
text-align: center;
padding: 10px;
}
.version {
.github {
font-size: 10px;
color: grey;
padding: 10px;
Expand Down Expand Up @@ -99,26 +99,7 @@ h3.title {
border: 0.1rem #eee solid;
}

.modal-icons {
bottom: 0;
border-top: 0.5px solid #dadada;
height: 30px;
width: 100%;
}
.logo {
padding: 15px;
}
.logo-icon {
vertical-align: text-bottom;
margin-right: 12px;
}
.flex-container {
display: flex;
justify-content: space-between;
padding: 10px 22px;
bottom: 0;
}
.flex {
.github-a {
opacity: 1;
transition: opacity 0.2s ease-in-out;
width: 120px;
Expand All @@ -127,10 +108,23 @@ h3.title {
margin: 0;
padding: 0;
}
.flex:hover {

.github-a:hover {
opacity: 0.4;
}
.flex .fa {

.github-a .fa {
font-size: 20px;
color: #2f5876;
}

#popup-timer {
border: 1px solid #dadada;
display: inline;
padding: 5px;
color: black;
font-family: Verdana, sans-serif, Arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
}
38 changes: 22 additions & 16 deletions exercise.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -9,21 +10,26 @@
<title>Blink Alert</title>
</head>
<header>
<h1>20-20-20 Exercise</h1>
<hr>
<h1>20-20-20 Exercise</h1>
<hr>
</header>
<body>
<div id="countdown-timer" class="countdown-timer"></div>
<div id="modal" class="modal">
<div class="modal__header">
<h2>Exercise</h2>
</div><br><br>
<div id="message">
After or during a long day of working with a computer, it is recommended to keep your eyes healthy for the long run by taking the 20-20-20 exercise every 20 minutes</div> <br>
<hr>
<br><div class="rule" id="message">Look Away From Your Computer, Look at something 20 feets away for 20 seconds (see timer..)<br> -BLINK AS MANY TIMES AS YOU CAN</div>
</div>
<script src="js/main.js"></script>
<script src="js/background.js"></script>
</body>

<body>
<div id="countdown-timer" class="countdown-timer"></div>
<div id="modal" class="modal">
<div class="modal__header">
<h2>Exercise</h2>
</div><br><br>
<div id="message">
After or during a long day of working with a computer, it is recommended to keep your eyes healthy for the long
run by taking the 20-20-20 exercise every 20 minutes</div> <br>
<hr>
<br>
<div class="rule" id="message">Look Away From Your Computer, Look at something 20 feets away for 20 seconds (see
timer..)<br> -BLINK AS MANY TIMES AS YOU CAN</div>
</div>
<script src="js/main.js"></script>
<script src="js/background.js"></script>
</body>

</html>
45 changes: 45 additions & 0 deletions js/background.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
// Chrome notification API
const options = {
type: "basic",
title: "Blink Alert! - Take a break",
message:
"Look away from your computer for 20 seconds. (click here to take full exercise)",
iconUrl: "../images/eyeIcon_128.png",
};

let selectedDuration;
let intervalId;

const createNotification = () => {
chrome.notifications.create(options);
};

const createExerciseTab = () => {
chrome.tabs.create({ url: "exercise.html" });
};

chrome.notifications.onClicked.addListener(createExerciseTab);

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.updateInterval) {
chrome.storage.local.get("duration", ({ duration }) => {
selectedDuration = duration;
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(createNotification, +selectedDuration);
});
}
});

chrome.runtime.onInstalled.addListener(() => {
// Set an initial alarm when the extension is installed or updated
chrome.storage.local.get("duration", ({ duration }) => {
selectedDuration = duration;
intervalId = setInterval(createNotification, +selectedDuration);
});
});

const keepAlive = () => setInterval(chrome.runtime.getPlatformInfo, 20e3);
chrome.runtime.onStartup.addListener(keepAlive);
keepAlive();
11 changes: 5 additions & 6 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// 20 minutes countdown timer
// 20 minutes countdown timer for excersise page
function countdown(elementName, minutes, seconds) {
let element, endTime, hours, mins, msLeft, time;
// Make countdown double digits when less that 10
function twoDigits(n) {
return n <= 9 ? "0" + n : n;
}
// Timer counter update
function updateTimer() {
msLeft = endTime - +new Date();
if (msLeft < 1000) {
Expand All @@ -16,13 +15,13 @@ function countdown(elementName, minutes, seconds) {
mins = time.getUTCMinutes();
element.innerHTML =
(hours ? "0" + ":" + twoDigits(mins) : mins) +
":" + twoDigits(time.getUTCSeconds());
":" +
twoDigits(time.getUTCSeconds());
setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
}
} // updateTimer function end

}
element = document.getElementById(elementName);
endTime = +new Date() + 1000 * (60 * minutes + seconds) + 500;
updateTimer();
} // countdown function end
}
countdown("countdown-timer", 0, 20);
68 changes: 21 additions & 47 deletions js/popup.js
Original file line number Diff line number Diff line change
@@ -1,71 +1,45 @@
// // Chrome notification API
const options = {
type: "basic",
title: "Blink Alert! - Its been 20 minutes!",
message:
"Look away from your Computer, Look at something 20 feet away for 20 seconds. (CLICK HERE TO TAKE EXERCISE)",
iconUrl: "images/eyeIcon_128.png",
};

let selectedDuration;

const durationBtn1 = document.getElementById("durationBtn1");
const durationBtn2 = document.getElementById("durationBtn2");
const durationBtn3 = document.getElementById("durationBtn3");

const checkSelectedBtn = (value) => {
if (value === "1200000") {
if (value === 1200000) {
durationBtn1.classList.add("btnSelected");
durationBtn2.classList.remove("btnSelected");
durationBtn3.classList.remove("btnSelected");
} else if (value === "3600000") {
} else if (value === 3600000) {
durationBtn2.classList.add("btnSelected");
durationBtn1.classList.remove("btnSelected");
durationBtn3.classList.remove("btnSelected");
} else if (value === "7200000") {
} else if (value === 7200000) {
durationBtn3.classList.add("btnSelected");
durationBtn1.classList.remove("btnSelected");
durationBtn2.classList.remove("btnSelected");
}
};

chrome.storage.local.get("duration", ({ duration }) => {
selectedDuration = duration || 1200000;
checkSelectedBtn(duration);
});
const durationBtn1 = document.getElementById("durationBtn1");
const durationBtn2 = document.getElementById("durationBtn2");
const durationBtn3 = document.getElementById("durationBtn3");

durationBtn1.addEventListener("click", () => {
chrome.storage.local.set({ duration: "1200000" }, () => {
selectedDuration = 1200000;
});
chrome.storage.local.get("duration", ({ duration }) => {
checkSelectedBtn(duration);
const setDuration = (value) => {
chrome.storage.local.set({ duration: value }, () => {
// Send a message to the background script to update the interval
chrome.runtime.sendMessage({ updateInterval: true });
checkSelectedBtn(value);
});
});
};

durationBtn2.addEventListener("click", () => {
chrome.storage.local.set({ duration: "3600000" }, () => {
selectedDuration = 3600000;
});
document.addEventListener("DOMContentLoaded", () => {
chrome.storage.local.get("duration", ({ duration }) => {
checkSelectedBtn(duration);
setDuration(duration || 1200000);
});
});

durationBtn3.addEventListener("click", () => {
chrome.storage.local.set({ duration: "7200000" }, () => {
selectedDuration = 7200000;
});
chrome.storage.local.get("duration", ({ duration }) => {
checkSelectedBtn(duration);
});
durationBtn1.addEventListener("click", () => {
setDuration(1200000);
});

setInterval(() => {
chrome.notifications.create(options);
}, Number(selectedDuration) || 1200000);
durationBtn2.addEventListener("click", () => {
setDuration(3600000);
});

// Create a new tab onclick of notification
chrome.notifications.onClicked.addListener(function () {
chrome.tabs.create({ url: "exercise.html" });
durationBtn3.addEventListener("click", () => {
setDuration(7200000);
});
5 changes: 4 additions & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Blink Alert",
"description": "A reminder for a computer user to take the 20-20-20 blinking exercise at set intervals",
"version": "3.0.2",
"version": "3.0.3",
"icons": {
"19": "images/eyeIcon.png",
"128": "images/eyeIcon_128.png"
Expand All @@ -19,6 +19,9 @@
"notifications",
"storage"
],
"background": {
"service_worker": "js/background.js"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
}
Expand Down
Loading

0 comments on commit 1c1244e

Please sign in to comment.