tidy up code

change relative path of js/script.js to absolute path.

layouts/_default/baseof.html

@@ -108,7 +108,7 @@
 
     {{ template "_internal/google_analytics.html" . }}
 
-    <script src="js/script.js"></script>
+    <script src="/js/script.js"></script>
   </body>
 
 </html>

static/js/script.js

@@ -1,38 +1,74 @@
 // TODO move this file into assets and use hugo pipes and babel
 
 (function(){
-  var modeBtnText = document.getElementById('cs-mode-button-state');
+  var STATES = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
-  var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
+  var LABELS = ["On", "Off", "Auto"]; // display text of dark mode setting - corresponds with STATES array
-  var labels = ["On", "Off", "Auto"];
-  var activeState = -1;
 
+  var CS_BTN_CLASS = 'cs-mode-button';
+  var CS_BTN_CONTAINER_CLASS = 'cs-mode-container';
+  var CS_BTN_TEXT_CLASS = 'cs-mode-button-state';
+  var CS_MODE_COOKIE_NAME = "cs_mode"; // name of cookie that stores dark mode setting
+
+  var MODE_BTN_TEXT_ELEMENT = document.getElementById(CS_BTN_TEXT_CLASS);
+
+  var activeState = -1; // the active index of the STATES array
+  var cookieMode; // dark mode setting value retrieved from cookie
+
+  // toggles the color scheme between the states specified in the array STATES
   function toggleColorscheme() {
-    for(var i = states.length - 1; i >= 0; i--) {
+    for(var i = 0; i < STATES.length; i++) {
-      if (document.body.classList.contains(states[i])) {
+      if (document.body.classList.contains(STATES[i])) {
-        document.body.classList.remove(states[activeState]);
+        document.body.classList.remove(STATES[activeState]);
-        activeState = activeState < states.length - 1 ? activeState + 1 : 0;
+        activeState = activeState < STATES.length - 1 ? activeState + 1 : 0;
-        document.body.classList.add(states[activeState]);
+        document.body.classList.add(STATES[activeState]);
-        modeBtnText.innerText = labels[activeState];
+        MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
+        document.cookie = CS_MODE_COOKIE_NAME + "=" + STATES[activeState] + "; path=/;max-age=315360000";
         break;
       }
     }
   }
 
-  // TODO use cookie to record state of dark mode
+  // returns the value fo the cookie named name
+  // or null if not present.
+  function getCookie(name) {
+    var cookieList = document.cookie.split(";")
+    var value = null;
 
-  for(var i = states.length - 1; i >= 0; i--) {
+    for (var i = 0; i < cookieList.length; i++) {
-    if (document.body.classList.contains(states[i])) {
+      if (cookieList[i].indexOf(CS_MODE_COOKIE_NAME + "=") > -1) {
-      activeState = i;
+        value = cookieList[i].substring(cookieList[i].indexOf('=') + 1);
-      modeBtnText.innerText = labels[activeState];
+      }
     }
+    return value;
   }
 
+  cookieMode = getCookie(CS_MODE_COOKIE_NAME);
+
+  if (cookieMode !== null) {
+    for(var i = 0; i < STATES.length; i++) {
+      document.body.classList.remove(STATES[i]);
+    }
+    document.body.classList.add(cookieMode);
+    // cannot set activeState directly in here, in case cookie is not present
+    // (in which case, document.body will already have the class which was
+    // specified in /layouts/_default/baseof.html, which we will use later).
+  }
+  // now we can use document.body.classlist to set activeState.
+  for(var i = 0; i < STATES.length; i++) {
+    if (document.body.classList.contains(STATES[i])) {
+      activeState = i;
+    }
+  }
+  MODE_BTN_TEXT_ELEMENT.innerText = LABELS[activeState];
+
+  // if activeState is valid, add button's event listener,
+  // otherwise hide the toggle button.
   if (activeState > -1) {
-    document.getElementById('cs-mode-button').addEventListener('click', function() {
+    document.getElementById(CS_BTN_CLASS).addEventListener('click', function() {
       toggleColorscheme();
     })
   } else {
-    document.getElementById('cs-mode-container').style.display = "none";
+    document.getElementById(CS_BTN_CONTAINER_CLASS).style.display = "none";
   }
 })();