Added checkbox for SOMtonight

background/js/index.js

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

content/js/index.js

@@ -2,11 +2,14 @@ console.log('Somtoday\'nt content script active');
 
 function changeSlogan(message) 
 {
+    tonight = message[0];
+    slogans = message[1];
+
     // Select random slogan
-    console.log(`Loaded ${message.length} slogans`);
-    if (message.length >= 1) {
-        var random = Math.floor(Math.random() * message.length);
-        var sloganText = message[random].toLowerCase();
+    console.log(`Loaded ${slogans.length} slogans`);
+    if (slogans.length >= 1) {
+        var random = Math.floor(Math.random() * slogans.length);
+        var sloganText = slogans[random].toLowerCase();
         console.log(`Slogan changed to: ${sloganText}`);
     } else {
         var sloganText = "welkom bij somtodayn't";
@@ -38,6 +41,14 @@ function changeSlogan(message)
 
     // Add a little credit
     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

manifest.json

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

popup/html/index.html

@@ -10,16 +10,24 @@
     <div>
         <h2>SOMtodayn't</h2>
     </div>
+
     <h3>Slogan toevoegen</h3>
     <h6>Het laatste woord van de slogan wordt blauw.</h6>
     <form id="sloganForm">
         <input type="text" placeholder="Nieuwe slogan">
         <button type="submit">Toevoegen</button>
     </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>
     <h6>Klik op een slogan om deze te verwijderen.</h6>
     <div id="sloganList">
     </div>
+
     <span class="footer">By McArn  -  2019</span>
     <script src="../js/index.js"></script>
 </body>

popup/js/index.js

@@ -7,8 +7,8 @@ request = browser.runtime.sendMessage({
     type: "get"
 });
 request.then(function(message) {
-    var sloganArray = message.response;
-    // DEBUG // console.log(message.response);
+    var darkmode = message.response[0];
+    var sloganArray = message.response[1];
 
     // Add a slogan to the array
     function addSlogan(value) {
@@ -35,7 +35,7 @@ request.then(function(message) {
     // Send updated array to background script
     function updateSlogans(array) {
         request = browser.runtime.sendMessage({
-            type: "set",
+            type: "setSlogans",
             value: array
         });
         request.then(function() {
@@ -43,6 +43,19 @@ request.then(function(message) {
         }, 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
     var sloganList = '';
     for (let index = 0; index < sloganArray.length; index++) {