Added checkbox for SOMtonight

This commit is contained in:
Arne van Iterson 2019-11-22 14:29:27 +01:00
parent 8eb336df03
commit 26ba99b803
5 changed files with 62 additions and 12 deletions

View File

@ -5,11 +5,17 @@ function getSlogans() {
var slogans; var slogans;
if (localStorage.getItem('SOMtodayntSlogans') != null) { if (localStorage.getItem('SOMtodayntSlogans') != null) {
slogans = JSON.parse(localStorage.getItem('SOMtodayntSlogans')); slogans = JSON.parse(localStorage.getItem('SOMtodayntSlogans'));
tonight = JSON.parse(localStorage.getItem('SOMtonight'));
} else { } else {
var slogans = [ "Welkom bij SOMtodayn't" ] var slogans = [ "Welkom bij SOMtodayn't" ];
var tonight = true;
localStorage.setItem('SOMtodayntSlogans', JSON.stringify(slogans)); localStorage.setItem('SOMtodayntSlogans', JSON.stringify(slogans));
localStorage.setItem('SOMtonight', JSON.stringify(tonight));
} }
return slogans; return [
tonight,
slogans
];
} }
// Update array in local storage // Update array in local storage
@ -18,6 +24,11 @@ function setSlogans(array) {
return true; return true;
} }
function setTonight(value) {
localStorage.setItem('SOMtonight', JSON.stringify(value));
return;
}
// Handle requests // Handle requests
function handleMessage(request, sender, sendResponse) { function handleMessage(request, sender, sendResponse) {
var response; var response;
@ -28,9 +39,13 @@ function handleMessage(request, sender, sendResponse) {
response = getSlogans(); response = getSlogans();
break; break;
case 'set': case 'setSlogans':
response = setSlogans(request.value); response = setSlogans(request.value);
break; break;
case 'setTonight':
response = setTonight(request.value);
break;
} }
// Send response to either the content script or popup // Send response to either the content script or popup
if (sender.tab) { if (sender.tab) {

View File

@ -2,11 +2,14 @@ console.log('Somtoday\'nt content script active');
function changeSlogan(message) function changeSlogan(message)
{ {
tonight = message[0];
slogans = message[1];
// Select random slogan // Select random slogan
console.log(`Loaded ${message.length} slogans`); console.log(`Loaded ${slogans.length} slogans`);
if (message.length >= 1) { if (slogans.length >= 1) {
var random = Math.floor(Math.random() * message.length); var random = Math.floor(Math.random() * slogans.length);
var sloganText = message[random].toLowerCase(); var sloganText = slogans[random].toLowerCase();
console.log(`Slogan changed to: ${sloganText}`); console.log(`Slogan changed to: ${sloganText}`);
} else { } else {
var sloganText = "welkom bij somtodayn't"; var sloganText = "welkom bij somtodayn't";
@ -38,6 +41,14 @@ function changeSlogan(message)
// Add a little credit // Add a little credit
document.querySelectorAll('footer > span')[0].innerHTML = "Somtodayn't is een add-on door McArn."; document.querySelectorAll('footer > span')[0].innerHTML = "Somtodayn't is een add-on door McArn.";
// Set theme
console.log(tonight);
if (tonight) {
var cssUrl = browser.runtime.getURL("content/css/index.css");
var cssTag = `<link rel='stylesheet' href='${cssUrl}'>`;
document.body.innerHTML += cssTag;
}
} }
// Send request to background script // Send request to background script

View File

@ -36,14 +36,17 @@
"default_popup": "popup/html/index.html" "default_popup": "popup/html/index.html"
}, },
"web_accessible_resources": [
"content/css/index.css"
],
"content_scripts": [ "content_scripts": [
{ {
"matches": ["*://*.somtoday.nl/*"], "matches": ["*://*.somtoday.nl/*"],
"js": [ "js": [
"vendor/browser-polyfill.js", "vendor/browser-polyfill.js",
"content/js/index.js" "content/js/index.js"
], ]
"css": [ "content/css/index.css" ]
} }
] ]

View File

@ -10,16 +10,24 @@
<div> <div>
<h2>SOMtodayn't</h2> <h2>SOMtodayn't</h2>
</div> </div>
<h3>Slogan toevoegen</h3> <h3>Slogan toevoegen</h3>
<h6>Het laatste woord van de slogan wordt blauw.</h6> <h6>Het laatste woord van de slogan wordt blauw.</h6>
<form id="sloganForm"> <form id="sloganForm">
<input type="text" placeholder="Nieuwe slogan"> <input type="text" placeholder="Nieuwe slogan">
<button type="submit">Toevoegen</button> <button type="submit">Toevoegen</button>
</form> </form>
<h3>SOMtonight™</h3>
<h6>Donkere modus voor SOMtoday</h6>
<input type="checkbox" name="tonight" id="tonight">
<label for="tonight">SOMtonight™ gebruiken</label>
<h3>Bestaande slogans</h3> <h3>Bestaande slogans</h3>
<h6>Klik op een slogan om deze te verwijderen.</h6> <h6>Klik op een slogan om deze te verwijderen.</h6>
<div id="sloganList"> <div id="sloganList">
</div> </div>
<span class="footer">By McArn - 2019</span> <span class="footer">By McArn - 2019</span>
<script src="../js/index.js"></script> <script src="../js/index.js"></script>
</body> </body>

View File

@ -7,8 +7,8 @@ request = browser.runtime.sendMessage({
type: "get" type: "get"
}); });
request.then(function(message) { request.then(function(message) {
var sloganArray = message.response; var darkmode = message.response[0];
// DEBUG // console.log(message.response); var sloganArray = message.response[1];
// Add a slogan to the array // Add a slogan to the array
function addSlogan(value) { function addSlogan(value) {
@ -35,7 +35,7 @@ request.then(function(message) {
// Send updated array to background script // Send updated array to background script
function updateSlogans(array) { function updateSlogans(array) {
request = browser.runtime.sendMessage({ request = browser.runtime.sendMessage({
type: "set", type: "setSlogans",
value: array value: array
}); });
request.then(function() { request.then(function() {
@ -43,6 +43,19 @@ request.then(function(message) {
}, handleError); }, handleError);
} }
// Add event listener to checkbox
var checkbox = document.getElementById('tonight');
if (darkmode) {
checkbox.checked = true;
}
checkbox.addEventListener('click', function(event) {
request = browser.runtime.sendMessage({
type: "setTonight",
value: checkbox.checked
});
});
// Add existing slogans to list items in the popup // Add existing slogans to list items in the popup
var sloganList = ''; var sloganList = '';
for (let index = 0; index < sloganArray.length; index++) { for (let index = 0; index < sloganArray.length; index++) {