Add persistence of settings using cookies

src/tracker/dom.js

@@ -84,6 +84,22 @@ var DOM = (function(){
      */
     listen: (ele, event, callback) => ele.addEventListener(event, callback),
     
+    /*
+     * Utility function to save an object into a cookie.
+     */
+    saveToCookie: (name, obj, expiresInSeconds) => {
+      var expires = new Date(Date.now()+1000*expiresInSeconds).toUTCString();
+      document.cookie = name+"="+encodeURIComponent(JSON.stringify(obj))+";path=/;expires="+expires;
+    },
+    
+    /*
+     * Utility function to load an object from a cookie.
+     */
+    loadFromCookie: (name) => {
+      var value = document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)"+name+"\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1");
+      return value.length ? JSON.parse(decodeURIComponent(value)) : null;
+    },
+    
     /*
      * Triggers a UTF-8 text file download.
      */

src/tracker/gui.js

@@ -36,13 +36,13 @@ var GUI = (function(){
       var force = type === "gui" && detail === "settings";
       
       if (force){
-        settings.ui.cbAutoscroll.checked = STATE.settings.autoscroll;
+        settings.ui.cbAutoscroll.checked = SETTINGS.autoscroll;
-        settings.ui.optsAfterFirstMsg[STATE.settings.afterFirstMsg].checked = true;
+        settings.ui.optsAfterFirstMsg[SETTINGS.afterFirstMsg].checked = true;
-        settings.ui.optsAfterSavedMsg[STATE.settings.afterSavedMsg].checked = true;
+        settings.ui.optsAfterSavedMsg[SETTINGS.afterSavedMsg].checked = true;
       }
       
       if (type === "setting" || force){
-        var autoscrollRev = !STATE.settings.autoscroll;
+        var autoscrollRev = !SETTINGS.autoscroll;
         
         // discord polyfills Object.values
         Object.values(settings.ui.optsAfterFirstMsg).forEach(ele => ele.disabled = autoscrollRev);
@@ -56,6 +56,7 @@ var GUI = (function(){
   var setupStateChanged = function(detail){
     if (!registeredEvent){
       STATE.onStateChanged(stateChangedEvent);
+      SETTINGS.onSettingsChanged(stateChangedEvent);
       registeredEvent = true;
     }
     
@@ -245,18 +246,18 @@ var GUI = (function(){
       // events
       
       settings.ui.cbAutoscroll.addEventListener("change", () => {
-        STATE.settings.autoscroll = settings.ui.cbAutoscroll.checked;
+        SETTINGS.autoscroll = settings.ui.cbAutoscroll.checked;
       });
       
       Object.keys(settings.ui.optsAfterFirstMsg).forEach(key => {
         DOM.listen(settings.ui.optsAfterFirstMsg[key], "click", () => {
-          STATE.settings.afterFirstMsg = key;
+          SETTINGS.afterFirstMsg = key;
         });
       });
       
       Object.keys(settings.ui.optsAfterSavedMsg).forEach(key => {
         DOM.listen(settings.ui.optsAfterSavedMsg[key], "click", () => {
-          STATE.settings.afterSavedMsg = key;
+          SETTINGS.afterSavedMsg = key;
         });
       });
       

src/tracker/settings.js

@@ -0,0 +1,48 @@
+var CONSTANTS = {
+  AUTOSCROLL_ACTION_NOTHING: "optNothing",
+  AUTOSCROLL_ACTION_PAUSE: "optPause",
+  AUTOSCROLL_ACTION_SWITCH: "optSwitch"
+};
+
+var SETTINGS = (function(){
+  var root = {};
+  var settingsChangedEvents = [];
+  
+  var triggerSettingsChanged = function(changeType, changeDetail){
+    for(var callback of settingsChangedEvents){
+      callback(changeType, changeDetail);
+    }
+    
+    DOM.saveToCookie("DHT_SETTINGS", root, 60*60*24*365*5);
+  };
+  
+  var defineTriggeringProperty = function(obj, property, value){
+    var name = "_"+property;
+    
+    Object.defineProperty(obj, property, {
+      get: (() => obj[name]),
+      set: (value => {
+        obj[name] = value;
+        triggerSettingsChanged("setting", property);
+      })
+    });
+    
+    obj[name] = value;
+  };
+  
+  var loaded = DOM.loadFromCookie("DHT_SETTINGS") || {
+    "_autoscroll": true,
+    "_afterFirstMsg": CONSTANTS.AUTOSCROLL_ACTION_PAUSE,
+    "_afterSavedMsg": CONSTANTS.AUTOSCROLL_ACTION_PAUSE
+  };
+  
+  defineTriggeringProperty(root, "autoscroll", loaded._autoscroll);
+  defineTriggeringProperty(root, "afterFirstMsg", loaded._afterFirstMsg);
+  defineTriggeringProperty(root, "afterSavedMsg", loaded._afterSavedMsg);
+  
+  root.onSettingsChanged = function(callback){
+    settingsChangedEvents.push(callback);
+  };
+  
+  return root;
+})();

src/tracker/state.js

@@ -1,9 +1,3 @@
-var CONSTANTS = {
-  AUTOSCROLL_ACTION_NOTHING: "optNothing",
-  AUTOSCROLL_ACTION_PAUSE: "optPause",
-  AUTOSCROLL_ACTION_SWITCH: "optSwitch"
-};
-
 var STATE = (function(){
   var stateChangedEvents = [];
   
@@ -13,41 +7,10 @@ var STATE = (function(){
     }
   };
   
-  var defineTriggeringProperty = function(obj, type, property){
-    var name = "_"+property;
-    
-    Object.defineProperty(obj, property, {
-      get: (() => obj[name]),
-      set: (value => {
-        obj[name] = value;
-        triggerStateChanged(type, property);
-      })
-    });
-  };
-  
-  /*
-   * Internal settings class constructor.
-   */
-  var SETTINGS = function(){
-    defineTriggeringProperty(this, "setting", "autoscroll");
-    defineTriggeringProperty(this, "setting", "afterFirstMsg");
-    defineTriggeringProperty(this, "setting", "afterSavedMsg");
-  };
-  
-  /*
-   * Resets settings without triggering state changed event.
-   */
-  SETTINGS.prototype._reset = function(){
-    this._autoscroll = true;
-    this._afterFirstMsg = CONSTANTS.AUTOSCROLL_ACTION_PAUSE;
-    this._afterSavedMsg = CONSTANTS.AUTOSCROLL_ACTION_PAUSE;
-  };
-  
   /*
    * Internal class constructor.
    */
   var CLS = function(){
-    this.settings = new SETTINGS();
     this.resetState();
   };
   
@@ -58,7 +21,6 @@ var STATE = (function(){
     this._savefile = null;
     this._isTracking = false;
     this._lastFileName = null;
-    this.settings._reset();
     triggerStateChanged("data", "reset");
   };
   

src/tracker/Σ.js

@@ -31,15 +31,15 @@ DISCORD.setupMessageRequestHook((channel, messages) => {
       STATE.addDiscordChannel(info.server, info.type, channel, info.channel);
       var hasUpdatedFile = STATE.addDiscordMessages(channel, messages);
       
-      if (STATE.settings.autoscroll){
+      if (SETTINGS.autoscroll){
         DOM.setTimer(() => {
           var action = CONSTANTS.AUTOSCROLL_ACTION_NOTHING;
           
           if (!hasUpdatedFile){
-            action = STATE.settings.afterSavedMsg;
+            action = SETTINGS.afterSavedMsg;
           }
           else if (!DISCORD.hasMoreMessages()){
-            action = STATE.settings.afterFirstMsg;
+            action = SETTINGS.afterFirstMsg;
           }
           
           if ((action === CONSTANTS.AUTOSCROLL_ACTION_SWITCH && !DISCORD.selectNextTextChannel()) || action === CONSTANTS.AUTOSCROLL_ACTION_PAUSE){
@@ -81,12 +81,12 @@ STATE.onStateChanged((type, detail) => {
       --untrackedRequests;
     }
     
-    if (STATE.settings.autoscroll && DISCORD.isInMessageView()){
+    if (SETTINGS.autoscroll && DISCORD.isInMessageView()){
       if (DISCORD.hasMoreMessages()){
         DISCORD.loadOlderMessages();
       }
       else{
-        var action = STATE.settings.afterFirstMsg;
+        var action = SETTINGS.afterFirstMsg;
 
         if ((action === CONSTANTS.AUTOSCROLL_ACTION_SWITCH && !DISCORD.selectNextTextChannel()) || action === CONSTANTS.AUTOSCROLL_ACTION_PAUSE){
           DOM.setTimer(() => STATE.toggleTracking(), 200); // give the user visual feedback after clicking the button before switching off